【迪极通慧】-教程：使用Node.js和WebSocket实现简单群聊功能

WebSocket是一种在Web应用程序中实现双向通信的协议，它提供了实时性和高效性。本教程将指导您如何使用Node.js和WebSocket库来构建一个简单的群聊应用程序。

1.初始化项目首先，确保已经安装了Node.js。然后，在您选择的目录下创建一个新的项目文件夹，并打开命令行工具进入该目录。

mkdir websocket-chat
cd websocket-chat

然后，通过以下命令初始化Node.js项目并安装WebSocket库：

npm init -y
npm install ws

2.创建服务器文件在项目文件夹中创建一个名为server.js的服务器文件，并使用以下代码编写基本的WebSocket服务器逻辑：

const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 存储连接的客户端
const clients = new Set();

// 监听连接事件
wss.on('connection', (ws) => {
  // 将客户端加入到连接列表
  clients.add(ws);

  // 监听消息事件
  ws.on('message', (message) => {
    // 广播消息给所有客户端
    clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  // 监听断开连接事件
  ws.on('close', () => {
    // 将客户端从连接列表中移除
    clients.delete(ws);
  });
});

3.启动服务器在命令行中运行以下命令来启动WebSocket服务器：

node server.js

服务器将在端口8080上启动，并等待客户端的连接。

4.创建客户端界面在项目文件夹中创建一个名为index.html的HTML文件，并使用以下代码编写基本的客户端界面：

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Chat</title>
</head>
<body>
  <input type="text" id="messageInput" placeholder="Enter your message">
  <button onclick="sendMessage()">Send</button>

  <ul id="messageList"></ul>

  <script>
    const socket = new WebSocket('ws://localhost:8080');

    // 监听消息事件
    socket.addEventListener('message', (event) => {
      const message = event.data;
      const listItem = document.createElement('li');
      listItem.textContent = message;
      document.getElementById('messageList').appendChild(listItem);
    });

    // 发送消息
    function sendMessage() {
      const input = document.getElementById('messageInput');
      const message = input.value;
      socket.send(message);
      input.value = '';
    }
  </script>
</body>
</html>