近年来，随着互联网技术的不断发展，即时通讯已经成为人们日常生活和工作中不可或缺的一部分。而 WebSocket 技术则成为开发者愈发重视的一个技术领域，这个场景中 Express.js 框架对于 WebSocket 技术的使用的需求也越来越频繁，本文将介绍如何在 Express.js 中集成 WebSocket 实现即时通信。
一、什么是 WebSocket？
首先我们需要简单介绍一下 WebSocket 技术，WebSocket 是一种适用于浏览器和服务器之间进行实时、双向通信的协议，它通过一次 HTTP 握手来建立连接，随后 TCP 连接将转换为全双工模式，通过一些专门的指定帧，实现双向的数据传输。
与传统的 Web 应用相比，WebSocket 可以提供更高效、更实时、更灵活的通信方式，这也是为什么在聊天、视频以及游戏等实时应用场景中，WebSocket 能得到广泛的应用。
二、WebSocket 实现的技术方案
在实现 WebSocket 技术方案时，需要选择一个最合适的技术组合，下面我们介绍一下主流的技术组合方案。
1、原生 WebSocket
使用原生的 WebSocket API 实现即时通信，虽然实现简单，但这种方案存在一定的局限性，需要自己手写代码进行心跳、控制通信的数据格式、解决同源策略等问题，对于开发者要求更高，且适用场景相对比较单一。
2、Socket.io
Socket.io 是一个跨平台的实时应用程序框架，它基于 WebSocket 实现了一套优化的通信方式，可以在 Node.js 和浏览器之间实现双向的、基于事件驱动的通信，它提供了完整的事件库和数据传输协议，通信效率高，实现简单且易用，是目前最流行的实时通信技术之一。
3、ws
ws 是一个基于 Node.js 的 WebSocket 库，它提供了一个简单、易用、高效的 WebSocket 服务器和客户端库，使用简单，配置方便，是 Node.js 开发者首选的 WebSocket 库之一。
基于以上三种方案，我们可以综合考虑出一个适用于 Express.js 的 WebSocket 实现方案。
三、Express.js 集成 WebSocket 实现
在 Express.js 中集成 WebSocket 实现的方案中，我们可以采用 ws 库来实现 WebSocket，以下是具体的实现步骤。
1、安装 ws
在项目中安装 ws 库，可以使用 npm 进行安装，命令如下：
npm install ws
2、WebSocket 服务端配置
在 Express.js 项目中，我们需要创建一个 WebSocket 服务端，以下是具体的代码实现：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
---------------------
---------------- -------- -------------- -
-----------------------------
---------------------------- ------------ -
-- ------- --- -- -- ----------------- --- --------------- -
------------------
-
---
---
-------------- -------- ------- -
---------------------
---
----------------------------
---在上述代码中，我们创建了一个 WebSocket 服务端，并监听了 connection 事件，当有客户端发起连接时就会触发该事件，通过 ws 发送消息实现了在服务端和客户端之间的消息传递。
3、在 Express.js 中引入 WebSocket
在 Express.js 项目中引入 WebSocket 需要在路由方面进行配置，以下是具体的代码实现：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------ - ----------------------------
----- --------- - --------------
----- --- - --- ------------------ ------ ---
-------------------------------- - ------------
-------------------- -------- -------------- -
---------------------
---------------- -------- -------------- -
-----------------------------
---------------------------- ------------ -
-- ------- --- -- -- ----------------- --- --------------- -
------------------
-
---
---
-------------- -------- ------- -
---------------------
---
----------------------------
---
------------ ------------- ---- -
---------------------- - ---------------
---
------------------- ---------- -
---------------------- ----------
---在上述代码中，我们引入了 WebSocket 模块，并将其加入到 Express.js 的路由中，实现了服务端和客户端之间的 WebSocket 通信。
四、示例代码
上述是通过 ws 实现的 WebSocket 代码示例，我们可以通过 npm run serve 启动客户端和服务器端代码进行测试，客户端代码如下：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
---------------- ----------
-------
------
------------- -------
----------------- ----------- --------------- ----------
----------------- ----------- --------------- ----------
------- -------------------------------
------- ------------------------------------
--- --
--------- ----------------- --------- ---------------------
--- --
-------
--------- ----------- ------------------ --
------- -----------------------------------
--------
--------
----- --------- - --------------------------------------
----- --------- - --------------------------------------
----- ------------ - -----------------------------------------
----- ----------- - ----------------------------------------
--- ----------
-------- --------- -
----- ---- - ----------------
----- ---- - ----------------
----- --- - ------------------------------------------------
--------- - --- ---------------
------------------- - --------------- -
----------------- -- ---------- - -----
--
---------------- - --------------- -
----------------- -- ---- --------- -------
--
----------------- - --------------- -
----------------- -- ---- --------- -------
--
-
-------- ------------- -
----- ------- - -------------------
-- ---------- -- -------------------- --- --------------- -
------------------------
-
-
-------- ------------ -
-- ----------- -
------------------
--------- - -----
-
-
---------
-------
-------五、总结
本文通过介绍 WebSocket 的基本知识和三种主流的技术方案，并选择了一种方案，在 Express.js 中引入 WebSocket，具体介绍了其实现步骤，以及相关 JavaScript 代码的示例，希望读者能够掌握 Express.js 集成 WebSocket 实现即时通信的技术要点，为读者在项目中运用相关技术奠定基础。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6594bbbeeb4cecbf2d9036ec