Fastify 是一个快速、低开销和可伸缩的 Node.js Web 框架，而 Socket.IO 是一个实时网络库，它允许在不同的客户端之间建立持久连接，使得实时通信成为可能。这两个工具的结合可以帮助我们构建出高性能的实时应用程序。
在本文中，我们将学习如何使用 Fastify 和 Socket.IO 构建一个实时聊天室应用程序。我们将从创建 Fastify 应用程序开始，然后介绍如何集成 Socket.IO，并最终构建一个完整的实时聊天应用程序。
创建 Fastify 应用程序
首先，我们需要安装 Fastify 和相关的插件。在终端中运行以下命令：
npm install fastify fastify-static fastify-websocket
这将安装 Fastify、Fastify 静态文件插件和 Fastify WebSocket 插件。
接下来，我们将创建一个新的文件夹，并在其中创建一个名为 index.js 的文件。在该文件中，我们将编写我们的 Fastify 应用程序代码。
// www.javascriptcn.com code example
const fastify = require('fastify')()
const path = require('path')
// 静态文件服务器
fastify.register(require('fastify-static'), {
root: path.join(__dirname, 'public'),
prefix: '/public/',
})
// WebSocket 服务器
fastify.register(require('fastify-websocket'))
// 首页路由
fastify.get('/', (req, reply) => {
reply.sendFile('index.html')
})
// WebSocket 路由
fastify.get('/ws', { websocket: true }, (connection, req) => {
connection.socket.on('message', message => {
// 处理客户端发送的消息
})
})
// 启动服务器
fastify.listen(3000, err => {
if (err) {
console.error(err)
process.exit(1)
}
console.log('Server is now listening on port 3000')
})在上面的代码中，我们首先引入了 Fastify 和 path 模块，然后注册了静态文件服务器和 WebSocket 服务器插件。接下来，我们定义了两个路由：一个是用于渲染首页的路由，另一个是用于处理 WebSocket 连接的路由。最后，我们启动了服务器并监听端口 3000。
现在，我们需要在 public 文件夹中创建一个名为 index.html 的文件，该文件将用于渲染我们的聊天室应用程序的前端界面。在该文件中，我们将添加一些 HTML、CSS 和 JavaScript 代码来创建聊天室的界面。
集成 Socket.IO
现在我们已经创建了 Fastify 应用程序和聊天室的前端界面，接下来让我们集成 Socket.IO，以便实现实时通信。我们需要安装 Socket.IO 和相关的插件。在终端中运行以下命令：
npm install socket.io fastify-socket.io
这将安装 Socket.IO 和 Fastify 的 Socket.IO 插件。
接下来，我们需要更新我们的 Fastify 应用程序代码，以便集成 Socket.IO。在 index.js 文件中添加以下代码：
// www.javascriptcn.com code example
const fastify = require('fastify')()
const path = require('path')
// 静态文件服务器
fastify.register(require('fastify-static'), {
root: path.join(__dirname, 'public'),
prefix: '/public/',
})
// WebSocket 服务器
fastify.register(require('fastify-websocket'))
// Socket.IO 服务器
fastify.register(require('fastify-socket.io'))
// 首页路由
fastify.get('/', (req, reply) => {
reply.sendFile('index.html')
})
// WebSocket 路由
fastify.get('/ws', { websocket: true }, (connection, req) => {
connection.socket.on('message', message => {
// 处理客户端发送的消息
})
})
// Socket.IO 路由
fastify.io.on('connection', socket => {
// 处理客户端连接事件
})
// 启动服务器
fastify.listen(3000, err => {
if (err) {
console.error(err)
process.exit(1)
}
console.log('Server is now listening on port 3000')
})在上面的代码中，我们首先注册了 Socket.IO 插件。然后，我们定义了一个 Socket.IO 路由，以便处理客户端连接事件。在该路由中，我们可以添加一些代码来处理客户端连接和断开连接事件，以及处理客户端发送的消息。
现在，我们需要更新我们的聊天室前端界面，以便使用 Socket.IO 进行实时通信。在我们的 index.html 文件中添加以下 JavaScript 代码：
// www.javascriptcn.com code example
const socket = io()
socket.on('connect', () => {
console.log('Connected to server')
})
socket.on('disconnect', () => {
console.log('Disconnected from server')
})
socket.on('message', message => {
console.log('Received message:', message)
})
function sendMessage() {
const input = document.getElementById('message-input')
const message = input.value.trim()
if (message.length > 0) {
socket.emit('message', message)
input.value = ''
}
}在上面的代码中，我们首先创建了一个 Socket.IO 实例，并监听 connect、disconnect 和 message 事件。然后，我们定义了一个 sendMessage 函数，该函数将发送用户输入的消息到服务器。
构建实时聊天应用程序
现在我们已经完成了 Fastify 和 Socket.IO 的集成，我们可以开始构建我们的实时聊天应用程序了。在我们的 index.js 文件中添加以下代码：
// www.javascriptcn.com code example
const fastify = require('fastify')()
const path = require('path')
// 静态文件服务器
fastify.register(require('fastify-static'), {
root: path.join(__dirname, 'public'),
prefix: '/public/',
})
// WebSocket 服务器
fastify.register(require('fastify-websocket'))
// Socket.IO 服务器
fastify.register(require('fastify-socket.io'))
// 首页路由
fastify.get('/', (req, reply) => {
reply.sendFile('index.html')
})
// WebSocket 路由
fastify.get('/ws', { websocket: true }, (connection, req) => {
connection.socket.on('message', message => {
fastify.io.emit('message', message)
})
})
// Socket.IO 路由
fastify.io.on('connection', socket => {
console.log('Client connected:', socket.id)
socket.on('message', message => {
console.log('Received message:', message)
fastify.io.emit('message', message)
})
socket.on('disconnect', () => {
console.log('Client disconnected:', socket.id)
})
})
// 启动服务器
fastify.listen(3000, err => {
if (err) {
console.error(err)
process.exit(1)
}
console.log('Server is now listening on port 3000')
})在上面的代码中，我们首先更新了 WebSocket 路由，以便将客户端发送的消息广播给所有连接的客户端。然后，我们更新了 Socket.IO 路由，以便处理客户端连接、断开连接和消息事件，并将客户端发送的消息广播给所有连接的客户端。
现在，我们已经完成了聊天室服务器端的开发，接下来让我们更新我们的聊天室前端界面，以便显示聊天消息。在我们的 index.html 文件中添加以下 HTML 代码：
<div id="messages"></div> <div> <input type="text" id="message-input" placeholder="Type your message here"> <button type="button" onclick="sendMessage()">Send</button> </div>
然后，我们更新我们的 JavaScript 代码，以便显示聊天消息。在我们的 index.html 文件中添加以下 JavaScript 代码：
// www.javascriptcn.com code example
const socket = io()
const messages = document.getElementById('messages')
socket.on('connect', () => {
console.log('Connected to server')
})
socket.on('disconnect', () => {
console.log('Disconnected from server')
})
socket.on('message', message => {
console.log('Received message:', message)
const div = document.createElement('div')
div.innerHTML = message
messages.appendChild(div)
})
function sendMessage() {
const input = document.getElementById('message-input')
const message = input.value.trim()
if (message.length > 0) {
socket.emit('message', message)
input.value = ''
}
}在上面的代码中，我们首先定义了一个 messages 变量，该变量用于存储聊天消息。然后，我们更新了 socket.on('message') 事件，以便将聊天消息添加到 messages 变量中，并在前端界面中显示出来。
现在，我们已经完成了我们的实时聊天应用程序。启动服务器并在浏览器中打开 http://localhost:3000，然后在不同的浏览器标签页或窗口中打开该页面，你将可以在这些浏览器之间进行实时通信。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d91b68a941bf7134096961