当前位置：首页 > JavaScript

js实现聊天室

2026-03-01 19:48:50JavaScript

使用 WebSocket 实现基础聊天室

WebSocket 是 HTML5 提供的全双工通信协议，适合实时聊天场景。以下是一个基础实现方案：

服务端（Node.js + ws 库）

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

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message.toString());
      }
    });
  });
});

客户端

const ws = new WebSocket('ws://localhost:8080');
ws.onopen = () => console.log('Connected');
ws.onmessage = (e) => {
  const chatBox = document.getElementById('chat');
  chatBox.innerHTML += `<div>${e.data}</div>`;
};

function sendMessage() {
  const input = document.getElementById('message');
  ws.send(input.value);
  input.value = '';
}

使用 Socket.IO 增强功能

Socket.IO 提供了更强大的功能包括自动重连、房间支持等：

js实现聊天室

服务端

const io = require('socket.io')(3000);
io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

客户端

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
  socket.on('chat message', (msg) => {
    const item = document.createElement('li');
    item.textContent = msg;
    document.getElementById('messages').appendChild(item);
  });

  document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const input = document.getElementById('input');
    socket.emit('chat message', input.value);
    input.value = '';
  });
</script>

添加用户身份标识

为消息添加发送者信息：

js实现聊天室

// 服务端
socket.on('chat message', (data) => {
  io.emit('chat message', {
    user: socket.id.slice(0, 5),
    text: data.text,
    time: new Date().toLocaleTimeString()
  });
});

// 客户端显示
socket.on('chat message', (data) => {
  const msg = `${data.time} [${data.user}]: ${data.text}`;
  // 添加到聊天界面
});

实现私聊功能

通过房间机制实现私密对话：

// 加入房间
socket.on('join room', (room) => {
  socket.join(room);
});

// 房间消息
socket.on('private message', ({ room, text }) => {
  io.to(room).emit('private message', text);
});

前端界面示例

基础聊天界面结构：

<div id="chat-container">
  <div id="message-area"></div>
  <input type="text" id="message-input" placeholder="Type message...">
  <button onclick="sendMessage()">Send</button>
</div>

<style>
  #chat-container {
    width: 400px;
    margin: 0 auto;
  }
  #message-area {
    height: 300px;
    border: 1px solid #ccc;
    overflow-y: auto;
    margin-bottom: 10px;
  }
</style>

消息持久化方案

使用 MongoDB 存储历史消息：

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/chat');

const messageSchema = new mongoose.Schema({
  user: String,
  text: String,
  timestamp: { type: Date, default: Date.now }
});

const Message = mongoose.model('Message', messageSchema);

// 保存消息
socket.on('chat message', async (data) => {
  const msg = new Message(data);
  await msg.save();
  io.emit('chat message', data);
});

// 获取历史
app.get('/messages', async (req, res) => {
  const messages = await Message.find().sort('-timestamp').limit(50);
  res.json(messages);
});