当前位置：首页 > JavaScript

js实现群聊

2026-03-14 01:09:13JavaScript

实现群聊的基本思路

使用WebSocket技术建立实时双向通信，后端可选择Node.js配合Socket.io库简化开发。前端通过JavaScript监听和触发事件实现消息收发。

后端实现（Node.js + Socket.io）

安装依赖：

npm install express socket.io

创建服务器：

const express = require('express');
const socketio = require('socket.io');
const app = express();
const server = app.listen(3000);
const io = socketio(server);

io.on('connection', (socket) => {
  socket.on('join', (username) => {
    socket.username = username;
    socket.broadcast.emit('message', `${username} joined the chat`);
  });

  socket.on('chat', (message) => {
    io.emit('message', `${socket.username}: ${message}`);
  });

  socket.on('disconnect', () => {
    if (socket.username) {
      io.emit('message', `${socket.username} left the chat`);
    }
  });
});

前端实现

HTML结构：

<div id="chat">
  <div id="messages"></div>
  <input id="input" placeholder="Type a message..."/>
</div>

JavaScript逻辑：

const socket = io();
const messages = document.getElementById('messages');
const input = document.getElementById('input');

const username = prompt('Enter your name:');
socket.emit('join', username);

input.addEventListener('keypress', (e) => {
  if (e.key === 'Enter' && input.value) {
    socket.emit('chat', input.value);
    input.value = '';
  }
});

socket.on('message', (msg) => {
  const item = document.createElement('div');
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});

功能扩展建议

添加用户列表显示：

// 后端
const users = new Set();
io.on('connection', (socket) => {
  socket.on('join', (username) => {
    users.add(username);
    io.emit('users', Array.from(users));
  });

  socket.on('disconnect', () => {
    users.delete(socket.username);
    io.emit('users', Array.from(users));
  });
});

// 前端
socket.on('users', (userList) => {
  document.getElementById('user-list').innerHTML = 
    userList.map(user => `<li>${user}</li>`).join('');
});

添加消息持久化：

js实现群聊

// 后端
const messageHistory = [];
io.on('connection', (socket) => {
  socket.emit('history', messageHistory);

  socket.on('chat', (message) => {
    const fullMessage = `${socket.username}: ${message}`;
    messageHistory.push(fullMessage);
    if (messageHistory.length > 100) messageHistory.shift();
    io.emit('message', fullMessage);
  });
});