如果你正在寻找一种实现实时 Web 应用程序的方式，那么你可以考虑使用 Express.js 和 WebSocket 这两个技术。Express.js 是一个著名的 Node.js Web 框架，而 WebSocket 则是一种可以在 Web 浏览器和服务器之间建立双向通信的协议。
在本文中，我们将介绍如何使用 Express.js 和 WebSocket 来实现一个实时 Web 应用程序，其中包括如何建立 WebSocket 连接、如何处理 WebSocket 消息、以及如何将 WebSocket 和 Express.js 结合使用。我们还将提供完整的代码示例和详细的解释，帮助你理解这个过程，并成功实现一个实时 Web 应用程序。
什么是 WebSocket？
WebSocket 是一种在 Web 浏览器和服务器之间建立双向通信的协议。与传统的 HTTP 请求不同，WebSocket 可以允许服务器向客户端推送数据，同时客户端也可以向服务器发送消息。此外，WebSocket 还允许双方之间的数据传输是实时的，而不需要进行不必要的轮询。
WebSocket 的常用 API 有 WebSocket() 构造函数，它用于建立连接；send() 方法，用于向服务器发送消息；onopen、onclose、onerror 和 onmessage 四个事件，用于捕获与WebSocket 连接相关的事件。
下面是一个 WebSocket 的示例代码：
-- -------------------- ---- ------- -- -- --------- ----- ------ - --- --------------------------------- -- - --------- ----- ------------------------------- -------- ------- - ---------------------- -------- --- -- - --------- ------ ---------------------------------- -------- ------- - --------------------- ------------ --- -- - --------- ----- -------------------------------- -------- ------- - ---------------------- -------- --- -- - --------- ----- -------------------------------- -------- ------- - ------------------------ ------- ------- --- -- -------- ------------------ ---------
如何使用 Express.js 和 WebSocket ？
使用 Express.js 和 WebSocket 来实现一个实时 Web 应用程序，需要完成以下两个步骤：
- 建立 WebSocket 连接并处理消息
- 将 WebSocket 和 Express.js 结合使用
建立 WebSocket 连接并处理消息
在前面的示例代码中，我们展示了如何基本地建立 WebSocket 连接和处理消息。但在实际开发中，我们还需要在服务器端建立 WebSocket 连接，并处理客户端发送的消息。
首先，我们需要安装 ws 模块。
npm install ws
接下来，我们可以创建一个 WebSocket 服务器对象。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });然后，我们可以使用 on('connection',) 事件来监听新的连接，并使用 send() 方法来向客户端发送消息。
-- -------------------- ---- -------
-------------------- -------- ---- -
---------------------- --------
----------------
---------------- -------- ----- -
--------------------- -----
-- ----------
-------------------- - -----
---
---在上述代码中，我们监听了 message 事件，当接收到来自客户端的消息时，将消息内容原封不动的发送回客户端。
将 WebSocket 和 Express.js 结合使用
一般来说，Web 应用程序需要使用 Web 服务器和应用程序服务器。而我们使用 Express.js 来实现我们的应用程序服务器，同时使用 WebSocket 来实现实时双向通信。
为了让 WebSocket 和 Express.js 结合使用，我们需要在 Express.js 应用程序中创建一个 WebSocket 服务器对象，并将它与 Express.js 的 HTTP 服务器绑定在一起。这可以使用 ws 模块提供的 WebSocket.Server() 和 http.createServer() 两个方法来实现。
-- -------------------- ---- -------
-- ----
----- ------- - -------------------
----- --------- - --------------
----- ---- - ----------------
-- -- ---------- ----
----- --- - ----------
-- -- ---- ---
----- ------ - -----------------------
-- -- --------- ---
----- --- - --- ------------------ ------ ---
-- -- --------- ----
-------------------- -------- ---- -
---------------------- --------
----------------
---------------- -------- ----- -
--------------------- -----
-- ----------
-------------------- - -----
---
---
-- ----------------
------------------- -------- -- -
----------------------
---在连接到服务器时，客户端可以通过使用与服务器相同的 URL 和 端口来与 WebSocket 连接交互。
总结
在本文中，我们介绍了如何使用 Express.js 和 WebSocket 来实现实时 Web 应用程序。我们解释了 WebSocket 的概念，并展示了如何在服务器端建立 WebSocket 连接并处理消息。我们还提供了完整的代码示例，并讲解了如何将 WebSocket 和 Express.js 结合使用。希望本文可以对你有所帮助，让你能够成功实现一个实时 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6475aef2968c7c53b02b1a30