在现代 web 应用中，实时数据交互已经成为了必不可少的一环。而 WebSocket 作为 HTML5 引入的标准，能够为实时数据交互提供强大的支持，因此得到了广泛的应用。在这篇文章中，我们将会讲解如何在 Express.js 中使用 WebSocket。
WebSocket 简介
WebSocket 是一种在单个 TCP 连接上进行全双工通信的应用层协议，允许客户端和服务器端进行实时数据交互。相比传统的 HTTP 请求-响应模式，WebSocket 更加高效和实时。WebSocket 的使用需要客户端和服务器端都支持，而且客户端和服务器端的接口要遵循一定的协议。
开始使用 WebSocket
在 Express.js 中使用 WebSocket 首先需要安装相应的包。常用的 WebSocket 包有 ws 和 socket.io，本文使用 ws 作为演示。
npm install ws --save
在安装好之后，我们需要在 Express.js 中引入 ws 包，创建并监听 WebSocket 服务器。在实践中，WebSocket 服务器的创建往往需要在 Express 服务器启动后进行。
-- -------------------- ---- -------
----- --------- - --------------
----- ------- - -------------------
----- --- - ----------
----- ------ - ---------------- -- -- - ---------------------- -- ---- ------ ---
----- --- - --- ------------------ ------ ---
-------------------- ---- -- -
---------------------- ---------- -------
---------------- --------- -- -
---------------------- -------------
---
-------------- -- -- -
---------------------- ---------- ---------
---
---上述代码中，我们使用了 Express.js 创建了一个服务器，并将它监听在 3000 端口。然后，我们使用 ws 包创建了一个 WebSocket 服务器，将它与 Express.js 服务器进行了绑定。当有 WebSocket 连接时，服务器将会输出“WebSocket connection open”的消息。当有消息传来时，服务器会将其输出。最后，当 WebSocket 连接关闭时，服务器将会输出“WebSocket connection closed”的消息。
前端实现 WebSocket 连接
在前端实现 WebSocket 连接很简单，我们只需要调用 WebSocket 的构造函数即可。然后，我们可以监听 WebSocket 对象的事件，如 open、message 和 close。
-- -------------------- ---- ------- ----- -- - --- --------------------------------- --------------------------- -- -- - ---------------------- ---------- ------- --- ------------------------------ ------- -- - ---------------------- ---------------- --- ---------------------------- -- -- - ---------------------- ---------- --------- ---
上述代码中，我们使用了 ws://localhost:3000 地址进行 WebSocket 连接。当连接建立时，前端将会输出“WebSocket connection open”的消息。当服务器发来消息时，前端将会将其输出。最后，当 WebSocket 连接关闭时，前端将会输出“WebSocket connection closed”的消息。
WebSocket 应用示例
下面是一个简单的 WebSocket 应用示例。该应用通过 WebSocket 实现了类似聊天室的功能。
服务器端代码：
-- -------------------- ---- -------
----- --------- - --------------
----- ------- - -------------------
----- --- - ----------
----- ------ - ---------------- -- -- - ---------------------- -- ---- ------ ---
----- --- - --- ------------------ ------ ---
-------------------- ---- -- -
---------------------- ---------- -------
---------------- --------- -- -
---------------------- -------------
---------------------------- -- -
---------------------
---
---
-------------- -- -- -
---------------------- ---------- ---------
---
---前端代码：
-- -------------------- ---- ------- ----- -- - --- --------------------------------- --------------------------- -- -- - ---------------------- ---------- ------- --- ------------------------------ ------- -- - ----- ------- - ----------------------- ----- - ------- ---- - - -------- ----- ------- - ----------------------------------- ----- ---------- - ------------------------------ ---------------------- - ----------- --------- -------------------------------- --- ---------------------------- -- -- - ---------------------- ---------- --------- --- ----- ---- - --------------------------------------- ------------------------------- ------- -- - ----------------------- ----- ------ - ---------------------------------------- ----- ---- - -------------------------------------- ----- ------- - - ------- ---- -- --------------------------------- ------------------------------------- - --- ---
在该示例中，当一个 WebSocket 连接建立时，服务器将打印出“WebSocket connection open”的消息。当有消息传来时，服务器将会将其广播给所有客户端。当一个 WebSocket 连接关闭时，服务器将打印出“WebSocket connection closed”的消息。同时，在前端中，我们监听了表单 submit 事件，将消息以 JSON 格式发送给服务器。当从服务器收到消息时，我们将其渲染到聊天窗口中。
总结
在 Express.js 中使用 WebSocket 非常简单，我们只需要在服务器端监听 WebSocket 的连接，然后在前端中建立 WebSocket 连接即可。WebSocket 可以为实时数据交互提供强大的支持，是现代 web 应用中必不可少的一环。希望本文能够帮助读者更好地理解 WebSocket 的使用方法，并在实际开发中得到应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f453c7f6b2d6eab3d62cc6