Socket.io 问题——客户端和服务器如何通信

Question

我刚开始使用 socket.io。我正在浏览网页中提到的示例。特别是下面的服务器代码

io.on('connection', function(socket){
    socket.on('nitrous', function(msg){
      io.emit('nitrous', msg);
      console.log( "Server is emiting the event");
    });
  });

结合下面的客户端代码

<script src="/socket.io/socket.io.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('nitrous', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('nitrous', function(msg){
      $('#messages').append($('<li>').text(msg));
        console.log( "Client is emiting the event");
    });
  });
</script>

我知道我们提交了表单，它会发出一个名为“nitrous”的事件，然后会调用在套接字上注册的处理程序。但我也注意到服务器上的套接字对象上的处理程序也被调用了。我的第一个问题是所有连接到应用程序的用户是如何发生这种情况的。其次，在服务器中，有正在传递的具有相同事件名称的 io.emit() - 这是如何以及在哪里处理的？我没有包含任何 io.on() 但它仍然有效。

我指的是这个例子：https://socket.io/get-started/chat/#Integrating-Socket-IO

请分享您的想法。

谢谢， 帕万。

Answer 1

让我重写你的代码来解释发生了什么：

// Server

// when server gets new client connected do this:
serverSocket.on('connection', function (client) {

  // when server receives event from client that called "nitrous" do this:
  client.on('nitrous', function (msg) {

    // emit event with name "nitrous" to every client - including sender
    serverSocket.emit('nitrous', msg)

    // or could just emit event to everyone but sender
    // client.broadcast.emit('nitrous') // uncomment this line

    console.log('Server receives the event from client')
  })

})

现在客户端（仅 javascript）：

// Client

$(function () {
  const clientSocket = io()

  $('form').submit(function (e) {
    e.preventDefault() // prevents page reloading

    // message that client wants to send
    const msg = $('#m').val()

    // emit event called "nitrous" to server
    clientSocket.emit('nitrous', msg)

    // clear input field
    $('#m').val('')

    return false
  });

  // when client receives event from server called 'nitrous' do this:
  clientSocket.on('nitrous', function (msg) {
    // append LI element to list of messages
    $('#messages').append($('<li>').text(msg))

    console.log('Client receives the event')
  })
})

希望这更有意义。