Socket.IO 是一个为实时应用程序提供双向通信的 JavaScript 库，它可以在客户端和服务器之间建立实时、事件驱动的连接。本文将介绍如何使用 npm 包 socket.io 来构建一个实时聊天室应用程序。
步骤一：安装 socket.io
在命令行中执行以下命令来安装 socket.io：
npm install socket.io
步骤二：创建服务器
首先，我们需要创建一个 Node.js 服务器，并监听指定端口：
-- -------------------- ---- ------- ----- --- - ------------------------------- ----- -- - -------------------------- ---------------- -- -- - ---------------------- -- --------- --- ------------------- -------- -- - -------------- ---- ------------ ---
上面的代码创建了一个 http 服务器，并使用 socket.io 将其转换为 WebSocket 服务器。然后，我们监听 connection 事件以处理新的客户端连接。当有客户端连接到服务器时，我们会在控制台输出 a user connected。
步骤三：发送和接收消息
现在，我们已经成功地建立了服务器并能够处理新的连接，接下来我们要通过 socket.io 实现实时通讯的功能。我们将使用 socket.emit() 发送消息，使用 socket.on() 监听消息。
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});上面的代码使用 socket.on() 监听来自客户端的 chat message 事件，并在控制台输出接收到的消息。然后，我们使用 io.emit() 将接收到的消息广播给所有连接到服务器的客户端。
在客户端，我们可以通过以下方式发送消息：
-- -------------------- ---- ------- ----- ------ - ----- ---------------------------- - ------------------- ----------------- --------- --------------- ---------------- ------ ------ --- --------------- --------- ------------- - ------------------------------------------- ---
上面的代码将 chat message 事件绑定到表单提交操作上，并使用 socket.emit() 发送输入框中的消息。然后，我们清空输入框并返回 false 防止浏览器刷新页面。最后，我们使用 socket.on() 监听来自服务器的 chat message 事件，并将消息添加到页面中。
步骤四：完整示例代码
以下是一个完整的实时聊天室应用程序示例代码：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---- ---------------
-------
--------- -
---------------- -----
------- --
-------- --
------ -----
------- -----
----------- -------
-
--------- -- -
-------- --- -----
-
--------- ----------------- -
----------- -----
-
--------
-------
------
--- -------------------
------
------ ------ ------------------ -----------------------
-------
------- ---------------------------------------
------- -----------------------------------------------------------
--------
----- ------ - -----
---------------------------- -
-------------------
----------------- --------- ---------------
----------------
------ ------
---
--------------- --------- ------------- -
-------------------------------------------
---
---------
-------
--------- -------------------- ---- ------- ----- --- - ------------------------------- ----- -- - -------------------------- ---------------- -- -- - ---------------------- -- --------- --- ------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------