使用 Fastify WebSocket 进行实时通信的详解-JavaScript中文网-JavaScript教程资源分享门户

前言

现代的互联网应用程序需要实时更新数据，如聊天应用程序、即时游戏、在线投票系统等等。在过去，这是通过使用基于轮询的 HTTP 请求来实现的。这样做的问题在于，这些请求会占用宝贵的网络带宽和服务器资源。

WebSocket 是一种全双工、低延迟的通信协议，可以实现实时、持久性的通信。本文将介绍如何使用 Fastify WebSocket 进行实时通信。

Fastify WebSocket

Fastify 是一个快速且低开销的 Web 框架，而 Fastify WebSocket 提供了在 Fastify 应用程序中实现 WebSocket 的能力。

Fastify WebSocket 遵循领域驱动的设计原则，因此在使用它之前需要了解一些 WebSocket 相关的概念。

WebSocket 协议

WebSocket 是一种基于 TCP 的协议，它提供了一个持久化的连接，允许客户端和服务器进行全双工通信。相对于 HTTP 请求，WebSocket 连接可以更节省带宽和降低延迟，因为它不需要在每次通信时重新建立连接。

客户端

WebSocket 客户端是一个运行在浏览器或者其他应用程序中的组件，它使用 WebSocket 协议连接到 WebSocket 服务器并以一种异步的方式进行通信。

服务器端

WebSocket 服务器端是一个运行在服务器上的组件，它等待客户端连接并在服务端上启动一个 WebSocket 服务器，可以使用 WebSocket 协议与客户端进行通信。

消息

WebSocket 的通信是通过消息进行的，在客户端和服务器之间双向传输。每个消息都是一个数据包，可以是文本、二进制数据等等。

事件

WebSocket 是通过事件来处理消息的。当服务器端接收到客户端发送的消息时会触发一个事件，而客户端也会通过事件处理程序接收服务器端发送的消息。

通信流程

WebSocket 的通信流程如下：

客户端发送一个 WebSocket 请求到服务器。
服务器接收请求并与客户端建立 WebSocket 连接。
客户端和服务器通过 WebSocket 连接进行通信。
通信结束后，客户端和服务器可以关闭 WebSocket 连接。

使用 Fastify WebSocket 进行实时通信

下面，我们将学习如何使用 Fastify WebSocket 进行实时通信。首先，我们需要安装 Fastify 和 Fastify WebSocket：

npm install fastify fastify-websocket

接下来，我们将创建一个 Fastify 应用程序，并使用 Fastify WebSocket 添加 WebSocket 功能。

// javascriptcn.com 代码示例
const fastify = require('fastify')()
const fastifyWebSocket = require('fastify-websocket')

fastify.register(fastifyWebSocket)

fastify.get('/', function (req, reply) {
  reply.sendFile('index.html')
})

fastify.listen(3000, function (err) {
  if (err) {
    fastify.log.error(err)
    process.exit(1)
  }
  console.log('Server running on port 3000')
})

这个应用程序定义了一个根路由 /，它通过 reply.sendFile() 方法将 index.html 文件发送给客户端。接下来，我们将在 index.html 文件中添加 WebSocket 代码。

在 index.html 中，需要添加 WebSocket 的 JavaScript 代码如下：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>WebSocket Example</title>
    <script>
      var socket = new WebSocket('ws://localhost:3000')

      socket.onopen = function () {
        console.log('WebSocket connected')
      }

      socket.onmessage = function (event) {
        console.log('WebSocket message:', event.data)
      }

      socket.onclose = function () {
        console.log('WebSocket disconnected')
      }

      // Send a message to the WebSocket server
      socket.send('Hello, server!')
    </script>
  </head>

  <body>
    <h1>WebSocket Example</h1>
  </body>
</html>

在这个代码中，我们使用了 WebSocket 的三个事件来处理通信：

onopen：当客户端连接到 WebSocket 服务器时触发。
onmessage：当 WebSocket 接收到一个消息时触发。
onclose：当客户端断开 WebSocket 连接时触发。

此外，我们还定义了一个 socket.send() 方法，用于向 WebSocket 服务器发送消息。

现在，我们已经完成了一个最基本的 WebSocket 应用程序，下面我们将添加更多功能。

Fastify WebSocket API

Fastify WebSocket 插件提供了一个强大的 API，以帮助我们构建复杂的 WebSocket 应用程序。我们将使用 Fastify WebSocket API 文档来更好地了解 Fastify WebSocket 的功能。

在服务器端发送消息

使用 Fastify WebSocket，我们可以在服务器端向客户端发送消息。使用 socket.send() 方法来设置消息的内容，并使用 socket.send(message) 方法将消息发送到客户端。

fastify.get('/send', { websocket: true }, function (connection, req) {
  connection.socket.send('Hello, client!')
})

在这个例子中，我们创建了一个 WebSocket 路由 /send，用于向客户端发送消息 Hello, client!。它通过 connection.socket.send() 方法来发送消息，这个方法只在 WebSocket 连接打开时才会调用。

在客户端接收消息

在客户端接收到的消息将通过 onmessage 事件触发。我们使用 event.data 方法来获得这个消息的内容。

socket.onmessage = function (event) {
  console.log('WebSocket message:', event.data)
}

广播消息

使用 Fastify WebSocket，我们可以像下面这样进行广播，向所有连接的客户端发送消息。

fastify.get('/broadcast', { websocket: true }, function (connection, req) {
  fastify.websocketServer.clients.forEach(function (client) {
    client.send('Hello, clients!')
  })
})

在这个例子中，我们定义了一个 WebSocket 路由 /broadcast，向所有连接的客户端发送消息 Hello, clients!。

处理错误

在 WebSocket 中，错误是通过 onerror 事件来处理的。当 WebSocket 出现任何错误时，它会触发这个事件，我们可以在这个事件中处理它。

socket.onerror = function (event) {
  console.log('WebSocket error:', event)
}

总结

本文介绍了如何使用 Fastify WebSocket 进行实时通信。我们学习了 WebSocket 的基本概念、Fastify WebSocket 插件以及如何构建 WebSocket 应用程序。使用 Fastify WebSocket，我们可以轻松地构建实时、持久化连接的应用程序。

示例代码

完整的示例代码可以在这里找到：https://github.com/fastify/fastify-websocket/tree/master/example。

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