客户端的socket.io如何监听服务器发出的事件？答案

【问题标题】：How does socket.io on the client listen to events emitted from server?客户端的socket.io如何监听服务器发出的事件？
【发布时间】：2018-06-28 04:25:23
【问题描述】：

我的客户端有以下代码：

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

所以我想我理解上述内容。当点击事件发生时，运行回调函数。在回调函数内部，让套接字向服务器发出这个“聊天”事件。随着事件套接字的发射，传递 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 功能吗？我想知道更多后端发生的事情。

【问题讨论】：

Afaik 客户端打开一个persistent connection。这样服务器就可以随时发送数据。

标签： javascript node.js socket.io

【解决方案1】：

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

在您的前端代码中，您应该有一些类似于

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

此代码使用 Web 套接字向服务器请求 tcp 连接。一旦浏览器通过websockets连接到服务器，socket.io就可以通过连接向send发送事件了。

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

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

https://www.rfc-editor.org/rfc/rfc6455

【讨论】：