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

前言

在前端开发中，实时通信是非常重要的。它可以让我们快速地将数据传输到用户端，从而提高用户的交互体验，降低用户等待的时间。在实时通信中，WebSocket 是一种非常流行的协议，它比传统的 HTTP 协议有更低的延迟并支持服务器向客户端主动推送数据。

在本文中，我们将介绍如何使用 Fastify 进行 WebSocket 实时通信。Fastify 是一款快速且低开销的 Node.js Web 框架，它可以帮助我们快速地构建高性能的 Web 应用程序。

安装 Fastify 和 WebSocket

在开始之前，我们需要先安装 Fastify 和 WebSocket。你可以通过 npm 来进行安装：

npm install fastify
npm install fastify-websocket

创建服务器

接下来，我们需要创建一个 Fastify 服务器，并且在服务器上启用 WebSocket。

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

// 启用 WebSocket
fastify.register(require('fastify-websocket'))

// 创建 WebSocket 连接
fastify.get('/websocket', { websocket: true }, (connection, req) => {
  connection.on('message', (msg) => {
    // 处理接收到的消息
    console.log(msg)
  })
})

上面的代码创建了一个 Fastify 服务器，并在服务器上启用了 WebSocket。接下来，我们创建了一个 GET 路由，使得客户端可以通过访问 /websocket 来进行 WebSocket 连接。当客户端和服务器之间的 WebSocket 连接建立之后，所有的消息都会被发送到 message 事件处理器中进行处理。

建立客户端连接

我们需要使用 Web Socket API 来建立客户端和服务器之间的连接。

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebSocket 实时通信</title>
</head>
<body>
  <script>
    const socket = new WebSocket('ws://localhost:3000/websocket')

    socket.onopen = (event) => {
      console.log('连接已建立')
    }

    socket.onmessage = (event) => {
      console.log(event.data)
    }

    socket.onerror = (error) => {
      console.log(error)
    }

    socket.onclose = () => {
      console.log('连接已关闭')
    }
  </script>
</body>
</html>

上面的代码创建了一个 WebSocket 连接，连接到了服务端的 /websocket 路由。当连接被成功建立时，我们将会收到一个 onopen 事件。当服务器向我们发送消息时，我们将会收到一个 onmessage 事件，接受到的消息会被存储在 event.data 中。如果连接错误，则会触发 onerror 事件。当连接关闭时，我们将会收到一个 onclose 事件。

发送消息

一旦客户端和服务器之间的 WebSocket 连接被成功建立，我们便可以互相发送消息了。

// 发送消息
socket.send("要发送的消息内容");

总结

至此，我们已经学习了如何使用 Fastify 进行 WebSocket 实时通信。我们创建了一个 Fastify 服务器，并在其中启用了 WebSocket。接着，我们了解了如何

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