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

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

要制作一个简易聊天室，我们可以使用 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 文件，实现聊天界面和客户端逻辑：

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`

javascript 复制代码

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