当前位置：首页 > JavaScript

js 实现网页聊天

2026-03-01 08:25:46JavaScript

实现网页聊天功能

网页聊天功能可以通过前端JavaScript结合后端服务实现。以下是一个基于WebSocket的简单实现方案：

js 实现网页聊天

前端HTML结构

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

基本CSS样式

#chat-container {
  width: 400px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 20px;
}

#messages {
  height: 300px;
  overflow-y: scroll;
  margin-bottom: 10px;
  border: 1px solid #eee;
  padding: 10px;
}

#message-input {
  width: 70%;
  padding: 8px;
}

#send-button {
  width: 25%;
  padding: 8px;
}

JavaScript实现

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

// 消息显示区域
const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('message-input');
const sendButton = document.getElementById('send-button');

// 接收消息处理
socket.onmessage = function(event) {
  const message = document.createElement('div');
  message.textContent = event.data;
  messagesDiv.appendChild(message);
  messagesDiv.scrollTop = messagesDiv.scrollHeight;
};

// 发送消息处理
sendButton.addEventListener('click', () => {
  const message = messageInput.value;
  if (message.trim()) {
    socket.send(message);
    messageInput.value = '';
  }
});

// 回车键发送
messageInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    sendButton.click();
  }
});

// 连接错误处理
socket.onerror = function(error) {
  console.error('WebSocket错误:', error);
};

// 连接关闭处理
socket.onclose = function() {
  console.log('连接已关闭');
};

后端实现方案

对于后端，可以使用Node.js的WebSocket库：

js 实现网页聊天

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

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    // 广播消息给所有客户端
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message.toString());
      }
    });
  });
});

替代方案：使用Socket.io

对于更复杂的应用，可以使用Socket.io库：

// 前端
const socket = io();
socket.on('chat message', function(msg) {
  // 显示消息
});

document.getElementById('send-button').addEventListener('click', function() {
  socket.emit('chat message', messageInput.value);
});

// 后端
const io = require('socket.io')(server);
io.on('connection', function(socket) {
  socket.on('chat message', function(msg) {
    io.emit('chat message', msg);
  });
});

数据存储考虑

如果需要持久化聊天记录，可以在后端添加数据库支持：

// 使用MongoDB示例
const mongoose = require('mongoose');
const Message = mongoose.model('Message', { 
  content: String, 
  timestamp: Date 
});

wss.on('connection', function(ws) {
  ws.on('message', async function(message) {
    const msg = new Message({ 
      content: message.toString(), 
      timestamp: new Date() 
    });
    await msg.save();

    // 广播消息
    wss.clients.forEach(function(client) {
      client.send(message.toString());
    });
  });
});