在现代 Web 开发中，实时通信已经成为了一种越来越重要的需求。WebSocket 是一项基于 TCP 协议的、全双工通信的技术，它可以在客户端和服务器端之间实现高效实时的通信。而 Express.js 则是一款流行的 Node.js Web 开发框架，它提供了一系列功能强大的中间件，可以用来快速构建 Web 应用。在本文中，我们将会介绍如何在 Express.js 中使用 WebSocket，来实现一个简单的实时聊天应用。
WebSocket 简介
WebSocket 是一个 HTML5 的特性，主要用于在浏览器和服务器之间建立一个双向连接，使得数据可以在实时性要求较高的情况下，快速地、并且可靠地在客户端和服务器之间传递。WebSocket 协议是一种基于帧的协议，每一帧都包含了帧类型、负载数据以及相关的控制信息。通过 WebSocket，客户端和服务器可以使用事件驱动的方式进行通信，从而实现实时的业务需求。
Express.js 入门
首先，我们需要安装并了解一下 Express.js。可以使用 npm 命令来安装 Express.js：
- --- ------- ------- ------
之后，我们需要在 Node.js 应用中引入 Express.js：
----- ------- - ------------------ ----- --- - ---------
接下来，我们可以通过 Express.js 提供的一些常见 API 来处理请求。
------------ ------------- ---- - ---------------- -------- --
这里我们定义了一个路由处理程序，用于返回“Hello, world!”信息。这个路由可以通过访问 http://localhost:3000 来进行访问。
使用 WebSocket
接下来，我们需要安装 WebSocket 的依赖包。可以使用 npm 命令来安装它们：
- --- ------- -- ------
然后，我们需要在 Express.js 应用中引入 WebSocket：
----- --------- - -------------
我们可以在路由处理程序中，通过 Express.js 的中间件机制，创建一个 WebSocket 服务器：
--------------------- ---- -
----- -- - --- --------------------------------
---------------- ----------------- -
--------------------- ---------- --------
--
--------------- ---------
--上面的代码中，我们创建了一个在 http://localhost:3000 上监听的 WebSocket 服务器实例 ws。在服务器收到客户端发送的消息时，会触发 message 事件，并输出收到的消息。在服务器端发送消息时，我们可以通过 ws.send 方法来向客户端发送消息。
接下来，我们需要在客户端中建立一个 WebSocket 连接，以实现实时通信的功能。在客户端代码中，我们可以使用浏览器原生提供的 WebSocket API：
----- -- - --- -------------------------------- ------------ - --------------- - --------------------- ---------- ----------- - --------------- ---------
在客户端建立 WebSocket 连接之后，我们可以通过 ws.onmessage 方法，来处理来自服务器的消息。在客户端发送消息时，我们需要调用 ws.send 方法，来向服务器发送消息。
示例代码
下面是一个完整的使用 Express.js 和 WebSocket 构建实时通信应用的示例代码：
----- ------- - ------------------
----- --------- - -------------
----- --- - ---------
----- ------ - ---------------- ---------- -
------------------- ------- -- ---- -------
--
----- -- - --- ------------------ ------ --
------------------- ------------ -
---------------- ------ ------------
---------------- ----------------- -
--------------------- ---------- --------
-------------- - - --------
--
-------------- ---------- -
------------------- ---------------
--
--
------------ ------------- ---- -
---------------------- - --------------
----------- -----
------
------
----- ----------------
---------------- ------------
-------
------
------ ----------- ------------ ----------------- - ------------
------- -----------------------
--- -------------------
--------
----- ------ - --- --------------------------------
------------- - --------------- -
---------------------- -- ---------
-
---------------- - --------------- -
----- -------- - -----------------------------------
----- -- - ----------------------------
------------ - ----------
------------------------
-
--------------------------------------------------------- --------------- -
----- ------- - ----------------------------------------
--------------------
--
---------
-------
-------上面的代码实现了一个简单的聊天应用，可以在浏览器中运行。我们可以通过访问 http://localhost:3000 来进入聊天室。在聊天室中，输入文字并点击“发送”按钮，即可将消息发送给服务器，并实时地显示在聊天室中。
总结
本文介绍了如何在 Express.js 应用中使用 WebSocket，来实现实时通信的功能。WebSocket 是一项非常实用的技术，它可以帮助开发者快速地实现实时通信的功能。通过本文的介绍，相信读者已经了解了 WebSocket 的基本用法，以及在 Express.js 中使用 WebSocket 的方法。在实际开发中，我们可以根据业务需求，来选择合适的技术来实现实时通信的功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652b980a7d4982a6ebd64de4