什么是 PWA？
PWA（Progressive Web App）是一种新型的 Web 应用程序，能够提供类似于原生应用的体验。PWA 具有以下特点：
- 可以在离线时访问
- 可以添加到主屏幕
- 可以推送通知
- 具有快速响应和流畅的动画效果
PWA 技术的出现，使得 Web 应用程序的体验更加接近原生应用程序。
什么是 WebSocket？
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它是一种在客户端和服务器之间进行实时通信的技术，可以实现服务器端主动推送数据给客户端。
与传统的 HTTP 请求相比，WebSocket 连接的建立和维护开销较小，可以更快地建立和维护连接。因此，WebSocket 技术通常用于实时通信，如聊天室、游戏等场景。
如何使用 WebSocket 实现服务器端推送数据？
下面我们将演示如何使用 WebSocket 实现服务器端推送数据。
1. 创建 WebSocket 连接
首先，我们需要在客户端创建 WebSocket 连接。可以使用 JavaScript 的 WebSocket 对象来创建连接，如下所示：
const ws = new WebSocket('ws://localhost:8080');这里的 ws://localhost:8080 是 WebSocket 服务器的地址，可以根据实际情况进行修改。
2. 监听 WebSocket 事件
创建完 WebSocket 连接之后，我们需要监听 WebSocket 的事件，以便在接收到服务器端推送的数据时进行处理。WebSocket 的事件包括以下几种：
open：连接建立成功时触发message：接收到服务器端发送的数据时触发close：连接关闭时触发error：连接发生错误时触发
下面是监听 message 事件的示例代码：
ws.addEventListener('message', event => {
const data = JSON.parse(event.data);
console.log(data);
});在这个示例代码中，我们使用 JSON.parse 方法将接收到的数据解析为 JSON 对象，并将其输出到控制台上。
3. 服务器端推送数据
在客户端创建 WebSocket 连接并监听事件之后，我们需要在服务器端推送数据。可以使用各种后端技术来实现 WebSocket 服务器，如 Node.js、Java、Python 等。
下面是使用 Node.js 实现 WebSocket 服务器的示例代码：
-- -------------------- ---- -------
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -- -- -
----- ---------- - -------------- -- -
----- ---- - - ----- --- ----------------------- --
------------------------------
-- ------
-------------- -- -- -
--------------------------
---
---在这个示例代码中，我们使用 WebSocket.Server 方法创建了一个 WebSocket 服务器，并在客户端连接到服务器时触发 connection 事件。在 connection 事件处理函数中，我们使用 setInterval 方法每秒向客户端推送一次当前时间。
4. 测试
最后，我们可以测试一下我们的代码是否能够正常工作。在终端中运行 WebSocket 服务器的代码，然后打开一个浏览器窗口，在控制台中输入以下代码：
const ws = new WebSocket('ws://localhost:8080');
ws.addEventListener('message', event => {
const data = JSON.parse(event.data);
console.log(data);
});如果一切正常，你应该能够在控制台中看到每秒钟输出一次当前时间的日志信息。
总结
本文介绍了 PWA 技术和 WebSocket 技术，并演示了如何使用 WebSocket 实现服务器端推送数据。希望本文能够帮助读者更好地理解 PWA 和 WebSocket 技术，并在实际项目中应用它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660cdf11d10417a222d3c78d