Socket.io 是一个面向现代浏览器的实时应用程序框架，它在浏览器和服务器之间建立了实时、双向、基于事件的通信。在 Socket.io 中，事件是通过监听和发送来实现的。本文将深入介绍 Socket.io 中的监听和发送事件，并为读者分享相关的示例代码和学习指导。
监听事件
Socket.io 中的事件监听是通过 on 方法来实现的。在客户端中，我们可以监听服务器发送过来的事件；在服务器端中，我们可以监听客户端发出的事件。以下是一个简单的示例：
客户端代码
-- -------------------- ---- ------- ----- ------ - ----- -------------------- -- -- - -------------------- --- -------------------- ------ -- - ----------------------------- ---
在上面的示例中，我们通过 io() 方法创建了一个套接字对象，并通过 on 方法监听了 connect 和 message 两个事件。connect 事件将在客户端连接到服务器时触发，message 事件将在从服务器接收到消息时触发。
服务器端代码
-- -------------------- ---- -------
----- -- - -----------------------------
------------------- -------- -- -
----------------------
---------------------- -----------
----------------------- -- -- -
-----------------------
---
---在上面的服务器端代码中，我们通过 require('socket.io')(server) 创建了一个 Socket.io 实例，并通过 on 方法监听了 connection 和 disconnect 两个事件。connection 事件将在有客户端连接到服务器时触发，disconnect 事件将在客户端断开连接时触发。在连接成功后，服务器可以通过 emit 方法向客户端发送消息，并在客户端断开连接时输出一条日志。
发送事件
Socket.io 中的发送事件是通过 emit 方法来实现的。在客户端中，我们可以向服务器发送事件；在服务器端中，我们可以向客户端发送事件。以下是一个简单的示例：
客户端代码
const socket = io();
const sendMessage = () => {
const message = document.querySelector('#message').value;
socket.emit('message', message);
};
document.querySelector('#sendBtn').addEventListener('click', sendMessage);在上面的示例中，我们将 sendMessage 方法绑定到发送按钮的点击事件上，当用户点击发送按钮时，将从输入框中获取消息内容，并通过 emit 方法向服务器发送 message 事件。
服务器端代码
-- -------------------- ---- -------
----- -- - -----------------------------
------------------- -------- -- -
----------------------
-------------------- ------ -- -
-----------------------------
---------------------- ---------------------
---
----------------------- -- -- -
-----------------------
---
---在上面的服务器端代码中，我们在监听 message 事件的回调函数中接收到了客户端发送的消息，并通过 emit 方法向客户端发送了一条确认消息。在客户端收到确认消息后，可以根据自己的需求进行相应的处理。
总结
通过深入分析 Socket.io 中的监听和发送事件，我们可以更好地理解 Socket.io 的工作原理。在实际开发中，我们可以根据自己的需求灵活地监听和发送不同的事件，实现双向通信和实时更新。本文提供的示例代码和学习指导将有助于读者更好地掌握 Socket.io 的使用技巧和注意事项，从而能够在前端开发中应用 Socket.io 并取得更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c0d1c968c7c53b0e5163e