客户端上的socket.io如何侦听服务器发出的事件？

Question

我的客户端上有以下代码：

btn.addEventListener('click', function(){
    socket.emit('chat',{
        message: message.value,
        handle: handle.value
    });
});

因此，我认为我理解上述内容。 当发生click事件时，请运行回调函数。 在回调函数内部，让套接字向服务器发出此“聊天”事件。 与事件套接字一起发出，传递JSON数据。

现在在服务器端，我们有：

var io = socket(server);

io.on('connection', function(socket){    
    socket.on('chat', function(data){
        io.emit('chat', data);  
    });
});

我想我也明白这一点。 将套接字绑定到该服务器。 然后听连接事件。 调用该事件时，socket.io（会神奇地吗？）将套接字对象传递给我们的函数。 然后，我们听所有套接字进行聊天。 按照客户端的定义，将聊天中发出的数据拿回我们所有的套接字。

socket.on('chat', function(data){
     // do cool stuff
})

还是在上面的示例中，我们让客户端在服务器端监听事件。

我的问题是，事件如何“传递”到客户端？ 这是某种本机Javascript功能吗？ 我想了解更多有关后端发生的情况。

Answer 1

该事件通过websockets传递到服务器。 它是从浏览器到服务器的tcp连接。 连接是全双工的，这意味着服务器可以将实时数据发送到客户端，反之亦然。

在前端代码中，您应该具有类似于以下内容的内容

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

此代码要求服务器使用Web套接字进行TCP连接。 一旦浏览器通过websockets连接到服务器，socket.io就可以通过连接将事件发送到发送方。

在连接事件中传递的套接字只是对前端连接时创建的任何套接字的引用。 套接字获得一个唯一的ID，通过此引用，您可以与Web浏览器客户端实时通信。

如果您想深入了解Web套接字，建议阅读此文章

https://tools.ietf.org/html/rfc6455