引言
随着科技的不断发展，人们越来越注重实时通讯的重要性。而且，现代 Web 应用程序需要在用户与应用程序之间进行实时数据交换。在过去，这种交互是通过使用轮询和长轮询实现的。这些方法的主要问题是它们对服务器和网络带宽造成了很大的压力。现在，基于 WebSocket 技术的即时通讯已经成为了一个更普遍的解决办法。
在本文中，我们将介绍如何使用 Node.js 和 Express.js 实现基于 WebSocket 的即时通讯。我们将涉及的主要主题包括：
- WebSocket 协议的介绍
- 基于 Express.js 和 ws 库的 WebSocket 服务器
- 实现一个简单的聊天程序示例
什么是 WebSocket 协议
WebSocket 是基于 HTTP 协议设计而成的一种实时的、双向的通讯协议。它是在客户端和服务器之间建立一条持久连接，使得双方可以随时发送数据，而不必担心网络带宽的限制。而且，WebSocket 协议使得服务器可以向客户端推送数据，这种机制在实时通讯和实时监测方面非常有用。
在 WebSocket 协议中的通讯过程类似于下图：
WebSocket 连接建立后，服务器和客户端都可以发送信息。当一个端点发送消息时，它会将它封装在帧中并将其发送出去。接收者将解析这个帧并采取适当的行动。服务器和客户端之间的数据传输可以以文本或二进制形式进行。
基于 Express.js 和 ws 库的 WebSocket 服务器
Node.js 为开发者提供了一种快速、可靠地搭建 WebSocket 服务器的方式。在本文中，我们将使用 ws 库来实现 WebSocket 服务器，而该库依赖于 Node.js 和 Express.js。
安装所需的库
要使用 ws 库，您需要在项目中安装它，可以使用 npm 包管理器快速实现：
npm install express ws
创建基于 Express.js 的 WebSocket 服务器
下面是如何创建一个简单的基于 Express.js 的 WebSocket 服务器：
-- -------------------- ---- -------
----- ------- - -------------------
----- --- - ----------
----- ------ - ----------------------------
----- --------- - --------------
----- --- - --- ------------------ ------ ---
-------------------- ---- -- -
-------------- --- ------ -------------
---------------- --------- -- -
--------------------- ------- -- -------------
---
--------------- ------- ---- -----------
---
------------------- -- -- -
---------------------- ------ ------- -- ---- --------
---在上述代码中，我们使用 Express.js 创建了一个 HTTP 服务器，然后创建了一个基于 WebSocket 的服务器实例，并将其附加到我们的 HTTP 服务器上。最后，我们在服务器上监听端口 3000，并对新的 WebSocket 连接和消息进行处理。
实现一个简单的聊天程序示例
让我们来创建一个简单的聊天室。每个客户端都可以向服务器发送消息，并将该消息广播到所有已连接客户端。
服务端代码
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ----------------
----- --------- - --------------
----- --- - ----------
----- ------ - ----------------------
----- --- - --- ------------------ ------ ---
----- ------- - ---
-------------------- ---- -- -
-------------- --- ------ ------------
-----------------
---------------- --------- -- -
--------------------- ------- -- -------------
-------
-------------- -- ------ --- ---
--------------- -- -
--------------- ------ ----- -------------
---
---
-------------- ------ ------------ -- -
------------------- ------------- -----------------
----- ----- - --------------------
--------------------- ---
---
---
------------------------------ -- ----- -- -- -
--------------- ------ ------- -- ------------------------
---在上述代码中，我们首先定义了一个空的客户端数组，每次连接时将客户端添加到该数组中。接着，我们监听 'message' 事件，在收到消息后向其他客户端广播该消息。最后，当客户端断开连接时，我们从客户端数组中删除该客户端。
客户端代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
---------------- ------------
-------
------
------
------ ------------ ----------- ----------------- ---- ------- -------- --
------ ------------- ------------ --
-------
--- ---------------
-------
--------
----- ------ - --- ----------------------------------
------------- - ------- -- -
---------------------- --------- -- ----------
--
---------------- - -- ---- -- -- -
----- -- - -----------------------------
------------ - -----
------------------------------------------------
--
--------------------------------------------------------- ------- -- -
-----------------------
----- ------- - -----------------------------------------
---------------------------------------- - ---
---------------------
---
---------
-------上述代码很简单，用于呈现用户界面并监听表单提交事件。当表单被提交时，它将发送消息到 WebSocket 服务器。并且，它还放置消息到待接受消息列表的后面（大家可以看到一个连接页面，并进行输入、发送消息等操作）。
总结
在本篇文章中，我们介绍了 WebSocket 协议及其实时通讯优点，并且使用 Node.js 和 Express.js 实现基于 WebSocket 的即时通讯，并举了一个聊天程序的例子来展示 WebSocket 的使用。WebSocket 不仅适用于聊天和在线游戏应用程序，还适用于与客户端进行实时通信的大多数现代应用程序。希望这篇文章能有所帮助，使前端工程师可以更好地理解和使用 WebSocket。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64794bf4968c7c53b0552a20