随着网页应用对实时通信需求的不断增加，WebSocket 成为了前端开发人员必备的技能之一。而在 Express.js 中，使用 WebSocket 进行实时通信也变得越来越普遍了，本文将介绍如何在 Express.js 中使用 WebSocket 进行实时通信，并通过示例代码进行演示。
什么是 WebSocket？
WebSocket 是一种网络通信协议，它基于 HTTP 协议，但不同于 HTTP 协议只能由客户端向服务器发起请求，WebSocket 是一种双向通信协议，客户端和服务器可以同时向对方发送和接收消息，从而实现了实时通信。
如何在 Express.js 中使用 WebSocket？
在 Express.js 中，我们可以使用 socket.io 模块来实现 WebSocket。socket.io 是一个事件驱动的实时通信框架，它支持在不同浏览器和设备上的双向通信。下面是在 Express.js 中使用 socket.io 的步骤：
步骤一：安装 socket.io
首先，我们需要安装 socket.io：
$ npm install socket.io
步骤二：在服务器端引入 socket.io
然后在服务器端引入 socket.io：
const app = require('express')();
const http = require('http').createServer(app);
const io = require('socket.io')(http);步骤三：监听客户端连接事件
接下来，我们需要监听客户端连接事件，并保存每个客户端的连接：
-- -------------------- ---- -------
------------------- -------- -- -
-------------- ---- ------------
-- -----------------------------
----- ---- - ------- - ------------------------ - ------
------------------
-- --------
------------------- - ----- ---- ---
-- ----------
-------------------- ------ -- -
--------------------- - - ------
-- -----------------
----------------------------------------- ------
---
-- -----------
----------------------- -- -- -
----------------- ---------------
---
---以上代码中，我们首先在服务器端监听客户端连接事件，在连接成功后，生成一个唯一的房间号码，并将客户端加入这个房间。接着，向客户端发送一个 join 事件，参数为当前房间号。然后，我们监听客户端发送的 message 事件，将客户端发送的消息广播给其他客户端。最后，我们监听客户端断开连接事件。
步骤四：在客户端引入 socket.io
在客户端引入 socket.io，并连接服务器：
-- -------------------- ---- -------
----- ------ - -----
-------------------- -- -- -
-------------------------
-- -------- ---- --
----------------- ------ -- -
----------------- ----- - - -----------
---
-- -------- ------- --
-------------------- ------ -- -
-------------------- -------- - - ------
---
---以上代码中，我们首先引入 socket.io，并连接服务器。接着，我们监听服务器发送的 join 事件，参数为当前房间号，并将其输出到控制台。然后，我们监听服务器发送的 message 事件，并将收到的消息输出到控制台。
示例代码
下面是一个完整的示例代码，它可以让两个客户端之间进行实时通信：
-- -------------------- ---- -------
-- ---------
----- --- - ---------------------
----- ---- - ----------------------------------
----- -- - ---------------------------
------------ ----- ---- -- -
---------------------- - ---------------
---
------------------- -------- -- -
-------------- ---- ------------
-- -----------------------------
----- ---- - ------- - ------------------------ - ------
------------------
-- --------
------------------- - ----- ---- ---
-- ----------
-------------------- ------ -- -
--------------------- - - ------
-- -----------------
----------------------------------------- ------
---
-- -----------
----------------------- -- -- -
----------------- ---------------
---
---
----------------- -- -- -
---------------------- -- ---------
----- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
---------------- ---- ---------------
-------
------
--- -------------------
----- ----------
------ ---------- ------------------ -----------------------
-------
------- ---------------------------------------
--------
----- ------ - -----
--------------------------------------------------------- ------- -- -
----- ----- - ---------------------------------
-----------------------
-- --------
---------------------- -------------
-- -----
----------- - ---
---
-------------------- -- -- -
-------------------------
-- -------- ---- --
----------------- ------ -- -
----------------- ----- - - -----------
---
-- -------- ------- --
-------------------- ------ -- -
----- -------- - ------------------------------------
----- -- - -----------------------------
-------------- - -----
-------------------------
---
---
---------
-------
-------以上代码中，服务器使用 Express，客户端使用原生 HTML 和 JavaScript。它们使用了步骤一至步骤四中介绍的方法，让两个客户端可以进行实时通信，并在网页中显示聊天记录。
总结
本文介绍了在 Express.js 中使用 WebSocket 进行实时通信的方法，并通过示例代码进行演示。使用 WebSocket 不仅可以提高网页应用的实时性，还可以降低服务器的负载，提高网站的性能。与传统的轮询方式相比，WebSocket 无疑是更为高效和实用的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483edd648841e9894324250