当前位置：首页 > news >正文

【简易聊天室】使用 HTML、CSS、JavaScript 结合 WebSocket 技术实现

news 2025/11/6 8:30:35

本人能力有限，如有错误之处，还望指正

要制作一个简易聊天室，我们可以使用 HTML、CSS、JavaScript 结合 WebSocket 技术实现。
以下是一个完整的实现方案，包含前端界面和后端服务：

源代码：https://pan.quark.cn/s/e7d47e664d46
百度网盘下载：聊天室
链接:https://pan.baidu.com/s/1ma4D42PJk01dtCFyuh5_3w?pwd=ichd 提取码:ichd

1. 前端实现（HTML + CSS + JavaScript）

创建 index.html 文件，实现聊天界面和客户端逻辑：


<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简易聊天室</title><style>body {font-family: Arial, sans-serif;max-width: 800px;margin: 0 auto;padding: 20px;}.chat-title {text-align: center;color: #333;margin-bottom: 20px;}#chat-container {border: 1px solid #ccc;border-radius: 5px;padding: 10px;height: 500px;display: flex;flex-direction: column;}#messages {flex: 1;overflow-y: auto;margin-bottom: 10px;padding: 10px;border: 1px solid #eee;border-radius: 4px;}.message {margin: 5px 0;padding: 8px;border-radius: 4px;}.other {background-color: #f0f0f0;}.self {background-color: #e1f5fe;text-align: right;}#input-area {display: flex;gap: 10px;}#username {width: 120px;padding: 8px;border: 1px solid #ccc;border-radius: 4px;}#message-input {flex: 1;padding: 8px;border: 1px solid #ccc;border-radius: 4px;}#send-btn {padding: 8px 16px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;}#send-btn:hover {background-color: #45a049;}</style>
</head>
<body><h1 class="chat-title">简易聊天室</h1> <!-- 标题 --><div id="chat-container"><div id="messages"></div><div id="input-area"><input type="text" id="username" placeholder="你的名字"><input type="text" id="message-input" placeholder="输入消息..."><button id="send-btn">发送</button></div></div><script>// 连接WebSocket服务器（根据后端地址修改）const ws = new WebSocket('ws://localhost:8080');const messagesDiv = document.getElementById('messages');const usernameInput = document.getElementById('username');const messageInput = document.getElementById('message-input');const sendBtn = document.getElementById('send-btn');// 接收消息ws.onmessage = (event) => {const data = JSON.parse(event.data);const messageDiv = document.createElement('div');messageDiv.className = `message ${data.isSelf ? 'self' : 'other'}`;messageDiv.innerHTML = `<strong>${data.username}</strong>: ${data.content}`;messagesDiv.appendChild(messageDiv);// 滚动到底部messagesDiv.scrollTop = messagesDiv.scrollHeight;};// 发送消息function sendMessage() {const username = usernameInput.value.trim() || '匿名用户';const content = messageInput.value.trim();if (content) {ws.send(JSON.stringify({ username, content }));messageInput.value = '';}}// 绑定事件sendBtn.addEventListener('click', sendMessage);messageInput.addEventListener('keypress', (e) => {if (e.key === 'Enter') sendMessage();});// 连接状态提示ws.onopen = () => {console.log('连接成功');};ws.onclose = () => {console.log('连接关闭');alert('与服务器断开连接，请刷新页面重试');};ws.onerror = (error) => {console.error('连接错误:', error);};</script>
</body>
</html>

2. 后端实现（Node.js + WebSocket）

安装nodejs可以参考这篇文章：
https://blog.csdn.net/weixin_53197693/article/details/151796516?spm=1001.2014.3001.5501

创建服务器文件 `server.js`

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });// 存储所有连接的客户端
const clients = new Set();wss.on('connection', (ws) => {console.log('新客户端连接');clients.add(ws);// 接收客户端消息并转发给所有连接的客户端ws.on('message', (data) => {const message = JSON.parse(data.toString());// 向每个客户端发送消息（标记是否为自己发送）clients.forEach((client) => {if (client.readyState === WebSocket.OPEN) {client.send(JSON.stringify({...message,isSelf: client === ws  // 标记是否为当前发送者}));}});});// 客户端断开连接时移除ws.on('close', () => {console.log('客户端断开连接');clients.delete(ws);});// 错误处理ws.on('error', (error) => {console.error('WebSocket错误:', error);});
});console.log('WebSocket服务器运行在 ws://localhost:8080');