简介
Single Page Application（SPA）是一种创建 UI 的方式，它使用动态 HTML 更新来实现视图的刷新，而不是传统的页面刷新。这样可以提高 Web 应用程序的性能和用户体验。在 SPA 开发中，实时通信是非常常见和重要的一部分，特别是在需要处理实时数据的场景。
Websocket 是一种实时通信的协议，它能够提供双向数据传输和持久连接，其中包括客户端和服务器之间的一些通信交互。 Websocket 可以使得应用程序在不刷新页面的情况下实现实时通信，从而让我们更加容易地实现这个功能。
在本篇文章中，我们将讨论如何在 SPA 开发中使用 Websocket 实现实时通信，介绍如何建立和关闭连接，并提供一些关于数据传输和扩展方面的指导。
建立 Websocket 连接
在 SPA 中，要建立 Websocket 连接，需要使用 WebSocket 类提供的构造函数，并指定与服务器建立连接的 URL。如下所示：
const socket = new WebSocket('ws://localhost:3000');其中 'ws://localhost:3000' 是服务器的地址和端口号，可以是本地服务器或远程服务器。
一旦连接建立成功，将触发一个 open 事件。此时你可能会想要向服务器发送一个欢迎消息。可以使用 send 方法完成。
socket.addEventListener('open', () => {
socket.send('Hello, Server!');
});一旦连接建立，它将保持打开状态，直到连接被关闭。在服务器关闭连接时，将触发一个 close 事件，而在客户端关闭连接时，将触发一个 close 事件。我们一起来看一下。
关闭 Websocket 连接
在客户端关闭连接时，会触发一个 close 事件。可以使用 close 方法手动关闭连接，同时也可以监听这个事件来处理关闭时的逻辑。
socket.addEventListener('close', () => {
console.log('Connection closed.');
});
socket.close();同样的，在服务器关闭连接时，也会触发一个 close 事件，你需要在服务器端处理端口和资源的清理问题。
数据传输
Websocket 支持双向数据传输，这意味着客户端和服务器都可以发送和接收消息。其实现的方式非常简单，通过调用 send 方法发送消息，而在客户端和服务器上注册一个 message 监听器，以处理接收到的消息。
在客户端发送消息
为了发送消息，将调用 send 方法，向连接发送消息数据。下面就是一个完整的示例：
-- -------------------- ---- ------- ----- ------ - --- --------------------------------- ------------------------------- -- -- - ---------------- --- --- --------- --- ---------------------------------- ------- -- - ------------------- --------- -- ------------ ---
这个代码块将建立一个连接，向服务器发送消息 'Hi, are you there?'，然后监听一个 message 事件来处理服务器的反馈。
在客户端接收消息
为了接收消息，在客户端注册一个 message 事件监听器，处理接收到的数据。
socket.addEventListener('message', (event) => {
console.log('Server response:', event.data);
});当客户端收到来自服务器的数据时，会触发这个事件监听器，接收到的数据将储存在 event.data 中。
在服务器端发送消息
在服务器端发送消息，你需要使用 send 方法发送数据到连接的客户端。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (socket) => {
socket.send('Welcome to the WebSocket server.');
});
这个代码块创建一个 WebSocket 服务器，当一个客户端连接到服务器时，向客户端发送一个欢迎消息。
在服务器端接收消息
在服务器端接收消息，需要注册 message 事件监听器。
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -- -
-------------------- ------ -- -
------------------- ------- --------- -- ------
---
---
这个代码块创建一个 WebSocket 服务器，并注册一个 message 监听器，该监听器在接收到来自客户端的消息时会输出消息到控制台。
扩展
Websocket 的扩展性是非常好的，它可以与许多其他技术和工具集成，以满足不同的需求。在本节中，我们将讨论如何使用一些扩展来增强 Websocket 功能。
使用 Socket.IO
Socket.IO 是一个为 Websocket 开发提供的库，它可以提供一个更简单、更可靠的实时通信协议。它基于 Websocket，但是它向后兼容，因此它可以通过相同的接口使用 WebSocket，更容易地进行开发。
-- -------------------- ---- -------
------ -- ---- -------------------
----- ------ - ----------------------------
-------------------- -- -- -
-------------------- -
-------- ------- --------
---
---
--------------------- ------ -- -
--------------------- --------- -- ------
---
在这个例子中，我们使用了 socket.io-client 库来建立连接，为了发送消息，调用 socket.emit 方法，而在服务器端，监听到名为 'hello' 的事件，接收到消息的时候，就可以回复一个消息到客户端，并将其打印到控制台上。
使用 WebRTC
WebRTC 是一种用于浏览器之间实时通信的开放式、免费的 API 和协议。与 Websocket 不同，WebRTC 通过点对点的连接直接在浏览器之间传输数据，可以实现一些 Websocket 不好实现的高级应用程序。
-- -------------------- ---- ------- ----- -------------- - --- -------------------- ----- ----------- - ---------------------------------------------- --------------------- - ------- -- - --------------------- ---------- ------------ -- ------------------------ ---------
在这个例子中，我们创建了一个数据通道，用于在浏览器之间传输数据。一旦通道建立完成，我们发送了一个消息，而且还设置了一个 onmessage 监听器，在接收到消息时将其打印到控制台上。
结论
Websocket 是实现 SPA 实时通信的有力工具，它提供双向数据传输和持久连接的能力，可以让应用程序在不刷新页面的情况下实现实时通信。本文向您介绍了如何使用 Websocket 来建立和关闭连接，实现数据传输，以及如何使用扩展来增强 Websocket 的功能。我们希望这个教程可以帮助你更好地了解 Websocket，并在你的 SPA 开发中取得成功。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672488bb2e7021665e13e0e3