从socket.io中的客户端连接向服务器

时间:2017-07-17 01:55:18

标签: javascript socket.io ejs

我正在尝试在建立套接字连接时从active.ejs(客户端)向index.js(服务器)发送JSON对象。

但是,发送到服务器的套接字对象的查询参数不是我尝试在服务器中记录套接字对象时传递的JSON对象(它是一个空对象)。

active.ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Active</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="http://localhost:4000/socket.io/socket.io.js"></script>
  </head>
  <body>
    <script>var socket = io.connect('http://localhost:4000/tune-in', {query: "<%= user_info %>"}); %></script>
    <p>
      Welcome,
      <%= user_info.uri %>
    </p>
  </body>
</html>

这是user_info对象从 controller.js 传递到上述html(ejs)文件的方式 active.ejs

  app.get('/tune-in', function(req, res){
    res.render('active', {user_info: user_data});
  });

这是user_info对象的样子 -

{ country: 'US',
  display_name: 'My name',
  email: 'myname@gmail.com',
  external_urls: { spotify: 'https://open.spotify.com/user/randomnums' },
  followers: { href: null, total: 3 },
  href: 'https://api.spotify.com/v1/users/randomnums',
  id: 'randomstring',
  images:
   [ { height: null,
       url: 'myimg',
       width: null } ],
  product: 'premium',
  type: 'user',
  uri: 'spotify:user:randomstring' }

index.js - 应记录上述JSON数据

var io = socket(server);

io.on('connection', function(socket){
   console.log('Made socket connection', socket);
});

当我记录套接字对象时,查询参数看起来像 -

query:
      { '[object Object]': 'undefined',
        EIO: '3',
        transport: 'polling',
        t: 'LrEFaoW' } },

我的预期用法是能够在socket.broadcast.emit('users', data);中执行index.js之类的操作,其中data是一个JSON对象,其中包含user_info的一些字段(或查询对象)。

active.ejs 中,我想做类似的事情 -

<script>
  var socket = io.connect('http://localhost:4000/tune-in', {query: "<%= user_info %>"}); %>
  var active = document.getElementById('active');
  socket.on('users', function(data){
    active.innerHTML += "<li><em>" + data.display_name + " is connected" + "</em></li>";
  });
</script>

编辑:上述可能重复无法解决我的问题,即用{query: "<%= user_info %>"}替换{query: "<%-JSON.stringify(user_info)%>"}并未解决问题。相反,我在客户端遇到UnexpectedIdentifier错误。

EDIT2 错误是{query: "<%-JSON.stringify(user_info)%>"} <%-JSON.stringify(user_info)附近的双引号“”。

1 个答案:

答案 0 :(得分:2)

尝试将EJS模板更改为以下内容:

<script>
  var socket = io.connect('http://localhost:4000/tune-in', {
    query: <%- JSON.stringify(user_info) %>
  });
</script>

请注意<%-而不是<%=

相关问题