在现代web应用中，全部都变得越来越强大和接近于原生应用。其中，渐进式网页应用(PWA)成为了一个流行的解决方案，它具备许多原生应用的特点，例如离线浏览能力、推送通知、设备功能访问等等。在这些方面，WebSocket也是一个受欢迎的技术，它可以使你轻松快速地实现实时双向的通讯并更新web应用的内容。
在本文中，我将介绍如何在PWA应用中使用WebSocket来实现聊天，涵盖这个话题的许多方面，包括连接WebSocket服务器、发送和接收消息、创建通知等等。同时，本文将让你深入理解WebSocket技术的基础概念和一些常见应用的实现方法。
前期准备
在开始前，请确保你已经安装好了如下环境：
接下来，我们需要创建一个WebSocket服务器，这里有一个简单的Node.js代码片段：
----- --------- - --------------
----- --- - --- ------------------ ----- ---- ---
-------------------- -------- -------------- -
---------------- -------- ----------------- -
---------------------- ---- ---------
---------------------------- ------------ -
-- ------- --- -- -- ----------------- --- --------------- -
---------------------
-
---
---
---这个代码片段创建了一个WebSocket服务器，监听着本地机器上的8080端口。所有到达这个端口的连接都会被接受，并与服务器建立连接。如果客户端发送消息，服务器就会广播这个消息到所有当前连接的客户端上。现在我们可以启动WebSocket服务器并打开浏览器来连接它。打开一个浏览器，然后在控制台中运行：
----- -- - --- --------------------------------- ------------ - ----------- - ----------------------- -------- -- -------------- --------
这个客户端代码创建了一个WebSocket连接并测试它是否可用。在控制台中运行这个代码，我们可以看到hello world已经被广播到了服务器上的所有连接的客户端。
创建PWA应用
首先，我们需要新建一个PWA应用程序。如果你还不清楚如何创建PWA应用，可以参照阮一峰老师的博客渐进式Web应用简介。
我们假设PWA应用已经创建成功并准备好进一步开发。我们需要向PWA应用中添加WebSocket的功能。
创建WebSocket连接
WebSocket API使我们能够很容易地建立连接，并启动通讯。以下代码展示了如何在你的应用程序中创建 WebSocket 连接：
----- -- - --- ----------------------------------
大多数WebSocket服务器都需要使用wss，并且需要使用安全的HTTPS协议来保证安全性。部分WebSocket服务器可能不支持wss，如果你的应用程序默认使用HTTPS，则需要将这里的wss替换成ws。
监听WebSocket事件
在建立WebSocket连接后，需要添加一些事件监听器来响应一些WebSocket事件。前端通常会监听message和close事件:
------------------------------ --- -- - ----------------------- -------- --- ---------------------------- -- -- ----------------------------
以上代码片段展示了如何监听message事件和close事件。在message事件中，我们可以监听到接收到的消息，然后做出响应。在close事件中，当连接被关闭时输出Disconnected。
发送消息
当你的PWA应用需要发送消息时，你需要调用WebSocket API的send()方法：
-------------- --------
在此代码中，我们发送了Hello World字符串到WebSocket服务器。如果连接已经建立，服务器会收到这些消息并作出响应。
通知
PWA应用中的通知是非常关键的一部分，我们可以使用通知来向用户发送关于聊天消息的更新。
在Web平台上，我们可以使用Notification API来实现这一节功能。以下代码片段展示了如何发送一个通知：
-- ------------------------ --- ---------- -
--- ----------------- ----------
- ---- -- ------------------------ --- -------- -
------------------------------------------------- -- -
-- ----------- --- ---------- -
--- ----------------- ----------
-
---
-在此代码中，我们检查Notification API的状态是否为granted。如果是，则创建新通知并进行广播。如果没有被批准，那么就请求用户授权，并且在用户批准后创建新通知并进行广播。
现在，我们已经为PWA应用程式添加了WebSocket功能，它将与服务器建立连接并通过多个事件侦听器发送和接收数据。现在，让我们创建一个简单的PWA应用来测试这个功能：
----- -- - --- ----------------------------------
-- ------------------------ --- ---------- -
--- ----------------- ----------
- ---- -- ------------------------ --- -------- -
------------------------------------------------- -- -
-- ----------- --- ---------- -
--- ----------------- ----------
-
---
-
------------------------------ --- -- -
--- ----------------- -------- ------------
---上述代码展示了如何建立WebSocket连接，如何请求通知权限并发送通知。代码还添加了一个事件处理程序，当我们收到一个新的消息时，将创建一个新的通知并发送给用户。
总结
在本文中，我们涵盖了在PWA应用中使用WebSocket来实现聊天的多个方面。学习并理解这些基础知识将有助于你更好地应用WebSocket与PWA应用程序。同时，你也可以访问我的GitHub仓库来查看完整示例代码，包括所有WebSocket服务器代码的实现。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653f238f7d4982a6eb8aa87f