当前位置：首页 > JavaScript

js 实现聊天

2026-04-06 17:08:41JavaScript

实现 WebSocket 基础聊天

WebSocket 是实现实时聊天的核心技术，以下是一个基础实现示例：

// 客户端代码
const socket = new WebSocket('ws://your-server-address');

socket.onopen = () => {
  console.log('连接已建立');
  socket.send('Hello Server!');
};

socket.onmessage = (event) => {
  console.log('收到消息:', event.data);
  // 将消息显示在聊天界面
  document.getElementById('chat').innerHTML += `<div>${event.data}</div>`;
};

// 发送消息函数
function sendMessage() {
  const message = document.getElementById('message').value;
  socket.send(message);
}

使用 Socket.IO 库

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

// 客户端
const socket = io('http://your-server-address');

socket.on('connect', () => {
  console.log('已连接');
});

socket.on('chat message', (msg) => {
  document.getElementById('chat').innerHTML += `<div>${msg}</div>`;
});

function sendMessage() {
  const message = document.getElementById('message').value;
  socket.emit('chat message', message);
}

服务器端实现 (Node.js + Express)

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) => {
  console.log('新用户连接');

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg); // 广播给所有客户端
  });
});

添加用户身份标识

为消息添加发送者信息：

// 客户端发送
socket.emit('chat message', {
  user: '用户名',
  text: message,
  time: new Date()
});

// 服务器广播
socket.on('chat message', (data) => {
  io.emit('chat message', data);
});

// 客户端接收
socket.on('chat message', (data) => {
  const messageHTML = `
    <div class="message">
      <span class="user">${data.user}</span>
      <span class="text">${data.text}</span>
      <span class="time">${formatTime(data.time)}</span>
    </div>
  `;
  chatContainer.innerHTML += messageHTML;
});

实现私聊功能

// 服务器端
socket.on('private message', ({ to, message }) => {
  io.to(to).emit('private message', {
    from: socket.id,
    message
  });
});

// 客户端
function sendPrivateMessage() {
  const toUserId = document.getElementById('recipient').value;
  const message = document.getElementById('message').value;
  socket.emit('private message', {
    to: toUserId,
    message
  });
}

添加消息持久化

使用数据库存储聊天记录：

// 使用MongoDB示例
const Message = require('./models/Message');

io.on('connection', (socket) => {
  socket.on('chat message', async (data) => {
    // 保存到数据库
    const message = new Message({
      user: data.user,
      text: data.text,
      time: new Date()
    });
    await message.save();

    // 广播消息
    io.emit('chat message', data);
  });
});

前端界面优化

基础聊天界面HTML结构：

js 实现聊天

<div id="chat-container">
  <div id="messages"></div>
  <input type="text" id="message-input" placeholder="输入消息...">
  <button id="send-button">发送</button>
</div>

<style>
  #chat-container {
    width: 400px;
    margin: 0 auto;
  }
  #messages {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
  }
  .message {
    margin-bottom: 8px;
  }
  .user {
    font-weight: bold;
    margin-right: 5px;
  }
  .time {
    color: #666;
    font-size: 0.8em;
    margin-left: 5px;
  }
</style>

标签: js