前言
在 Web 开发中，实时通信是一个非常重要的功能。socket.io 是一个流行的实时通信库，它允许客户端和服务器之间进行双向通信。本文将介绍 socket.io 的事件监听及使用方法，帮助读者更好地理解和使用该库。
事件监听
在 socket.io 中，事件是实现双向通信的基础。客户端和服务器都可以监听和触发事件。下面是一些常用的事件：
服务器端事件
connection
当客户端连接到服务器时，会触发 connection 事件。该事件的回调函数会接收一个 socket 参数，表示与客户端建立的连接。下面是一个例子：
const io = require('socket.io')(); io.on('connection', (socket) => { console.log('a user connected'); });
disconnect
当客户端断开与服务器的连接时，会触发 disconnect 事件。该事件的回调函数会接收一个 socket 参数，表示断开连接的客户端。下面是一个例子：
io.on('connection', (socket) => { socket.on('disconnect', () => { console.log('user disconnected'); }); });
自定义事件
除了上述两个事件，我们还可以自定义事件。服务器可以使用 socket.emit() 方法触发事件，客户端可以使用 socket.on() 方法监听事件。下面是一个例子：
io.on('connection', (socket) => { socket.on('chat message', (msg) => { console.log(`message: ${msg}`); io.emit('chat message', msg); }); });
上述代码中，服务器监听 chat message 事件，当有客户端触发该事件时，服务器会将消息广播给所有客户端。客户端可以使用以下代码监听该事件：
const socket = io(); socket.on('chat message', (msg) => { console.log(`message: ${msg}`); });
客户端事件
客户端也可以触发事件，服务器可以使用 socket.on() 方法监听事件。下面是一个例子：
const socket = io(); socket.emit('chat message', 'hello world');
上述代码中，客户端触发 chat message 事件，并将消息发送给服务器。服务器可以使用以下代码监听该事件：
io.on('connection', (socket) => { socket.on('chat message', (msg) => { console.log(`message: ${msg}`); }); });
使用方法
要使用 socket.io，我们需要先安装它。可以使用以下命令安装：
npm install socket.io
服务器端
在服务器端，我们需要创建一个 socket.io 实例，并监听连接事件。下面是一个例子：
const io = require('socket.io')(); io.on('connection', (socket) => { console.log('a user connected'); }); io.listen(3000);
上述代码中，我们创建了一个 socket.io 实例，并监听连接事件。最后使用 listen() 方法将服务器绑定到端口 3000。
客户端
在客户端，我们需要在 HTML 文件中引入 socket.io 库，并创建一个 socket 实例。下面是一个例子：
-- -------------------- ---- ------- ------- --------------------------------------- -------- ----- ------ - ----- -------------------- -- -- - ------------------------- --- ----------------------- -- -- - ---------------------------- --- ---------展开代码
上述代码中，我们引入了 socket.io 库，并创建了一个 socket 实例。我们可以监听 connect 和 disconnect 事件，以便在连接状态发生变化时得到通知。
总结
本文介绍了 socket.io 的事件监听及使用方法。socket.io 是一个功能强大的实时通信库，可以帮助开发者轻松实现双向通信。希望读者通过本文的介绍，能够更好地理解和使用该库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516157695b1f8cacde6d351
