Fastify 中如何使用 WebSocket 实现实时通讯-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，实时通讯是一个非常重要的功能，它可以帮助我们实现聊天、在线协作等实时场景。而 WebSocket 则是实现实时通讯最好的技术之一，它可以让客户端和服务器建立长连接并实时交换数据。

Fastify 是一个极快的 Web 框架，它提供了良好的插件体系和路由系统，支持异步处理和中间件，而且还有着极高的性能。在本文中，我们将使用 Fastify 和 WebSocket 实现一个简单的实时通讯应用。

准备工作

首先，我们需要创建一个基础的 Fastify 项目，可以使用 fastify-cli 来快速创建。在命令行中输入以下命令安装 fastify-cli：

npm install -g fastify-cli

安装完成后，可以使用以下命令创建一个 Fastify 项目：

fastify create

然后按照提示选择模板，并输入项目名称即可。

接下来，我们需要安装 fastify-websocket 插件来支持 WebSocket。在命令行中输入以下命令：

npm install fastify-websocket

安装完成后，我们就可以开始编写实时通讯应用了。

编写服务器代码

在 app.js 文件中，我们需要引入 fastify 和 fastify-websocket，然后创建 Fastify 实例并注册 fastify-websocket 插件：

const fastify = require('fastify')()
const websocket = require('fastify-websocket')

fastify.register(websocket)

我们将创建一个简单的 WebSocket 服务器来处理客户端连接请求和消息交换。在 Fastify 实例中调用 get 方法来监听 /socket 路径：

fastify.get('/socket', {
  websocket: true
}, (connection, request) => {
  connection.on('message', async (message) => {
    // 在这里进行消息交换
  })
})

其中，websocket 参数告诉 Fastify 这是一个 WebSocket 路由，connection 表示当前连接，request 表示客户端请求对象。在这个例子中，我们只监听了 message 事件，用于接收客户端发送的消息。

现在，我们需要实现一个简单的消息广播逻辑。当收到客户端发送的消息时，我们将该消息发送给所有连接到服务器的客户端：

// javascriptcn.com 代码示例
fastify.get('/socket', {
  websocket: true
}, (connection, request) => {
  connection.on('message', async (message) => {
    fastify.websocketServer.clients.forEach((client) => {
      if (client.readyState === client.OPEN) {
        client.send(message)
      }
    })
  })
})

这里使用了 fastify.websocketServer 来获取当前所有连接的客户端列表，然后遍历这个列表，并把消息发送给所有有效的客户端。

现在，我们已经完成了服务器端的代码，开始构建客户端。

编写客户端代码

我们将使用原生的 WebSocket API 来实现客户端。在 index.html 文件中，我们可以使用以下代码来创建 WebSocket 连接：

// javascriptcn.com 代码示例
const socket = new WebSocket('ws://localhost:3000/socket')

socket.addEventListener('open', (event) => {
  console.log('WebSocket connected')
})

socket.addEventListener('message', (event) => {
  console.log('Message received:', event.data)
})

// 在这里可以发送消息

这里使用了 WebSocket 构造函数来创建一个 WebSocket 连接。连接的地址是 ws://localhost:3000/socket，也就是服务器端的 /socket 路由。一旦连接成功，就可以开始接收和发送消息了。

我们可以使用以下代码来发送消息：

socket.send('Hello, world!')

这里直接调用 send 方法，发送一个字符串消息。客户端发送的消息会被广播到所有连接的客户端。

测试应用

现在，我们已经完成了服务器和客户端的代码。接下来，使用以下命令启动服务器：

node app.js

然后在浏览器中打开 index.html 文件，即可见到控制台输出 WebSocket connected，表示客户端已经成功连接到服务器。

尝试发送一些消息，可以在控制台中看到 Message received 输出对应的消息内容。同时，所有连接到服务器的客户端都会收到这个消息。

总结

在本文中，我们使用 Fastify 和 WebSocket 实现了一个简单的实时通讯应用，实现了客户端和服务器之间的长连接并实时交换消息。借助 Fastify 强大的插件体系和 WebSocket 的优秀性能，我们建立了一个快速稳定的实时通讯应用。

对于前端开发者来说，掌握 WebSocket 技术是非常重要的。它可以让我们更加高效地实现实时通讯和在线协作等应用场景，同时还能为用户带来更好的体验。我们希望本文能够帮助到大家学习和使用 WebSocket 技术，掌握实时通讯的核心原理和实践经验。

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