WebSocket 是一种全双工通信协议，允许服务器和客户端之间进行实时的通信。在前端领域，WebSocket 往往被用于构建实时通信、游戏、聊天等应用，而 Fastify 是一个高效、低开销的 Node.js Web 框架，非常适合构建高并发、低延迟的应用。
本文将介绍如何使用 Fastify 构建 WebSocket 服务，包括创建 WebSocket 连接、发送和接收消息等操作，以及应用示例和实用技巧，帮助读者更好地理解和运用 WebSocket 技术。
安装 Fastify 和 WebSocket
首先，我们需要安装 Fastify 和 ws 这两个库，ws 是 Node.js 中比较流行的 WebSocket 库，提供了许多 WebSocket 相关的 API 和事件。
npm i fastify ws
创建 WebSocket 服务
我们可以基于 Fastify 和 ws 库，快速创建一个 WebSocket 服务：
// javascriptcn.com 代码示例
const fastify = require('fastify')({ logger: true })
const WebSocket = require('ws')
fastify.register((fastify, options, next) => {
const wss = new WebSocket.Server({ server: fastify.server })
wss.on('connection', (ws) => {
console.log('WebSocket connected')
ws.on('message', (message) => {
console.log(`Received message: ${message}`)
ws.send(`Server received: ${message}`)
})
ws.on('close', () => {
console.log('WebSocket disconnected')
})
ws.send('You are connected to WebSocket server')
})
next()
})
fastify.listen(3000, (err, address) => {
if (err) {
fastify.log.error(err)
process.exit(1)
}
console.log(`Server listening on ${address}`)
})在上述代码中，我们使用了 Fastify 的服务器和 ws 库创建了一个 WebSocket 服务，监听在 3000 端口。当客户端连接到这个服务器时，会触发 connection 事件，我们可以在该事件里处理收到的消息，以及连接关闭的操作。
// javascriptcn.com 代码示例
wss.on('connection', (ws) => {
console.log('WebSocket connected')
ws.on('message', (message) => {
console.log(`Received message: ${message}`)
ws.send(`Server received: ${message}`)
})
ws.on('close', () => {
console.log('WebSocket disconnected')
})
ws.send('You are connected to WebSocket server')
})在这个事件里，我们监听 message 事件来处理接收到的消息，同时使用 send 方法向客户端发送消息。收到的消息一般是字符串类型的，而发送的消息可以是字符串、二进制数据或者 Buffer 对象。
随后，我们使用 on 监听 close 事件，在连接关闭时执行相应的操作。最后，我们可以发送一条欢迎消息，以确认客户端已经成功连接到服务器。
连接 WebSocket
客户端在连接 WebSocket 服务器时，可以使用 WebSocket 对象发起连接，我们可以在前端使用原生的 WebSocket 对象，也可以使用第三方库如 socket.io 等。
// javascriptcn.com 代码示例
const ws = new WebSocket('ws://localhost:3000')
ws.addEventListener('open', () => {
console.log('Connected to WebSocket server')
ws.send('Hello from client')
})
ws.addEventListener('message', (event) => {
console.log(`Received message: ${event.data}`)
})在上述代码中，我们创建了一个 WebSocket 对象，指向我们刚刚创建的服务器地址。当连接建立成功时，会触发 open 事件，我们在该事件里发送一条消息。
ws.addEventListener('open', () => {
console.log('Connected to WebSocket server')
ws.send('Hello from client')
})在收到消息时，我们可以通过 message 事件来监听，并处理接收到的消息。
ws.addEventListener('message', (event) => {
console.log(`Received message: ${event.data}`)
})发送消息
客户端和服务器在连接成功后，可以互相发送消息。我们可以在客户端使用 send 方法发送消息：
ws.send('Hello from client')在服务器中，我们可以在 connection 事件的 message 子事件中，处理所接收到的消息：
ws.on('message', (message) => {
console.log(`Received message: ${message}`)
ws.send(`Server received: ${message}`)
})在上述代码中，我们监听 message 事件，使用 send 方法将客户端发送的消息回传。
实用技巧
接下来，我们来介绍一些 WebSocket 开发中的实用技巧。
处理错误
在 WebSocket 连接中，可能出现各种错误，例如服务器关闭、网络中断等。我们需要在合适的时候处理这些错误，并恰当地向用户反馈。
在 Fastify 中，我们可以监听 error 事件来处理错误：
// javascriptcn.com 代码示例
fastify.listen(3000, (err, address) => {
if (err) {
fastify.log.error(err)
process.exit(1)
}
console.log(`Server listening on ${address}`)
})
fastify.server.on('error', (err) => {
console.error('Server error:', err)
})在服务器的 connection 事件中，我们可以监听 error 事件来处理该连接中可能出现的错误：
// javascriptcn.com 代码示例
wss.on('connection', (ws) => {
console.log('WebSocket connected')
ws.on('message', (message) => {
console.log(`Received message: ${message}`)
ws.send(`Server received: ${message}`)
})
ws.on('error', (err) => {
console.error('WebSocket error:', err)
})
ws.on('close', () => {
console.log('WebSocket disconnected')
})
ws.send('You are connected to WebSocket server')
})客户端重连
在使用 WebSocket 进行实时通信时，由于网络等原因，可能出现断开连接的情况，这时我们需要对客户端进行重连，保证连接的持续性。
可以使用类似如下的代码来实现客户端重连：
// javascriptcn.com 代码示例
let ws = new WebSocket('ws://localhost:3000')
ws.addEventListener('close', () => {
console.log('Disconnected from WebSocket server, retrying...')
setTimeout(() => {
ws = new WebSocket('ws://localhost:3000')
}, 2000)
})在上述代码中，我们监听客户端的 close 事件，在该事件里进行重连操作。这里使用了 setTimeout 来添加一个 2 秒的等待时间，避免过于频繁地尝试重连。
广播消息
在实时通信的应用中，可能需要同时向多个客户端广播消息。我们可以实现广播消息的功能：
// javascriptcn.com 代码示例
let clients = new Set()
wss.on('connection', (ws) => {
clients.add(ws)
ws.on('close', () => {
clients.delete(ws)
})
ws.on('message', (message) => {
Array.from(clients).forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message)
}
})
})
})在上述代码中，我们使用 Set 来存储所有连接到服务器的客户端，当新的客户端连接时，将其添加到 clients 集合中。在客户端关闭连接时，从集合中删除该客户端。
在收到消息时，我们可以遍历所有客户端，如果该客户端打开状态，则发送消息到该客户端。
应用示例
最后，我们给出一个简单的聊天室应用示例，演示如何使用 Fastify 和 WebSocket 构建实时通信应用。
// javascriptcn.com 代码示例
const fastify = require('fastify')({ logger: true })
const WebSocket = require('ws')
fastify.register((fastify, options, next) => {
const wss = new WebSocket.Server({ server: fastify.server })
let clients = new Set()
wss.on('connection', (ws) => {
console.log('WebSocket connected')
clients.add(ws)
ws.on('close', () => {
clients.delete(ws)
console.log(`WebSocket disconnected, ${clients.size} clients remaining`)
})
ws.on('message', (message) => {
console.log(`Received message: ${message}`)
Array.from(clients).forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message)
}
})
})
})
next()
})
fastify.get('/', (request, reply) => {
reply.type('text/html')
reply.send(`
<form id="form">
<input type="text" id="input" />
<button type="submit">Send</button>
<ul id="messages"></ul>
</form>
<script>
const ws = new WebSocket('ws://localhost:3000')
const form = document.getElementById('form')
const input = document.getElementById('input')
const messages = document.getElementById('messages')
ws.addEventListener('message', (event) => {
const li = document.createElement('li')
li.textContent = event.data
messages.appendChild(li)
})
form.addEventListener('submit', (event) => {
event.preventDefault()
ws.send(input.value)
input.value = ''
})
</script>
`)
})
fastify.listen(3000, (err, address) => {
if (err) {
fastify.log.error(err)
process.exit(1)
}
console.log(`Server listening on ${address}`)
})在上述代码中，我们使用了 Fastify 注册了 WebSocket 服务器，并且在该服务器的 connection 事件中，实现了聊天室的功能。所有连接到服务器的客户端，都可以在 Chat 客户端发送消息，在服务器中被广播到所有其他客户端。
同时，我们在服务器中维护了一个 clients 集合，存储所有连接到服务器的客户端。
在 Fastify 中，我们使用 get 方法来创建一个 HTTP 路由。在这个应用中，我们使用 / 路由来渲染 Chat 客户端的 HTML，包括消息输入框、消息列表和提交按钮等元素。
<form id="form"> <input type="text" id="input" /> <button type="submit">Send</button> <ul id="messages"></ul> </form>
我们将 Chat 客户端的 JavaScript 代码直接内嵌在 HTML 中，方便读者直接理解整个应用的实现流程。
总结
本文介绍了如何使用 Fastify 构建 WebSocket 服务，包括创建 WebSocket 服务、连WebSocket 接、发送和接收消息等操作，以及应用示例和实用技巧，帮助读者更好地理解和运用 WebSocket 技术。
通过本文的学习，你将了解到：
- 如何使用 Fastify 和 ws 库创建 WebSocket 服务
- 如何连接 WebSocket 服务器和发送和接收消息
- 如何处理 WebSocket 连接中可能出现的错误
- 如何实现客户端的重连和消息广播功能
我们希望本文能够对读者在使用 WebSocket 进行实时通信时有所帮助，同时也欢迎读者在评论区分享任何有关 WebSocket 的经验或者问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653a123a7d4982a6eb3d6e46