没有获取socket.io客户端传递的值

I am stuck at the get-started part of socket.io tutorial, on emitting events. Before that, I did get the user connected and user disconnected in the console. However, in the emitting part, I don't get any message passed by the socket.io client in the console.

发布事件时，我陷入了socket.io教程的入门部分。在此之前，我确实在控制台中连接了用户并断开了用户连接。但是，在发送部分中，我没有得到控制台中socket.io客户端传递的任何消息。

This is the code so far:

这是到目前为止的代码：

index.js:

index.js：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.sendFile(__dirname+'/index.html');
});

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

http.listen(3000, function(){
    console.log('listening on *:3000');
});

index.html:

index.html的：

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>

  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  </script>

  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

I would really appreciate if you could guide me through this problem. Thank you.

如果你能引导我解决这个问题，我将非常感激。谢谢。

1 个解决方案

#1

You're missing a line in your index.js

你在index.js中缺少一行

Instead of:

代替：

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

You should have:

你应该有：

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

What's happening is that in the html file, when you submit a chat message, you are emitting it back to to server, who needs to emit it back to all of the other users. Without that io.emit line, all of the other users will not get the message

发生的事情是，在html文件中，当您提交聊天消息时，您将其发送回服务器，服务器需要将其发回给所有其他用户。如果没有该io.emit行，则所有其他用户都不会收到该消息

*edit: Also in your html file, it should look like this:

*编辑：同样在你的html文件中，它应该如下所示：

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>

  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>

  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
   socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  </script>
</html>

It wasn't working because you were running your script first which references a jQuery element that doesn't exist yet. If you wanted to keep the body where it was, you would need to wrap the scripts in a $(document).ready function. Also you were forgetting to append the message on incoming chat message sockets.

它没有工作，因为你首先运行你的脚本，它引用了一个尚不存在的jQuery元素。如果你想将主体保持在原来的位置，你需要将脚本包装在$（document）.ready函数中。此外，您忘记在传入的聊天消息套接字上附加消息。

#1