Fastify 下的 WebSocket 实现及使用教程

前言

WebSocket 是一种能够建立客户端和服务端之间全双工通信的协议。它可以解决客户端在实时性数据传输上的限制，比如实时聊天、在线游戏等。在前端开发中，使用 WebSocket 能够提高用户体验，将更新的数据实时地显示给用户，减轻服务器的压力。本篇文章将详细介绍 Fastify 下的 WebSocket 实现及使用教程。

Fastify

Fastify 是一个高效的 web 框架，具有极快的路由和处理速度。它使用了现代的 Node.js 技术，比如 async/await，Promise，stream 等。它能够处理数十万次请求和响应，是一个优秀的 web 框架。

WebSocket 实现

Fastify 提供了 fastify-websocket 插件，使得 Fastify 支持了 WebSocket 协议。该插件能够同时支持 HTTP 请求和 WebSocket 连接，并且可以通过相同的方式注册路由和中间件。

下面是 Fastify 下实现 WebSocket 的示例代码：

const fastify = require('fastify')()
const WebSocket = require('ws')

fastify.register(require('fastify-websocket'))

fastify.get('/websocket', { websocket: true }, (connection, req) => {
  connection.socket.on('message', message => {
    connection.socket.send(message)
  })
})

fastify.listen(3000, (err, address) => {
  if (err) throw err
  console.log(`server listening on ${address}`)
})

在该例子中，路由 /websocket 通过设置 websocket 为 true 来表示该路由可以接受 WebSocket 请求。通过 connection 参数可以获取到 WebSocket 连接。其中 connection.socket 对应了原生的 WebSocket 实例对象。在 'message' 事件中可以以回调函数的形式获取客户端发送的消息。也可以通过 WebSocket 实例对象的 send() 方法返回其客户端。

使用教程

从上面的例子中，我们可以看到 Fastify 下实现 WebSocket 的代码非常简单。只需要依赖 fastify-websocket 插件即可注册 WebSocket 路由。下面我们来看一下如何使用 Fastify 提供的 WebSocket 实现。

客户端

在客户端，我们通过原生的 WebSocket 对象实例化一个连接。

const socket = new WebSocket('ws://localhost:3000/websocket')

在建立连接之后，我们需要监听连接状态，同时也可以在连接建立成功时发送消息。

socket.addEventListener('open', event => {
  console.log('连接成功')
  socket.send('Hello')
})

socket.addEventListener('message', event => {
  console.log('接收到消息', event.data)
})

socket.addEventListener('close', event => {
  console.log('连接关闭')
})

在消息发送和接收中，我们可以通过 event 对象获取消息内容和发送者信息。

服务端

在服务端，我们可以对接收的消息进行处理，并在必要时返回给客户端。

fastify.get('/websocket', { websocket: true }, (connection, req) => {
  connection.socket.on('message', message => {
    console.log('收到消息', message)
    connection.socket.send('收到消息：' + message)
  })
})

在上面的例子中，当客户端发送消息时，服务端将收到该消息并且输出，在返回消息时使用 connection.socket.send() 方法向客户端发送响应消息。

总结

本篇文章为大家介绍了 Fastify 下的 WebSocket 实现及使用教程。通过使用 Fastify 提供的 fastify-websocket 插件，实现 WebSocket 相关业务将变得异常简单。同时，无论是在客户端还是服务端，都非常容易上手，方便快捷。希望本篇文章对广大前端开发人员具有指导意义，能够在实际开发中提高工作效率。

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