介绍
WebSocket 是一种 HTML5 协议，它提供了双向通信的能力，可以在 Web 应用程序中创建实时的、即时的交互体验。而 Socket.io 是一个基于 WebSocket 的实现，它能兼容不支持 WebSocket 的浏览器，并且提供了更丰富的特性，如应对网络故障等问题。
在本文中，我们将介绍如何使用 Socket.io 实现一个简易的聊天室应用程序。
实现步骤
1. 安装 Socket.io 库
首先我们需要安装 Socket.io 库。可以使用以下命令进行安装：
npm install socket.io
2. 创建服务器端
在服务器端创建一个 index.js 文件，我们需要引入 socket.io 库并创建 Socket.io 服务器。代码如下：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - -------------------- ----- -- - ----------------------------- ----- ---- - ---------------- -- ----- ------------------- -- -- - ---------------------- -- ---- ---------- --- ------------------- -------- -- - ------------------- --------- -------------------- ---
上述代码中，我们使用 Node.js 自带的 http 模块创建了一个 HTTP 服务器，并创建了一个 Socket.io 服务器，将它们绑定在同一端口上。io.on('connection', ...) 用来监听新连接的事件，当客户端连接到服务器时，执行回调函数。在回调函数中，我们可以监听客户端发来的消息等操作。
3. 实现聊天室功能
添加以下代码到回调函数中，让服务器端能够接收到客户端发来的消息，并将消息广播给每个连接到服务器的客户端：
socket.on('chat message', (msg) => {
console.log(`Message: ${msg}`);
io.emit('chat message', msg);
});在客户端 HTML 中添加以下代码：
-- -------------------- ---- -------
---- --------------------
------ ----------------- --
------- -----------------------------
------- ---------------------------------------
--------
----- ------ - -----
--------------- --------- ----- -- -
----- -------- - ------------------------------------
----- -- - -----------------------------
------------ - ----
-------------------------
---
----- ------------ - ----------------------------------------
----- ---------- - --------------------------------------
------------------------------------ -- -- -
----- --- - -------------------
----------------- --------- -----
------------------ - ---
---
---------在这段代码中，我们使用 socket.io.js 文件，它会自动与服务器建立 WebSocket 连接。在收到来自服务器的 chat message 消息时，客户端将此消息添加到 messages 列表中。当用户在聊天室中输入消息并点击“发送”按钮时，客户端将消息发送到服务器，并使用 socket.emit 发送消息。
完整代码
服务器代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --------------------
----- -- - -----------------------------
----- ---- - ---------------- -- -----
------------------- -- -- -
---------------------- -- ---- ----------
---
------------------- -------- -- -
------------------- --------- --------------------
--------------- --------- ----- -- -
--------------------- ---------
------------- --------- -----
---
---客户端 HTML 代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
---------------- ---- ------------
-------
------
--- -------------------
------ ----------------- --
------- -----------------------------
------- ---------------------------------------
--------
----- ------ - -----
--------------- --------- ----- -- -
----- -------- - ------------------------------------
----- -- - -----------------------------
------------ - ----
-------------------------
---
----- ------------ - ----------------------------------------
----- ---------- - --------------------------------------
------------------------------------ -- -- -
----- --- - -------------------
----------------- --------- -----
------------------ - ---
---
---------
-------
-------总结
本文简单介绍了如何使用 Socket.io 实现 WebSocket 聊天室，其中包括如何创建服务器端、如何实现聊天室功能，以及如何创建客户端 HTML 页面，通过本文的学习，你可以快速地开始使用 Socket.io 构建自己的实时应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e9b7a1f6b2d6eab34e8549