当前位置：首页 > JavaScript

js实现在线即时聊天

2026-01-30 20:13:45JavaScript

使用WebSocket实现即时聊天

WebSocket是一种在单个TCP连接上进行全双工通信的协议，适合实时聊天应用。

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

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

socket.onmessage = (event) => {
    const chatBox = document.getElementById('chat-box');
    chatBox.innerHTML += `<div>${event.data}</div>`;
};

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

使用Socket.io库简化开发

Socket.io是建立在WebSocket之上的库，提供了更简单的API和自动重连等功能。

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

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

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

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

服务器端实现（Node.js + Express）

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
    console.log('新用户连接');

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

    socket.on('disconnect', () => {
        console.log('用户断开连接');
    });
});

server.listen(3000, () => {
    console.log('服务器运行在端口3000');
});

前端界面基本结构

<div id="chat-box" style="height: 300px; overflow-y: scroll;"></div>
<input id="message-input" type="text" placeholder="输入消息">
<button onclick="sendMessage()">发送</button>

实现用户身份识别

为每个连接的用户添加唯一标识和昵称。

// 服务器端
io.on('connection', (socket) => {
    socket.on('set nickname', (nickname) => {
        socket.nickname = nickname;
        io.emit('chat message', `${nickname} 加入了聊天`);
    });

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

消息历史记录功能

服务器可以存储最近的聊天记录，新用户连接时发送历史消息。

const messageHistory = [];
const MAX_HISTORY = 100;

io.on('connection', (socket) => {
    socket.emit('history', messageHistory);

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

客户端优化处理

添加消息发送后的输入框清空和滚动到底部功能。

function sendMessage() {
    const messageInput = document.getElementById('message-input');
    const message = messageInput.value;
    if (message.trim()) {
        socket.emit('chat message', message);
        messageInput.value = '';
        scrollToBottom();
    }
}

function scrollToBottom() {
    const chatBox = document.getElementById('chat-box');
    chatBox.scrollTop = chatBox.scrollHeight;
}

安全性考虑

实现基本的输入过滤和验证。

js实现在线即时聊天

// 服务器端
socket.on('chat message', (msg) => {
    if (typeof msg !== 'string' || msg.length > 500) {
        return;
    }
    const filteredMsg = msg.replace(/<[^>]*>?/gm, '');
    io.emit('chat message', `${socket.nickname}: ${filteredMsg}`);
});