1. 背景
现代 web 应用的流行，使得人们更加追求实时交互和即时更新的页面内容。在传统的 web 技术中，实现这种实时交互需要频繁地向服务器发送请求，然后再将服务器的响应信息重新渲染页面，在长时间的交互中，这种方式的效率非常低下。
为了解决这个问题，WebSocket 技术应运而生。它使用了一种全双工的通信方式，允许服务器和客户端之间建立一个持久的连接，只需发送一次请求，就可以在不依赖于以前的请求的情况下实现实时“服务器-浏览器”交互。
Socket.io 是一个基于 WebSocket 的库，可以帮助开发者更轻松地构建实时 web 应用。本篇文章将介绍如何使用 Socket.io 和 NodeJS 构建一个基于 WebSocket 的实时 web 应用，并提供示例代码和详细的说明。
2. 准备工作
开始构建我们的应用之前，请确保你已经安装了 NodeJS 和 npm。安装方法可以参考官方文档。
接下来，我们需要在本地初始化一个 NodeJS 项目，这里假设你已经创建了一个名为 demo 的项目。
在项目根目录下打开终端，执行以下命令进行初始化：
npm init -y
这个命令将自动为你创建一个 package.json 文件，用来管理你的项目依赖。
接下来，你需要安装 Socket.io 库。执行以下命令：
npm install socket.io
安装成功后，你会看到项目下多了一个 node_modules 目录，其中包含了 Socket.io 库以及其依赖的其他库。
3. 后端代码
接下来我们来编写后端代码，即服务器端的代码。在项目根目录下，创建一个名为 server.js 的文件，用来管理后端代码。
3.1 引入库
我们需要引入 socket.io 和 http 两个库，用来启动一个基于 ExpressJS 的服务器，并且实例化一个 WebSocket 服务器。
const express = require("express");
const http = require("http");
const socketio = require("socket.io");3.2 创建服务器
我们需要创建一个 http 服务器，并将它绑定到指定的端口上。这里的代码使用了 ExpressJS 库来管理服务器的路由规则。
const app = express();
const server = http.createServer(app);
const io = socketio(server);
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server listening on port ${PORT}`));3.3 Socket.io 事件
接下来，我们需要监听 Socket.io 事件。这些事件是指当客户端连接或断开连接时所触发的事件。
io.on("connection", (socket) => {
console.log(`Client ${socket.id} connected`);
socket.on("disconnect", () => {
console.log(`Client ${socket.id} disconnected`);
});
});这段代码用于监听客户端连接和断开连接的事件，并在服务器控制台输出对应的日志信息。在客户端连接时，我们输出客户端的 Socket.id，便于调试。
3.4 发送消息
我们的项目需要让客户端发送消息，在服务器端接收并再次发送给所有客户端。接下来，我们来实现这个功能。
-- -------------------- ---- -------
------------------- -------- -- -
------------------- ------------ ------------
----------------------- -- -- -
------------------- ------------ ---------------
---
------------------------- ------ -- -
------------------
---------------------- ------
---
---这段代码实现了一个名为 send_message 的事件监听器，用于接收从客户端发送过来的消息，并将消息再次发送给所有客户端。
3.5 完整代码
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- -------- - ---------------------
----- --- - ----------
----- ------ - -----------------------
----- -- - -----------------
----- ---- - ---------------- -- -----
------------------- -- -- ------------------- --------- -- ---- -----------
------------------- -------- -- -
------------------- ------------ ------------
----------------------- -- -- -
------------------- ------------ ---------------
---
------------------------- ------ -- -
------------------
---------------------- ------
---
---4. 前端代码
接下来，我们来编写前端代码。在项目根目录下创建一个名为 index.html 的文件，用来管理前端代码。
4.1 引入 Socket.io 库
我们需要在 index.html 中引入 Socket.io 库，并建立 WebSocket 连接。
<script src="https://cdn.socket.io/4.1.2/socket.io.min.js"></script>
<script>
const socket = io();
</script>这段代码用于引入 Socket.io 库，并建立基于 WebSocket 的连接。
4.2 发送消息
在客户端界面中，我们需要添加一个文本输入框和一个按钮，用于发送消息。以下是示例代码：
-- -------------------- ---- -------
-----
------ ----------- ------------------ ----------------- ---- ---------
------- --------------------------------------
------
--------
----- ------------- - -----------------------------------------
----- ------------------- - -----------------------------------------------
--------------------------------------------- -- -- -
----- ------------ - --------------------
------------------- - ---
--------------------------- --------------
---
---------这段代码用于定义文本输入框和按钮，并在按钮点击时发送消息。
4.3 接收消息
我们需要在客户端界面中实时地展示接收到的消息。以下是示例代码：
-- -------------------- ---- -------
---- ------------------
---------
------
--------
----- ------------ - ----------------------------------------
------------------------ ------ -- -
----- ------------ - -----------------------------
------------------------ - -----
-----------------------------------------------------------
---
---------这段代码用于在客户端界面中实时地展示接收到的消息。
4.4 完整代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------- ------------
-------
------
-----
------ ----------- ------------------ ----------------- ---- ---------
------- --------------------------------------
------
---- ------------------
---------
------
------- ------------------------------------------------------------
--------
----- ------ - -----
----- ------------- - -----------------------------------------
----- ------------------- - -----------------------------------------------
----- ------------ - ----------------------------------------
--------------------------------------------- -- -- -
----- ------------ - --------------------
------------------- - ---
--------------------------- --------------
---
------------------------ ------ -- -
----- ------------ - -----------------------------
------------------------ - -----
-----------------------------------------------------------
---
---------
-------
-------5. 运行项目
至此，我们已经完成了一个基于 Socket.io 和 NodeJS 的实时 web 应用。接下来，我们需要运行这个项目。
在项目根目录下，在终端执行以下命令：
node server.js
运行成功后，你可以在浏览器中访问 http://localhost:3000，即可看到一个简单的聊天室应用。在输入框中输入消息，可以实时地看到所有客户端的消息更新。
6. 总结
使用 Socket.io 和 NodeJS 构建实时 web 应用非常简单。本篇文章中所介绍的代码可以作为一个基本示例，帮助你进一步地理解 Socket.io 的使用。我们希望这篇文章能给你带来帮助，并激发出你对实时 web 应用的更深层次的思考和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eee22df6b2d6eab38e1804