在 PWA 应用中使用 WebSocket 实现聊天-JavaScript中文网-JavaScript教程资源分享门户

在现代web应用中，全部都变得越来越强大和接近于原生应用。其中，渐进式网页应用(PWA)成为了一个流行的解决方案，它具备许多原生应用的特点，例如离线浏览能力、推送通知、设备功能访问等等。在这些方面，WebSocket也是一个受欢迎的技术，它可以使你轻松快速地实现实时双向的通讯并更新web应用的内容。

在本文中，我将介绍如何在PWA应用中使用WebSocket来实现聊天，涵盖这个话题的许多方面，包括连接WebSocket服务器、发送和接收消息、创建通知等等。同时，本文将让你深入理解WebSocket技术的基础概念和一些常见应用的实现方法。

前期准备

在开始前，请确保你已经安装好了如下环境：

接下来，我们需要创建一个WebSocket服务器，这里有一个简单的Node.js代码片段：

// javascriptcn.com 代码示例
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

这个代码片段创建了一个WebSocket服务器，监听着本地机器上的8080端口。所有到达这个端口的连接都会被接受，并与服务器建立连接。如果客户端发送消息，服务器就会广播这个消息到所有当前连接的客户端上。现在我们可以启动WebSocket服务器并打开浏览器来连接它。打开一个浏览器，然后在控制台中运行：

const ws = new WebSocket('ws://localhost:8080');

ws.onmessage = function(e) {
  console.log('message:', e.data);
};

ws.send('hello world');

这个客户端代码创建了一个WebSocket连接并测试它是否可用。在控制台中运行这个代码，我们可以看到hello world已经被广播到了服务器上的所有连接的客户端。

创建PWA应用

首先，我们需要新建一个PWA应用程序。如果你还不清楚如何创建PWA应用，可以参照阮一峰老师的博客渐进式Web应用简介。

我们假设PWA应用已经创建成功并准备好进一步开发。我们需要向PWA应用中添加WebSocket的功能。

创建WebSocket连接

WebSocket API使我们能够很容易地建立连接，并启动通讯。以下代码展示了如何在你的应用程序中创建 WebSocket 连接：

const ws = new WebSocket('wss://localhost:8080');

大多数WebSocket服务器都需要使用wss，并且需要使用安全的HTTPS协议来保证安全性。部分WebSocket服务器可能不支持wss，如果你的应用程序默认使用HTTPS，则需要将这里的wss替换成ws。

监听WebSocket事件

在建立WebSocket连接后，需要添加一些事件监听器来响应一些WebSocket事件。前端通常会监听message和close事件:

ws.addEventListener('message', (e) => {
  console.log('Message:', e.data);  
});
ws.addEventListener('close', () => console.log('Disconnected));

以上代码片段展示了如何监听message事件和close事件。在message事件中，我们可以监听到接收到的消息，然后做出响应。在close事件中，当连接被关闭时输出Disconnected。

发送消息

当你的PWA应用需要发送消息时，你需要调用WebSocket API的send()方法：

ws.send('Hello World');

在此代码中，我们发送了Hello World字符串到WebSocket服务器。如果连接已经建立，服务器会收到这些消息并作出响应。

通知

PWA应用中的通知是非常关键的一部分，我们可以使用通知来向用户发送关于聊天消息的更新。

在Web平台上，我们可以使用Notification API来实现这一节功能。以下代码片段展示了如何发送一个通知：

// javascriptcn.com 代码示例
if (Notification.permission === 'granted') {
  new Notification('New Message');
} else if (Notification.permission !== 'denied) {
  Notification.requestPermission().then((permisson) => {
    if (permission === 'granted') {
      new Notification('New Message');
    }
  });
}

在此代码中，我们检查Notification API的状态是否为granted。如果是，则创建新通知并进行广播。如果没有被批准，那么就请求用户授权，并且在用户批准后创建新通知并进行广播。

现在，我们已经为PWA应用程式添加了WebSocket功能，它将与服务器建立连接并通过多个事件侦听器发送和接收数据。现在，让我们创建一个简单的PWA应用来测试这个功能：

// javascriptcn.com 代码示例
const ws = new WebSocket('wss://localhost:8080');

if (Notification.permission === 'granted') {
  new Notification('New Message');
} else if (Notification.permission !== 'denied) {
  Notification.requestPermission().then((permisson) => {
    if (permission === 'granted') {
      new Notification('New Message');
    }
  });
}

ws.addEventListener('message', (e) => {
  new Notification(`New message: ${e.data}`);
});

上述代码展示了如何建立WebSocket连接，如何请求通知权限并发送通知。代码还添加了一个事件处理程序，当我们收到一个新的消息时，将创建一个新的通知并发送给用户。

总结

在本文中，我们涵盖了在PWA应用中使用WebSocket来实现聊天的多个方面。学习并理解这些基础知识将有助于你更好地应用WebSocket与PWA应用程序。同时，你也可以访问我的GitHub仓库来查看完整示例代码，包括所有WebSocket服务器代码的实现。希望这篇文章对你有所帮助！

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f238f7d4982a6eb8aa87f