随着互联网技术的不断进步，Web 应用程序也在不断发展。实时 Web 应用程序是一种特殊的 Web 应用程序，它可以实时地将数据传输到客户端浏览器，而且与 Web 服务器的交互是双向的。在实时 Web 应用程序中，客户端和服务器端之间使用 WebSockets 进行通信，这种方式比传统的 HTTP 请求与响应方式更高效，实现了实时数据的传输和交互。
Node.js 是一种非常适合构建实时 Web 应用程序的工具。它基于 JavaScript，可以快速搭建 Web 服务器和处理请求、响应、路由等操作。而 Socket.io 是一种基于 Node.js 的实时 Web 应用程序框架，它可以让 Web 应用程序在客户端和服务器端之间实现双向通信，实时地传输数据，是一种非常强大的实时 Web 应用程序解决方案。
安装 Node.js 和 Socket.io
要使用 Node.js 和 Socket.io 构建实时 Web 应用程序，首先需要安装 Node.js。Node.js 可以在官网 https://nodejs.org/ 上下载。
安装完成 Node.js 后，就可以使用 npm（Node.js 的包管理器）来安装 Socket.io，命令如下：
npm install socket.io
构建实时 Web 应用程序
下面介绍如何使用 Node.js 和 Socket.io 来构建实时 Web 应用程序。首先在 Node.js 中创建一个新的项目：
mkdir realtime-app cd realtime-app npm init -y
然后安装 Express 和 Socket.io：
npm install express socket.io
创建一个 index.js 文件，输入以下内容：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ----- ------ - ---------------- -- -- - ---------------------- -- --------- --- ----- -- - ----------------------------- ------------------- -------- -- - -------------- ---- ------------ ----------------------- -- -- - ----------------- --------------- --- ---展开代码
这段代码创建了一个 Express 应用程序，监听端口为 3000，并使用 Socket.io 创建一个实时的 Web 应用程序。当有新用户加入时，会在服务器端输出 a user connected，当有用户离开时，会输出 user disconnected。
在命令行中运行 node index.js，打开浏览器访问 http://localhost:3000，打开开发者工具，在控制台中可以看到输出了 a user connected。
实现客户端和服务器端的双向通信
为了实现客户端和服务器端的双向通信，需要在客户端和服务器端分别编写代码。
在客户端使用 Socket.io 连接服务器：
const socket = io.connect("http://localhost:3000");
然后可以监听服务器端发送的消息：
socket.on("message", (data) => { console.log(data); });
在服务器端，可以使用 socket.emit 发送消息：
io.on("connection", (socket) => { socket.emit("message", "welcome to the chat room"); });
实现双向通信的完整代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ---------------------------------- ----- ------ - ---------------- -- -- - ---------------------- -- --------- --- ----- -- - ----------------------------- ------------------- -------- -- - -------------- ---- ------------ ---------------------- -------- -- --- ---- ------- -------------------- ------ -- - ------------------ -------------------------------- ------ --- ----------------------- -- -- - ----------------- --------------- --- ---展开代码
客户端代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------- ---- ------------------- ------- ------ ---- -------------------- ----- ------------------ ------ ----------- -------------------- ------------------- --------------------- ------- ------- --------------------------------------- -------- ----- ------ - ------------------------------------ ----- ----------- - ---------------------------------------- ----- ------------ - ----------------------------------------- ----- ----------- - ------------------------------------ -------------------------------------- ------- -- - ----------------------- ---------------------- -------------------- ------------------ - --- --- -------------------- ------ -- - ----- ---------- - ------------------------------ -------------------- - ----- ------------------------------------ --- --------- ------- -------展开代码
这段代码实现了一个简单的聊天室应用程序。当用户在浏览器中发送一条消息时，服务器会广播这条消息给所有连接到聊天室的客户端，客户端收到消息后将其显示出来。当用户关闭浏览器时，服务器会输出 user disconnected。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b96af1306f20b3a67c62c9
