使用 Node.js 和 WebSocket 打造实时聊天室

本文介绍如何创建一个自己的实时聊天室。想象一下，在一个舒适的数字空间里，信息飞来飞去，人们通过浏览器毫不费力地连接在一起，就像在聊天一样。这就是 WebSockets 的魔力，它是传统 HTTP 协议的超酷现代替代方案，让我们的聊天线路保持畅通，实现即时通信。

为我们的编码之旅搭建舞台

想象一下：多个浏览器标签页，每个标签页都是通向我们活跃聊天室的网关，让实时对话得以展开。我们将仅使用两个主要组件来打造这种体验：后台的 server.js 和前台的 index.html。

为了给聊天室提供动力，我们将利用 Express 服务器的简易性，并结合 ws 库（Node.js 的 WebSocket 美妙实现）。最棒的是什么？我们将在前端使用 JavaScript，使其保持简洁明了，无需框架，因为现代浏览器已经支持 WebSocket。

准备工具

先建立项目环境：

1. 打开终端，为项目创建一个新目录：

mkdir websockets cd websockets touch server.js touch index.html

2. 初始化 Node.js 项目并安装必要的软件包

npm init -y npm install express ws nodemon

3. 更新 package.json，添加启动脚本：

"scripts": { "start": "nodemon server.js" }

制作主服务器

主服务器只有一个任务：向任何要求我们提供 index.html 的人提供服务。下面就来看看它有多简单：

const express = require('express');
const path = require('path');
const app = express();

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

const port = 8765;
app.listen(port, () => {
  console.log(`Server ready at http://localhost:${port}`);
});

请记住，WebSocket 服务器将是一个独立的实体，但现在，让我们专注于启动和运行网页。

启动 WebSocket 服务器

真正的好戏才刚刚开始。在 server.js 中，引入 WebSocket 服务器：

const WebSocket = require('ws');
const socketServer = new WebSocket.Server({ port: 3030 });

socketServer.on('connection', (socketClient) => {
  console.log('A user connected');
  console.log('Total connected clients:', socketServer.clients.size);

  socketClient.on('close', () => {
    console.log('A user disconnected');
    console.log('Remaining connected clients:', socketServer.clients.size);
  });
});

每次有客户端连接，我们都会在控制台日志中表示庆祝，并在他们离开时向他们道别。我们的 WebSocket 服务器监听端口为 3030，与主服务器分开。

从客户端启动对话

现在，让 index.html 开始与 WebSocket 服务器对话：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Websocket Chat Room</title>
</head>
<body>
  <input id="name" placeholder="Enter your name" />
  <textarea id="message" placeholder="Type your message here"></textarea>
  <button onclick="sendMessage()">Send</button>
  <div id='messages'></div>

  <script>
    const ws = new WebSocket('ws://localhost:3030');
    ws.onopen = () => {
      console.log('Connected to the chat server');
    };
  </script>
</body>
</html>

当页面加载完成后，它会立即与服务器建立 WebSocket 连接。一旦连接打开，我们就可以开始工作了！

进行双向对话

为了让聊天室真正活跃起来，我们需要让消息双向流动。当用户发送消息时，服务器会将其转发给所有已连接的客户端。以下是如何在服务器上处理传入和传出消息的简化版本：

const messages = [];

socketServer.on('connection', (socketClient) => {
  socketClient.send(JSON.stringify(messages)); // Send existing messages to the new client
  
  socketClient.on('message', (message) => {
    messages.push(message); // Save new message
    socketServer.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify([message])); // Relay new message to all clients
      }
    });
  });
});

在客户端，我们需要能够向服务器发送消息，并显示收到的消息：

<script>
  // Existing script...

  ws.onmessage = (event) => {
    const newMessages = JSON.parse(event.data);
    newMessages.forEach((message) => {
      // Add code here to display the message on the page
    });
  };

  function sendMessage() {
    const name = document.getElementById('name').value || 'Anonymous';
    const message = document.getElementById('message').value;
    ws.send(`${name}: ${message}`);
    document.getElementById('message').value = ''; // Clear the message input
  }
</script>

开始聊天

恭喜您已经为自己的实时聊天室奠定了基础！但不要止步于此，还有更多内容等着你去探索。添加功能、试验代码、深入研究 WebSocket API 文档，拓展你的视野。

本文来自作者投稿，版权归原作者所有。如需转载，请注明出处：https://www.nxrte.com/jishu/im/39820.html