使用WebSocket实现实时聊天需前后端协同。首先通过JavaScript创建WebSocket连接，实现消息发送与接收；接着用HTML和CSS构建包含消息区、输入框的界面；然后编写displayMessage函数动态展示本地与远程消息；最后搭建Node.js后端，利用ws库建立服务器，处理连接与消息广播。关键在于保持连接稳定并处理异常。
要在HTML中实现一个实时聊天窗口，核心是使用WebSocket协议建立客户端与服务器之间的双向通信。结合前端界面设计，可以构建出功能完整的聊天应用。下面详细介绍如何从零开始搭建一个简单的实时聊天窗口。
1. 使用WebSocket建立实时连接
WebSocket 是 HTML5 提供的一种全双工通信协议，允许浏览器与服务器之间持续通信，非常适合实时聊天场景。
在JavaScript中创建WebSocket连接非常简单：
const socket = new WebSocket('ws://localhost:8080');
// 连接成功时触发
socket.onopen = function(event) {
console.log('已连接到服务器');
};
// 接收服务器消息
socket.onmessage = function(event) {
displayMessage(event.data, 'remote');
};
// 发送消息
function sendMessage() {
const input = document.getElementById('messageInput');
const message = input.value;
if (message.trim()) {
socket.send(message);
displayMessage(message, 'local');
input.value = '';
}
}
注意：ws 是WebSocket协议的前缀，wss 是加密版本（类似https）。你需要一个支持WebSocket的后端服务（如Node.js + ws库、Python + websockets等）来处理连接和消息转发。
立即学习“前端免费学习笔记（深入）”；
2. 构建基础聊天界面（HTML + CSS）
一个基本的聊天界面包含消息显示区、输入框和发送按钮。
3. 实现消息显示逻辑
当用户发送消息或收到对方消息时，需要动态添加到消息区域。
function displayMessage(content, sender) {
const messageArea = document.getElementById('messageArea');
const messageElement = document.createElement('div');
messageElement.style.padding = '8px';
messageElement.style.marginBottom = '5px';
messageElement.style.borderRadius = '8px';
messageElement.style.maxWidth = '80%';
messageElement.style.wordWrap = 'break-word';
if (sender === 'local') {
messageElement.style.backgroundColor = '#007bff';
messageElement.style.color = 'white';
messageElement.style.alignSelf = 'flex-end';
messageElement.style.marginLeft = 'auto';
} else {
messageElement.style.backgroundColor = '#e5e5ea';
messageElement.style.color = 'black';
messageElement.style.alignSelf = 'flex-start';
}
messageElement.textContent = content;
messageArea.appendChild(messageElement);
messageArea.scrollTop = messageArea.scrollHeight; // 滚动到底部
}
4. 后端WebSocket服务示例（Node.js）
前端需要配合后端服务。以下是一个简单的Node.js WebSocket服务器示例：
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('新用户连接');
ws.on('message', (message) => {
console.log('收到消息:', message);
// 广播给所有连接的客户端
wss.clients.forEach((client) => {
if (client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.send('欢迎进入聊天室！');
});
使用 npm install ws 安装依赖后运行此脚本即可启动服务。
基本上就这些。通过HTML、JavaScript与WebSocket的结合，你可以快速构建一个实时聊天窗口。关键在于前后端连接稳定、消息格式清晰，并做好异常处理（如断线重连）。实际项目中可进一步加入用户名、时间戳、离线消息等功能。不复杂但容易忽略细节。
