本文介绍使用 Express.js 和 WebSocket 实现实时通讯的方法。WebSocket 是一种跨浏览器、跨平台的实时通讯协议,在前端开发中应用广泛。而 Express.js 是 Node.js 平台上的一个开放源代码、快速而简洁的 Web 应用程序框架,用于开发具有丰富功能的 Web 应用程序。
WebSocket 基础
WebSocket 协议是基于 HTTP 的,与 HTTP 头部交换数据来建立连接,建立后保持长连接,双方可以随时传输数据。其核心概念如下:
握手(Handshake)
Websocket 连接的建立是需要进行握手,例如以下 Websocket 握手的一个请求头:
GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com
服务器可以其中的头信息,来验证请求是否合法,同意建立连接。
帧(Frame)
WebSocket 通过帧来传输数据, 每个帧包含数据有效负载,后面可能跟着一些元数据。在发送数据时,将其划分为数据块,并使用帧来封装每个数据块。在接收数据时,解码缓存内对帧的数据块进行重新组装,并将该数据块移交给应用层。
数据(Data)
最初的数据传输由 UTF-8 编码的文本组成,但在其演化中还支持了各种形式的数据。不同的数据类型设置帧的元数据以确定如何(和应计算哪种类型的校验和)处理有效负载,随后典型的帧类型用于 ping-pong心跳检查同步。
WebSocket 在 Express.js 中的实现
Express 应用程序可以使用ws
或socket.io
等 WebSocket 库来实现 WebSocket 通讯。本文将使用ws
库实现一个简单的 WebSocket 应用。
安装依赖
在命令行终端中,使用以下命令安装 ws
库:
npm install ws
代码实现
以下是使用 ws
库实现的简单的 WebSocket 应用程序:
-- -------------------- ---- ------- -- ---- ----- ------- - ------------------- ----- ---- - ---------------- ----- --------- - -------------- -- ------- ----- --- - ---------- ----- ------ - ----------------------- ----- --- - --- ------------------ ------ --- -- --------- ------ -------------------- ---- -- - ------------------- ------------ ---------------- --------- -- - --------------------- ------- -- ------------- -- -------- --------------- --------- ------------ ------- -- - -- ------- - ---------------------- ------ ----------- - --- --- -------------- -- -- - ------------------- --------------- --- --- -- ----- ------------------- -- -- - ------------------- ------- -- ---- ------- ---
上面的代码使用 ws
库创建 WebSocket 服务器。当客户端连接到服务器时,服务器会广播消息。接收到来自客户端的消息时,服务器会对其进行回应。
测试应用
可以使用浏览器的控制台来测试 WebSocket 应用程序。打开浏览器,输入以下地址:
http://localhost:3000/
在控制台中键入以下 JavaScript 代码:
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------------------------- ------- -- - ---------------------- ------------ ------------------- ------------- --- ---------------------------------- ------- -- - --------------------- -------- ---------------- --- -------------------------------- ------- -- - ---------------------- --------------- ---
以上代码通过 WebSocket 连接到服务器。连接成功后,它将在控制台中输出“WebSocket connected”。它还将发送“Hello, WebSocket!”消息到服务器。服务器会回复一条消息,然后您将在控制台中看到“Received message: Server response: Hello, WebSocket!”的消息。
结论
本文介绍了如何在 Express.js 中使用 WebSocket 实现实时通讯。了解了 WebSocket 基础和代码实现后,我们可以应用 WebSocket 技术实现更复杂的实时应用程序。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6728c3002e7021665e219be5