在现代 Web 应用程序中，双向通信是相当重要和普遍的需求。Socket.IO 是一个流行的实现方案之一，它提供了一个灵活的、易于使用的接口，便于在浏览器和服务器之间建立实时通信。在本文中，我们将详细介绍如何在 Fastify 中使用 Socket.IO 进行双向通信。
快速概述
Fastify 是一个基于 Node.js 的 Web 框架，致力于提供出色的性能和易用性。它支持插件系统，其中许多插件可以帮助我们简化代码、提高性能和可维护性。Socket.IO 是一个双向通信库，它能够在浏览器和服务器之间建立实时通信，包括文本、二进制数据、JSON 对象等。
在 Fastify 中使用 Socket.IO 首先需要安装和导入两个模块：fastify 和 socket.io。安装命令如下：
npm install fastify socket.io
在服务器代码中，我们需要初始化 Fastify，创建 Socket.IO 实例，并将其挂载到 Fastify 实例上。这样，我们的服务器就具备了双向通信的能力。示例代码如下：
-- -------------------- ---- ------- ----- ------- - -------------------- ----- -- - ---------------------- ---------------------------------------------- ------------------- -------- -- - -------------- ---- ----------- ----------------------- -- -- -------------- ---- --------------- -- ---------------- --------- ------ -- - ---------------------------- -- -------------------- ----- -- - -- ----- ----- --- ------------------- --------- -- ---- ------ --
这段代码中，我们首先导入了 fastify 和 socket.io 两个模块，并使用 fastify-websocket 插件提供的 register 方法注册 WebSocket 插件，为了支持 Socket.IO 的 WebSocket 通信协议。接着，我们创建了一个 io 对象，并在它上面添加了一个 connection 事件监听器。每当有一个新的连接建立时，connection 事件就会被触发，并传入一个 socket 参数，它表示当前连接的客户端。我们在这里简单地打印一行连接信息，并为 socket 对象添加了一个 disconnect 监听器，用于在客户端断开连接时打印一行信息。最后，我们定义了一个 HTTP GET 路由，用于返回一个静态 HTML 文件。
现在，我们可以启动这个服务器并在浏览器中打开 http://localhost:3000，稍后我们将编写客户端代码，用 Socket.IO 与服务器通信。
建立连接
在客户端中使用 Socket.IO 首先需要安装和导入相应的客户端库。我们可以通过 CDN 存储或使用 npm 安装来获取这个库。这里我们假设已经将 socket.io 客户端库安装到了我们的项目目录中，并将其附加到 HTML 文件中，示例如下：
-- -------------------- ---- -------
--------- -----
------
------
---------------- ---------------
------- ---------------------------------------
--------
----- ------ - ----
-------------------- -- -- -------------------------
----------------------- -- -- ----------------------------
---------
-------
------
------------- ------------
--------- --------------
-------
-------在这段代码中，我们首先在 HTML 文件头部引入了 socket.io.js 文件，它是 Socket.IO 客户端库的一部分。然后，我们创建了一个 socket 实例，并监听 connect 和 disconnect 事件。在 connect 事件回调函数中，我们简单地打印下连接成功的信息，在 disconnect 事件回调函数中也只是简单打印一下信息。
现在，我们再次启动服务器，打开浏览器连接到它。在控制台中，我们应该能够看到 Connected 消息。这意味着客户端成功地与服务器建立了连接。
发送消息
在客户端和服务器之间发送消息是 Socket.IO 的核心功能之一。我们可以使用 socket.emit 和 socket.on 实现这个过程。在服务器端，我们可以使用 socket.emit 方法来在特定的事件上向客户端发送消息。客户端收到消息后，会在 socket.on 方法注册的回调函数中执行相应行为。以下是一个简单的示例，用于向客户端发送一条初始消息：
io.on('connection', (socket) => {
console.log('A user connected')
socket.on('disconnect', () => console.log('A user disconnected'))
socket.emit('message', 'Welcome to Socket.IO!')
})在客户端中，我们可以通过 socket.on 方法注册一个事件监听器，接收来自服务器发送的消息。下面是示例：
const socket = io()
socket.on('message', (data) => {
console.log(data)
})可以看到，在这个例子中，我们注册了一个 message 事件监听器，并在接收到消息后输出它到控制台中。
广播消息
广播消息是指将消息发送给所有连接的客户端。在 Socket.IO 中，我们可以使用 io.emit 方法来实现这个过程。以下是一个简单的示例，用于向所有连接的客户端广播一个 hello 消息：
io.on('connection', (socket) => {
console.log('A user connected')
socket.on('disconnect', () => console.log('A user disconnected'))
io.emit('hello', 'Hello everyone!')
})在客户端中，我们可以通过同样的方法注册一个事件监听器，接收来自服务器广播的消息：
const socket = io()
socket.on('hello', (data) => {
console.log(data)
})总结
在本文中，我们详细介绍了如何在 Fastify 中使用 Socket.IO 进行双向通信。我们首先介绍了 Socket.IO 的基本概念和用法，然后演示了如何将 Socket.IO 与 Fastify 集成，以便在服务器和客户端之间建立实时通信。最后，我们实现了消息发送和广播功能，并提供了完整的示例代码。我们相信这篇文章能帮助你更好地理解 Socket.IO 和 Fastify，并加深对于双向通信的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645ee6f2968c7c53b0111ce0