WebSocket 是一种网络通信协议，使得客户端和服务器可以建立双向连接，从而实现实时通信。在 SPA 应用中，WebSocket 的应用非常广泛，可以用来实现即时聊天、数据推送、在线游戏等。本文将介绍如何在 SPA 应用中使用 WebSocket 实现实时通信。
WebSocket 的优势
在传统的 Web 应用中，HTTP 协议是浏览器和服务器之间的标准协议，请求和响应的模式限制了浏览器和服务器之间的通信速度。而 WebSocket 协议则允许服务器主动向客户端推送消息，从而实现高效实时通信。
相对于其他实时通信技术（如 Comet 和 Ajax 轮询），WebSocket 有以下优势：
- 双向通信：相比传统的单向通信，WebSocket 实现了真正的双向通信，即客户端和服务器可以相互发送消息，互相通信。
- 实时性：WebSocket 可以在一开始建立连接后一直保持连接状态，从而实时、持续地传输数据。
- 更少的数据传输：WebSocket 采用二进制传输数据，相比 Ajax 和 Comet 的文本传输，数据传输量更小，速度更快。
实现 WebSocket
具体实现 WebSocket，首先需要在服务器端和客户端分别实现 WebSocket 对象。以下是一个简单的示例：
-- -------------------- ---- -------
-- ----
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -- -- -
-------------------------
---------------- ------- -- -
---------------------- -------------
------------ ---- -------------
---
---
-- ---
----- ------ - --- ---------------------------------
------------------------------- ----- -- -
-------------------------
---------------------
---
---------------------------------- ----- -- -
---------------------- ----------------
--- 上面的代码分别实现了服务器端的 WebSocket 服务和客户端的 WebSocket 对象。其中，服务器端使用了 ws 模块创建了一个 WebSocket 服务器，监听在 8080 端口。当客户端连接时，服务器会输出 connected 字符串，当接收到消息时，会输出 received: xxx 字符串，并将消息原封不动地发送回客户端。客户端连接到服务器时，同样输出 connected 字符串；当客户端向服务器发送 hello 字符串时，服务器会返回 you said hello 字符串，并在客户端输出。
SPA 中使用 WebSocket
在 SPA 应用中，通常需要在某个组件中创建 WebSocket 对象，发送请求并监听响应，从而实现实时通信。以下是一个示例：
-- -------------------- ---- -------
-- ------------
----- ----------- -
------------- -
----------- - -----
-
--------- -
------ --- ----------------- ------- -- -
-- ------------- -
----------
- ---- -
----------- - --- ---------------------------------
------------------------------------ ----- -- -
-------------------------
----------
---
--------------------------------------- ----- -- -
---------------------- ----------------
---
------------------------------------- ----- -- -
---------------------
---------
---
-
---
-
------------ -
-- ------------- -
--------------------
----------- - -----
-
-
------------- -
-- ------------- -
--------------------------
- ---- -
---------------------------
-
-
-
------ ------- ------------ 上面的代码封装了一个 MyWebSocket 类，其中包括了 connect 方法、disconnect 方法和 send 方法。connect 方法用于连接 WebSocket 服务器，返回 Promise 对象。如果 WebSocket 已经连接，则直接 resolve；否则创建 WebSocket 对象，监听 open 和 message 事件，并在 Promise 中 resolve。disconnect 方法用于关闭 WebSocket 连接。send 方法用于发送消息，如果 WebSocket 连接未建立，则输出错误信息。
在组件中使用 MyWebSocket 类如下所示：
-- -------------------- ---- -------
-- -------
----------
-----
------- --------------------------------
----- ------- ------
------
-----------
--------
------ ----------- ---- --------------
------ ------- -
----- ------
------ -
------ -
-------- ---
--
--
--------- -
----------- - --- --------------
----------------------------- -- -
-------------------------
---
--
-------- -
------------- -
--------------------------
--
--
--
--------- 上面的代码创建了一个 App 组件，其中包括一个按钮和一个文本框，点击按钮会调用 sendMessage 方法。在 mounted 钩子函数中创建 MyWebSocket 对象，并连接到服务器。在 sendMessage 方法中调用 send 方法，发送消息 'hello'。服务器将返回发送的消息，并在客户端输出。
总结
通过本文的学习，我们了解了 WebSocket 的优势以及如何在 SPA 应用中使用 WebSocket 实现实时通信。以下是本文的总结：
- WebSocket 是一种实时通信协议，具有双向通信、实时性和更少的数据传输等优势。
- 实现 WebSocket 需要在服务器端和客户端分别创建 WebSocket 对象。
- 在 SPA 应用中，可以封装 WebSocket 对象，并在组件中使用，实现实时通信。
通过学习 WebSocket，我们不仅可以实现实时通信功能，还可以了解其背后的技术原理，并深入理解前端技术的本质。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7ef4df6b2d6eab335ca19