介绍
随着互联网的普及，即时通讯功能已经成为许多 Web 应用程序中必不可少的部分。Express.js 和 Socket.io 是两个非常流行的 Web 开发框架，其组合以实现实时通信功能。在本篇文章中，我们将深入探讨如何使用 Express.js 和 Socket.io 实现即时通讯的技术，并提供相应的示例代码和指导。
如何使用 Socket.io 实现即时通讯
什么是 Socket.io？
Socket.io 是一个基于 Node.js 平台的实时应用程序框架，它使得在 Web 应用程序中实现实时通信变得非常简单。Socket.io 可以在浏览器端和服务端之间建立实时、双向的通信通道。
安装 Socket.io
首先，我们需要安装 Socket.io。你可以使用 Node.js 包管理工具 npm 来安装 Socket.io：
npm install socket.io
创建 Socket.io 服务器
在 Node.js 中，我们可以使用 http 模块来创建 HTTP 服务器。Socket.io 是一个 Node.js 模块，所以我们可以将其与 http 模块集成，从而创建一个 Socket.io 服务器。
-- -------------------- ---- ------- ----- ---- - ---------------- ----- -- - --------------------- ----- ------ - ----------------------- ---- -- - ------------------- -------------- -------- --- ----- ------------ - -----------
通过以上示例代码，我们创建了一个 HTTP 服务器，并使用 Socket.io 与服务器进行集成。现在我们已经可以使用 Socket.io 服务器进行实时通信了。
创建 Socket.io 客户端
客户端可以是任何一个系统。我们首先需要在客户端引入 Socket.io 客户端库、然后创建 Socket.io 实例。
<script src="/socket.io/socket.io.js"></script> <script> const socket = io(); </script>
还可以通过设置端口号来指定服务器地址：
const socket = io('http://localhost:3000');监听客户端事件
在 Socket.io 中，客户端和服务器之间的通信都是基于事件进行的。我们可以通过监听（或发送）事件来进行通信。
下面是一个示例，在客户端监听一个名为 chat message 的事件：
socket.on('chat message', (msg) => {
console.log(`Message received: ${msg}`);
});在服务器中触发 / 发送一个名为 chat message 的事件：
socket.emit('chat message', 'Hello World!');Socket.io 示例：即时聊天室
接下来让我们通过一个示例来使用 Express.js 和 Socket.io 实现即时聊天室。先安装依赖：
npm install express socket.io
聊天室应用需要一个可以输入昵称和发送消息的表单。我们可以使用 EJS 模板引擎来创建此表单：
-- -------------------- ---- -------
---- -------- ---
--------- -----
------
------
----------- ------------
-------
------
-------- ---------
--- -------------------
----- ----------
------ ------------- ------------------ -----------------------
------ ------ ------------------ ----------------------
---------------------
-------
------- ---------------------------------------
--------
----- ------ - -----
----- ------------- - ------------------------------------
----- ------------ - -----------------------------
----- ------------ - ------------------------------------
----- ---- - -------------------------------
------------------------------- ------- -- -
-----------------------
----- -------- - --------------------
----- ------- - -------------------
----------------- --------- ---------- ----------
------------------ - ---
---
--------------- --------- ------ -- -
----- ----------- - -----------------------------
----------------------- - ------------------ -----------------
--------------------------------------
---
---------
-------
-------在上面的代码中，我们使用 Socket.io 的 emit 方法发送一个名为 chat message 的事件，同时传递包含昵称和消息的对象。在服务器端，我们监听 chat message 事件，并将接收到的消息广播到所有客户端。
-- -------------------- ---- -------
-- --------
----- ------- - -------------------
----- --- - ----------
----- ---- - ----------------------------
----- -- - ---------------------------
------------- -------- -------
------------ ----- ---- -- -
-------------------
---
------------------- -------- -- -
-------------- ---- ------------
----------------------- -- -- -
-------------- ---- ---------------
---
--------------- --------- ------ -- -
------------- --------- ------
---
---
----------------- -- -- -
------------------- ------- -- -----------------
---在这个示例中，我们使用 Express.js 来处理 HTTP 请求，并使用 Socket.io 来处理实时通信。当客户端访问根路径时，我们在服务器端返回 chat.ejs 模板。在服务器端，我们使用 io.on('connection') 来监听连接事件，并使用 socket.on('chat message') 来监听 chat message 事件。当接收到 chat message 事件时，我们使用 io.emit 方法广播接收到的消息到所有的客户端。
我们可以执行以下命令来启动聊天室应用：
node index.js
现在，通过浏览器访问 http://localhost:3000 ，在相应的登陆界面输入您的昵称和消息， 即可和别人实时聊天。
结论
在本篇文章中，我们使用 Express.js 和 Socket.io 两个框架来实现了即时通讯功能。借助于 Socket.io 提供的事件监听和广播功能，我们可以非常方便地创建出一个实时聊天室应用。
同时，在实现这个应用的过程中，我们也理解到了 Socket.io 框架、Web Socket 协议以及客户端 和 服务器之间数据如何流动等多重细节问题。我们认为这将有助我们深入理解 Web 开发框架、实时通信协议和网络架构的工作原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670e22045f551281025fc771