在当今的 web 应用程序中，实现实时通信变得越来越重要。它可以大大提高用户体验，并使应用程序看起来更像现代应用程序。幸运的是，现代浏览器已经内置了 WebSocket 技术，让前端开发者能够快速实现双向通信。
什么是 WebSocket？
WebSocket 是一种网络协议，使得客户端和服务器之间可以建立持久连接，实现双向通信。这意味着客户端可以发送请求并获得实时数据，而无需像传统的 HTTP 请求那样等待服务器响应。
WebSocket 是 HTML5 引入的新技术。它是一个独立的协议，不基于 HTTP 。它允许跨域访问，是实时应用程序中使用的可靠解决方案。
如何使用 WebSocket？
使用 WebSocket 在单页应用程序中实现双向通信非常容易。首先，你需要在客户端和服务器之间建立一个持久连接。在客户端，可以使用 WebSocket 对象来建立连接，示例代码如下：
const socket = new WebSocket('ws://localhost:8000/socket');在这里，我们建立了与位于 localhost:8000 上的 WebSocket 服务器的连接。一旦建立了连接，我们就可以监听 onopen 事件，以确保连接建立成功：
socket.onopen = function(event) {
console.log('Connection established');
};现在，我们已经建立了连接。接下来，如何发送数据呢？可以使用 WebSocket 上的 send() 方法。下面的示例中，我们将发送一个字符串给服务器：
socket.send('Hello, world!');如果你想从服务器接收数据，可以监听 WebSocket 上的 onmessage 事件：
socket.onmessage = function(event) {
console.log('Received message:', event.data);
};这里，我们将我们将打印从服务器收到的任何消息。
最后，当你要关闭连接时，只需调用 WebSocket 上的 close() 方法：
socket.close();
WebSocket 服务器端实现
现在，你已经了解了如何在前端使用 WebSocket，但如何在服务器端实现 WebSocket 呢？要实现 WebSocket 服务器，你需要使用 Node.js。在 Node.js 中，您可以使用 ws 模块，它是一个 WebSocket 协议的实现。
下面是示例服务器的完整代码：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
------------------- ------------
---------------- -------- -------------- -
--------------------- ---------- ------
--------------- ---------
---
-------------- -------- ------- -
-------------------------- ---------
---
---这个服务器将监听 8000 端口上的 WebSocket 连接。在客户端连接到服务器时，服务器将打印 “Client connected” 消息。当客户端发送消息时，服务器将打印消息，然后发送消息 “Hello，client” 回客户端。当客户端断开连接时，服务器将打印消息，并断开连接。
指导意义
WebSocket 是一种可以提高实时应用程序性能的强大技术。通过使用 WebSocket，您可以建立持久连接并实现实时通信，这在如今的社交网络、多人游戏和在线聊天应用程序中非常重要。此外，WebSocket 可以与许多技术（包括 Node.js、React 和 Angular 等）协同工作。因此，学习使用 WebSocket 在单页应用程序中实现双向通信是非常重要的。
结论
在本篇文章中，我们讲解了如何使用 WebSocket 在 SPA 中实现双向通信。首先，我们介绍了 WebSocket 是什么，以及如何使用 WebSocket。然后，我们在服务器端实现了 WebSocket 服务器，并解释了如何使用 ws 模块。最后，我们探讨了 WebSocket 对单页应用程序的重要性以及学习如何使用 WebSocket 的指导意义。
希望这篇文章能帮助你学习使用 WebSocket 实现双向通信，加深你对前端技术的理解和掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6722d29d2e7021665e0d14dd