简介
随着互联网技术的发展，实时通信已经成为现代 Web 应用的必备特性。很多公司的在线游戏、聊天室等实时应用都离不开实时通信技术。
在前端开发中，使用 Express.js 和 Socket.io 进行实时通信是一种相对简单，并且十分流行的选择。
本文将介绍 Express.js 和 Socket.io 的基础知识，以及如何使用它们实现实时通信。同时，我们还将提供示例代码和指导，帮助读者深入学习和开发。
Express.js
Express.js 是一个基于 Node.js 平台的 Web 应用开发框架。它提供了很多有用的工具和功能，让开发人员可以轻松构建 Web 应用程序。
要使用 Express.js，首先需要在本地环境安装 Node.js。然后，通过 npm 安装 express 包。
npm install express
接下来，在项目中创建一个名为 app.js 的文件，并将以下代码复制到其中。
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- ------------ ----- ---- -- - --------------- --------- --- ---------------- -- -- - ---------------- --------- -- ---- -------- ---
这段代码创建了一个简单的 Express 应用程序，当访问根路径时，它将返回一个字符串“Hello World!”。同时，应用程序将在本地的端口3000上监听 HTTP 请求。
使用 node app.js 命令运行应用程序，并在浏览器中访问 localhost:3000，即可看到网页显示“Hello World!”。
Socket.io
Socket.io 是一个基于 WebSocket 库的实时通信引擎，它可以实现双向通信。通过 Socket.io，可以轻松地在服务器和客户端之间传输数据。
要使用 Socket.io，首先需要在项目中安装它。使用以下 npm 命令即可完成。
npm install socket.io
下面是一个使用 Socket.io 的简单示例。假设我们已经有了一个使用 Express.js 搭建的 Web 应用程序，现在要在其中添加 Socket.io 进行实时通信。
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------
----- ------ - -----------------------
----- -- - -----------------------------
------------------- -------- -- -
-------------- ---- -------------
----------------------- -- -- -
-------------- ---- ----------------
---
---
------------------- -- -- -
---------------- --------- -- ---- --------
---这段代码创建了一个新的 HTTP 服务器，然后使用 Socket.io 将它和表达式应用程序连接起来。在客户端建立连接时，程序将打印出 “A user connected!”；当客户端断开连接时，程序将打印出 “A user disconnected!”。
实现实时聊天室
为了演示 Socket.io 的实时通信能力，我们将创建一个简单的实时聊天室。用户可以在其中发送消息，并在其他用户的屏幕上立即看到。
首先，需要修改 app.js，添加聊天室页面的路由。
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});然后，需要在项目根目录下创建一个名为 index.html 的文件，并添加以下 HTML 代码。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------- ---- -----------
-------
------
--- -------------------
----- ------------
------ ------ ------------------ -----------------------
-------
------- ---------------------------------------
--------
----- ------ - -----
----- ---- - ----------------------------------
----- ----- - -----------------------------
----- -- - ------------------------------------
------------------------------- -------- --- -
-------------------
-- ------------- -
----------------- --------- -------------
----------- - ---
-
---
--------------- --------- -------- ----- -
----- -- - -----------------------------
-------------- - ----
-------------------
---
---------
-------
-------这段代码创建了一个包含一个输入框和一个发送按钮的表单，以及一个用于显示聊天消息的列表。同时，它还在客户端使用 Socket.io 进行连接，并添加了一些事件监听器。
接下来，需要修改 app.js，添加事件监听器来处理聊天消息。
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- -------------
--------------- --------- ----- -- -
------------- --------- -----
---
----------------------- -- -- -
-------------- ---- ----------------
---
---这段代码添加了一个事件监听器 chat message，并在接收到事件时使用 io.emit 方法将消息广播给所有客户端。
最后，使用 node app.js 命令启动服务器，并在浏览器中访问 localhost:3000。现在，用户可以通过输入框来发送聊天消息，而所有在线的用户都能够在他们的屏幕上看到这些消息。
结论
使用 Express.js 和 Socket.io 实现实时通信是一项相对简单的任务。本文介绍了 Express.js 和 Socket.io 的基础知识，并提供了一个简单的示例代码，帮助读者深入学习和开发。
当然，在大多数情况下，需要更复杂和强大的实时通信机制来满足特定的需求。但是，通过在 Express.js 和 Socket.io 的基础上学习和实践，我们可以更好地理解和掌握实时通信技术的本质和原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676f9f61e9a7045d0d74e900