当前位置：首页 > JavaScript

js实现聊天

2026-03-01 12:12:58JavaScript

实现WebSocket聊天室

使用WebSocket协议可以实现实时双向通信，适合聊天场景。以下是一个简单的实现示例：

前端代码

const socket = new WebSocket('ws://your-server-address');

socket.onopen = () => {
  console.log('连接已建立');
  socket.send('用户加入聊天');
};

socket.onmessage = (event) => {
  const message = document.createElement('div');
  message.textContent = event.data;
  document.getElementById('chat-box').appendChild(message);
};

document.getElementById('send-btn').addEventListener('click', () => {
  const input = document.getElementById('message-input');
  socket.send(input.value);
  input.value = '';
});

后端Node.js代码

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());
      }
    });
  });
});

使用Socket.io简化实现

Socket.io提供了更简单的API和自动重连等功能：

js实现聊天

前端

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

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 = '';
});

后端

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('chat message', (msg) => {
    io.emit('chat message', msg);
  });
});

实现基本功能扩展

添加用户昵称功能：

js实现聊天

// 前端
socket.emit('set nickname', '用户昵称');

// 后端
socket.on('set nickname', (nickname) => {
  socket.nickname = nickname;
});

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

添加消息时间戳：

function formatTime(date) {
  return date.toLocaleTimeString();
}

io.emit('chat message', {
  text: msg,
  nickname: socket.nickname,
  time: formatTime(new Date())
});

实现消息持久化

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

const mongoose = require('mongoose');
const Message = mongoose.model('Message', {
  text: String,
  user: String,
  createdAt: { type: Date, default: Date.now }
});

io.on('connection', (socket) => {
  Message.find().sort('-createdAt').limit(10).exec((err, messages) => {
    socket.emit('load messages', messages.reverse());
  });

  socket.on('chat message', (msg) => {
    const message = new Message({ text: msg, user: socket.nickname });
    message.save();
    io.emit('chat message', msg);
  });
});

添加用户在线状态

跟踪在线用户：

let users = {};

io.on('connection', (socket) => {
  socket.on('new user', (nickname) => {
    users[socket.id] = nickname;
    io.emit('user joined', nickname);
    io.emit('update users', Object.values(users));
  });

  socket.on('disconnect', () => {
    const nickname = users[socket.id];
    delete users[socket.id];
    io.emit('user left', nickname);
    io.emit('update users', Object.values(users));
  });
});

这些代码示例展示了如何实现基本的聊天功能，可以根据需求进一步扩展如私聊、表情支持、文件传输等功能。

标签: js