Fastify 中如何使用 WebSocket 实现即时聊天室

介绍

在现代的 Web 应用程序中，实时通信变得越来越重要。WebSocket 是一种用于实现双向通信的协议，它的出现让 Web 应用程序能够更自然地支持实时通信。在本文中，我将向您展示如何在 Fastify 中使用 WebSocket 实现即时聊天室，帮助您实现更好的用户体验和功能。

WebSocket 简介

WebSocket 是一种能够在客户端和服务端之间进行双向通信的协议。它的优点在于减少了网络上的 HTTP 请求次数，因为，一旦在 WebSocket 连接建立后，不需要再次建立连接。对于实时通信需求较高的应用程序，比如聊天室、实时游戏等，使用 WebSocket 能够在性能和用户体验上带来巨大的优势。

Fastify 框架

Fastify 是一个快速、低内存占用的 Web 框架。它通过最小化依赖项以及其他的一些优化措施，能够让你的 Web 应用程序变得更快，同时保持易于维护的代码质量。使用 Fastify 结合 WebSocket，能够帮助我们更好地处理和管理实时通信和 Web 应用程序。

实现方式

在本节中，我将向您展示如何在 Fastify 中使用 WebSocket。我们将通过创建一个简单的聊天室应用程序来展示如何使用 WebSocket 与 Fastify。这里采用的是 fastify-websocket 这个库实现 WebSocket 的功能。

安装依赖

首先，我们需要安装 Fastify 及相关依赖项：

npm i fastify fastify-websocket

实现 WebSocket

以下是实现 WebSocket 功能的代码，主要表现在 WebSocket 连接的建立、断开和消息的传递上。

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

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

// WebSocket 连接处理
fastify.get('/chat', { websocket: true }, (connection, req) => {
    connection.socket.on('message', message => {
        // 处理消息，并将消息广播到聊天室中的所有客户端
        fastify.websocketServer.clients.forEach(client => {
            if (client.readyState === 1) {
                client.send(message);
            }
        });
    });
    connection.socket.on('close', () => {
        console.log('WebSocket 连接关闭');
    });
});

// 启动服务器
fastify.listen(3000, err => {
    if (err) {
        fastify.log.error(err);
        process.exit(1);
    }
    console.log('服务器已启动');
})

我们在服务器中创建了一个 WebSocket 连接处理程序。在客户端建立 WebSocket 连接后，传递过来的消息会被处理，并将其广播到聊天室中的所有客户端。

实现前端页面

以下是聊天室前端页面的代码：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>Fastify WebSocket Chat</title>
</head>
<body>
    <h1>Fastify WebSocket Chat</h1>
    <div id="chat-messages"></div>
    <form id="chat-form">
        <input type="text" id="chat-input" placeholder="输入消息">
        <button type="submit">发送</button>
    </form>
    <script>
        const serverUrl = 'ws://localhost:3000/chat';
        const messagesContainer = document.getElementById('chat-messages');
        const chatForm = document.getElementById('chat-form');
        const chatInput = document.getElementById('chat-input');
        const socket = new WebSocket(serverUrl);

        socket.addEventListener('open', event => {
            console.log('WebSocket 连接已经建立');
        });
        socket.addEventListener('message', event => {
            const messageElem = document.createElement('div');
            messageElem.textContent = event.data;
            messagesContainer.appendChild(messageElem);
        });

        chatForm.addEventListener('submit', event => {
            event.preventDefault();
            const message = chatInput.value;
            socket.send(message);
            chatInput.value = '';
        });
    </script>
</body>
</html>

这里定义了一个表单，允许用户在输入框中输入消息，并将其发送到服务器中。然后，将事件监听器附加到 WebSocket套接字对象，以便我们能够从服务器中接收传入的消息。当我们接收到一条新消息时，将其附加到页面中的消息容器上。

结论和总结

在本文中，我们已经成功地使用 Fastify 和 WebSocket 创建了一个即时聊天室。这个聊天室是服务器端和客户端之间实时双向通信的一个很好的例子。我们采用最小依赖来减少开发成本，在简化代码逻辑的同时，也兼顾了性能。我相信这个例子将对你的项目有所帮助，因为它可以提高你的应用程序的实时通信能力，让您的用户体验更好。

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