使用 Fastify 和 Socket.io 构建实时聊天-JavaScript中文网-JavaScript教程资源分享门户

前言

实时聊天是现代化的应用程序设计中不可或缺的特性。然而，要实现实时聊天的功能是挑战性的，因为它需要不仅仅是一个可靠的通讯协议，还需要一个高效的框架来处理网络请求和事件。

Fastify 是一个适用于 Web 应用程序的高性能 Node.js 框架，而 Socket.io 是一个流行的实时通讯库。在本文中，我们将会讨论如何结合使用这两个技术来构建实时聊天应用程序。

步骤 1：安装和设置

首先，我们需要安装 Node.js 和 NPM，以及 Fastify 和 Socket.io。可以通过以下命令在命令行中进行安装：

npm install fastify socket.io

接下来，我们需要创建一个新的 Fastify 应用程序并引入 Socket.io：

const fastify = require('fastify')();
const io = require('socket.io')(fastify.server);

这样我们就有了一个 Fastify 应用程序和一个 Socket.io 服务器。现在，我们需要定义一个路由来呈现聊天页面：

fastify.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

在这里，我们发送一个 index.html 文件，它将包含聊天窗口和聊天表单。

步骤 2：创建 Socket.io 事件

Socket.io 通过事件机制进行通讯。我们需要创建事件来处理特定的行为，例如：发送聊天消息或加入聊天室。

// javascriptcn.com 代码示例
io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
  
  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

在这里，我们定义了三个事件：

当用户连接到 Socket.io 服务器时，将打印一条消息。
当用户断开连接时，将打印另一条消息。
当客户端发送一个 'chat message' 事件时，将打印收到的消息并将它广播给所有连接的客户端。

步骤 3：创建聊天表单

下一步，我们需要创建一个表单来允许用户输入聊天消息。在 index.html 文件中，我们添加以下代码：

<form id="chat-form">
  <input id="chat-input" autocomplete="off" />
  <button type="submit">Send</button>
</form>

现在，我们需要用 JavaScript 代码来侦听发送消息的事件。

// javascriptcn.com 代码示例
const chatInput = document.getElementById('chat-input');
const chatForm = document.getElementById('chat-form');

chatForm.addEventListener('submit', (event) => {
  event.preventDefault();
  const message = chatInput.value;
  socket.emit('chat message', message);
  chatInput.value = '';
});

我们使用了 document.getElementById 函数来获取聊天表单的输入元素所表示的 DOM 元素。然后，我们使用 addEventListener 函数来监听 'submit' 事件，以防止表单被默认提交。最后，当表单提交时，我们发送一个 'chat message' 事件给 Socket.io 服务器。

步骤 4：使用 CSS 和 JavaScript 来美化聊天界面

最后，我们需要使用 CSS 和 JavaScript 为我们的聊天窗口做些美化。在 index.html 文件中，我们添加以下代码：

<ul id="chat-list"></ul>

我们将使用 JavaScript 代码来在聊天窗口中添加新消息。为了完成这个任务，我们需要创建一个自定义事件，一个新的列表项，并将其添加到聊天列表中。

socket.on('chat message', (msg) => {
  const chatList = document.getElementById('chat-list');
  const newMessage = document.createElement('li');
  newMessage.textContent = msg;
  chatList.appendChild(newMessage);
});

我们还需要一些 CSS 来使聊天窗口看起来更漂亮。可以使用以下代码作为您自己的 CSS 文件：

#chat-list { 
  max-height: 300px; 
  overflow-y: scroll; 
}

这段代码将给聊天列表添加垂直滚动条，以便用户可以滚动并查看过去的聊天记录。

总结

在本文中，我们学习了如何使用 Fastify 和 Socket.io 来创建实时聊天应用程序。我们探讨了从安装和设置到定义事件和创建聊天窗口的整个过程。无论是在学习还是在实际编写应用程序时，这些概念和代码示例都将为您提供极大的帮助。

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