介绍
在现代 Web 应用中，单页面应用程序已经成为了常见的开发方式。它们依赖于客户端的 JavaScript 和 Ajax 能力来适当地更新页面的状态。但是，在这种开发方式中，为了完成实时通信的需求，我们就需要 WebSocket 技术。
WebSocket 是一种在单个 TCP 连接上提供全双工通信能力的协议。它允许应用程序通过新的 HTML5 API 来实时地传输数据，并能够提供快速、轻松的、双向的、实时的通信能力。
使用 WebSocket 在单页应用程序中实现实时通信可以提供更好的用户体验和更少的网络延迟。在这篇文章中，我们将介绍如何使用 WebSocket 协议在 SPA 应用程序中实现实时通信，并探讨了一些最佳实践。
WebSocket 的基础知识
WebSocket 是一种不同于 HTTP 的通信协议，因此我们需要使用不同的工具和技术来处理 WebSocket 数据。下面是 WebSocket 基本知识。
WebSocket 协议的工作原理
WebSocket 协议的工作原理非常简单，它建立在 HTTP 协议之上。当客户端发出 WebSocket 请求时，服务器会返回一个类似于 HTTP 响应的握手响应。如果握手成功，那么客户端和服务器就可以在单个 TCP 连接上建立通信。
WebSocket 数据格式
WebSocket 数据的格式与 HTTP 请求和响应的格式略有不同。客户端和服务器都可以发送和接收数据包。数据包可以是文本或二进制格式。
WebSocket API
在客户端，我们可以使用 HTML5 中提供的 WebSocket API 来与 WebSocket 服务器进行通信。在服务器端，我们可以使用不同的编程语言和框架来实现 WebSocket 的响应处理。
实现 WebSocket
在实现 WebSocket 的过程中，我们需要考虑以下内容：
- 客户端和服务器如何建立 WebSocket 连接
- 客户端和服务器如何发送和接收 WebSocket 数据
接下来，让我们看看一些最佳实践。
建立 WebSocket 连接
建立 WebSocket 连接需要遵循下面的步骤：
- 创建 WebSocket 对象- 在客户端，我们需要使用
WebSocket对象创建 WebSocket 连接。
----- -- - --- ---------------------------------
这里我们向 WebSocket 构造函数中传递了 ws://localhost:8080，代表使用 WebSocket 连接到 localhost:8080。
- 在服务器上实现 WebSocket HTTP 握手。
当客户端连接到服务器时，服务器需要进行一次 HTTP 握手以确认连接。客户端会发送一个 HTTP 请求头，服务器返回一个类似于 HTTP 响应的握手响应。如果握手成功，客户端和服务器就可以在单个 TCP 连接上建立通信。
在服务器端，可以使用各种编程语言和框架来实现 WebSocket 的握手。例如，Node.js 中的 ws 库提供了 WebSocket 握手的实现。
----- --------- - --------------
----- ------ - --- ------------------ ----- ---- ---
----------------------- -------- -------------- -
---------------- -------- ----------------- -
---------------------- ---- ---------
---
---------------------
---以上代码建立了一个 WS 服务器，并在 WebSocket 握手成功之后创建了一个新的连接。
发送和接收 WebSocket 数据
在浏览器中，可以使用 WebSocket 对象向服务器发送和接收数据。使用以下方法发送和接收 WebSocket 数据：
- 发送 WebSocket 数据
使用 send() 方法发送 WebSocket 数据，该方法可以接受字符串或二进制值参数。例如：
--------------- ----------
上述代码将字符串数据发送到 WebSocker 服务器。
- 接收 WebSocket 数据
使用事件监听器来接收来自服务器的 WebSocket 数据。例如：
------------------------------ -------- ------- -
-------------------- ---- ------- - - ------------
---上述代码将在接收到消息时执行一个函数。
最后，让我们用一个非常简单的示例来说明如何使用 WebSocket 在 SPA 应用程序中实现实时通信。
示例代码
我们将使用 Node.js 和 WebSocket 来编写我们的示例 Web 应用程序。在这个应用程序中，我们将使用 WebSocket 实时地更新 Web 页面的状态。
服务器端代码
首先，我们需要为应用程序设置 WebSocket 服务器。在本例中，我们使用 Node.js 和 ws 库来实现 WebSocket。
----- --------- - --------------
----- - --- ------ - - ----------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
------- - ---------
----------------- --------- ---- --- - - ---------
---------------- -------- -------------- -
---------------- ------- ---- ---- ---- --- - - ------- - -- - - ------
---------------------- ----
---
-------------- -------- ------- -
----------------- ------------ ---- --- - - ---------
---
---
-------- ------------------------- ------- -
---------------------------- ------------ -
-- ------- --- ------ -- ----------------- --- --------------- -
---------------------
-
---
-在上面的代码中，当 WebSocket 客户端连接到服务器时，connection 事件被触发。在回调函数中，我们为每个客户端生成一个 UUID，用于识别它们，并在后面处理每个消息时使用该 UUID。由于在本示例中，我们希望广播接收到的消息，因此我们需要一个方法来将消息发送到所有连接的客户端。
客户端代码
接下来，我们将编写一个简单的 Web 应用程序，该程序使用 HTML、CSS 和 JavaScript 并通过 WebSocket 与上述服务器进行通信。
--------- -----
----- ----------
------
----- ----------------
---------- ------ ---------------
-------
------
------------- ------------
------ ----------- ------------- ------------------ ---- ------- ---------
------- -------------------------------------
--- -------------------
--------
----- -- - --- ---------------------------------
--------------------------- -------- ------- -
---------------------- ---------- ---------------
---
------------------------------ -------- ------- -
-----------------------
---
-------- ------------------- -
----- ------------ - ------------------------------------
----- -------- - -----------------------------
-------------------- - --------
-----------------------------------
-
-------- ------------- -
----- ----- - ------------------------------------
----- --- - ------------
-- ----------- --- --- -
-------------
----------- - ---
-
-
---------
-------
-------在客户端代码中，我们通过创建一个 WebSocket 连接，并侦听包括 open 和 message 事件在内的 WebSocket 事件来建立 WebSocket 连接。在 sendMessage() 函数中，我们可以将文本消息发送到服务器，并在接收到消息时调用 addMessage() 函数以便将消息添加到聊天消息列表中。
结论
在本文中，我们介绍了如何在 SPA 应用程序中使用 WebSocket 实现实时通信，并描述了一些最佳实践。我们提供了一个示例应用程序，以帮助您了解如何在WebSocket 和 SPA 应用程序中实现实时通信。实时通信可以提高 Web 应用程序的响应速度和用户体验，但必须小心处理以确保应用程序的安全性和可扩展性。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6710d5e3ad1e889fe2fc4d18