介绍
Socket.io 是一个面向实时的双向通信库，特别适合用于创建实时应用程序，如聊天室、实况体育比赛、多用户实时协作等。
本篇文章将向您介绍如何使用 Socket.io 实现多人实时协作，包括如何创建服务器端和客户端，如何发送和接收消息，以及如何处理错误和异常情况。
设置
在开始编写代码之前，您需要安装 Socket.io：
npm install socket.io
接下来，您需要创建一个服务器文件。我们将使用 Node.js 和 Express 框架。在 main 目录下创建一个名为 index.js 的文件，并添加以下内容：
const app = require('express')(); const server = require('http').createServer(app); const io = require('socket.io')(server); server.listen(3000, () => { console.log('listening on *:3000'); });
这段代码创建了一个 Express 应用程序、一个 HTTP 服务器以及一个 Socket.io 服务器。最后，它在本地的 3000 端口上启动了服务器。
连接
接下来，我们需要创建客户端代码。我们将在浏览器中使用 Socket.io 客户端库。在 index.html 文件中添加以下内容：
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------------ ------- ------ ------------------ ------- --------------------------------------- -------- ----- ------ - ------------------------------------ -------------------- -- -- - ---------------------- -- --------- --- ----------------------- -- -- - ------------------------- ---- --------- --- --------- ------- -------展开代码
这段代码将 Socket.io 客户端库添加到 index.html 中，并连接到服务器。当客户端连接时，它将在控制台中输出“connected to server”。当客户端断开连接时，它将在控制台中输出“disconnected from server”。
发送和接收消息
现在我们已经成功连接服务器，下一步是发送和接收消息。在服务器和客户端之间发送消息非常简单。
在服务器中，您可以使用 Socket.io 的 emit() 方法来发送消息。
io.on('connection', (socket) => { socket.emit('message', 'Welcome!'); socket.on('message', (message) => { console.log('received message:', message); }); });
这段代码在客户端连接时向客户端发送了一条消息“Welcome!”。它还在收到名为“message”的消息时将消息打印到控制台。
在客户端中，您可以使用 Socket.io 的 emit() 方法来发送消息，使用 on() 方法来接收消息。
socket.emit('message', 'Hello, server!'); socket.on('message', (message) => { console.log('received message:', message); });
这段代码发送了名为“message”的消息到服务器，并在收到消息时将其打印到控制台。
处理错误和异常情况
在编写 Socket.io 应用程序时，您应该始终处理错误和异常情况。以下是一个简单的错误处理程序示例：
-- -------------------- ---- ------- ------------------- -------- -- - -------------- ---- ------------ ----------------------- -- -- - ----------------- --------------- --- ------------------ ----- -- - ------------------- --- ---展开代码
这段代码将控制台中的错误打印到控制台。
示例代码
以下是一个完整的示例代码，展示了如何使用 Socket.io 实现多人实时协作。
server.js
-- -------------------- ---- ------- ----- --- - --------------------- ----- ------ - ---------------------------------- ----- -- - ----------------------------- --- -------- - -- ------------------- -- -- - ---------------------- -- --------- --- ------------------- -------- -- - --- --------- - ------ -------------- --------- ------ -- - -------------------------- --------- - --------- ---------------- -------- ----- --- --- -------------- ------ ---------- -- - -- ----------- ------- --------------- - --------- ----------- --------- - ----- -------------------- - --------- --------- --- --------------------------- -------- - --------- ---------------- --------- --------- --- --- ------------------- -- -- - ------------------------------- - --------- ---------------- --- --- --------------- -------- -- -- - --------------------------- -------- - --------- ---------------- --- --- ----------------------- -- -- - -- ----------- - ----------- --------------------------- ------ - --------- ---------------- --------- --------- --- - --- ---展开代码
index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------- ------------ ------- - - ------- -- -------- -- ----------- ----------- - ---------- - ------- --- ----- ----- -------- ----- -------- ----- --------------- ------- ------- ------ - ----- - ----- -- --------- ----- - ------ - -------- ----- ----------- ----- - ------ ----- - ----- -- ------------- ---- - ------ ------ - ------ ----- - ------- - ----------- ------- - -------- ------- ------ ---- ------------------ ------------- --------- ---- ------------------- ---- -------------- ------ --------------- ----------------- - ------------ ------- -------------------------- ------ ------ ------- --------------------------------------- -------- ----- ----- - -------------------------------- ----- ------ - --------------------------------- ----- -------- - ----------------------------------- ----- ----- - -------------------------------- ----- ------ - ------------------------------------ ------------------ -- -------- -- -- - ------------ --------- --------- -------- ------ --- ----------- ----- -------- --- --- -------------- --------- -- --------- ------- -- -- - ------------ --------- ------- --- --- --------------- -------- -- --------- -------- -- -- - ------------ --------- --------- -------- ------------ ------- ----- --- ----------- ----- -------- --- --- --------------- ------ -- --------- -------- -- -- - ------------ --------- --------- -------- ------------ ----- ----- --- ----------- ----- -------- --- --- ------------------- -- -------- -- -- - ----- ------- - ---------------------------- -------------------------------- ------------------- - ------------ -- ----------- --------------------------- --- --------------- -------- -- -------- -- -- - ----- ------- - -------------------------------------- --------------- -- ------------------------------------------- -- ---------- -- --------- - ----------------- - --- -------- ------------ --------- ------- -- - ----- -------- - ---------------------------- ------------------ - ------------------------------ ------------ ---------------------------- --------------- - ------------------- - ------------------------------------ -- -- - ---------------------- --- ---------------------------------- -- -- - ----------------- --------- --- ------------------------------- ------- -- - ----------------------- ----- ------- - ---------------------- -- --------- - ---------------- --------- --------- ------------ --------- ----- ------- --- -------------- - --- --------------- - ------------------- - --- --------- ------- -------展开代码
指导意义
Socket.io 是一种非常强大的 Node.js 库，可用于创建实时应用程序。在编写 Socket.io 应用程序时，您应该始终处理错误和异常情况，并确保您的代码保持干净和有组织。使用示例代码作为指导，您可以轻松地使用 Socket.io 实现多人实时协作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ca63c6e46428fe9e27df09
