AI实现在线聊天室--06上篇： # AI实现在线聊天室--05 这篇在上篇基础上添加了发送图片的按钮和对应功能....

上篇： AI实现在线聊天室--05 这篇在上篇基础上添加了发送图片的按钮和对应功能。

1、当前文件目录结构

json

.
├── assets
│   ├── css
│   │   └── main.css
│   └── js
│       ├── message-input.js
│       ├── message.js
│       └── socket.js
├── index2.html
├── index.html

2、界面预览

3、完整代码

index2.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern WebSocket 聊天室</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="./assets/css/main.css">
    <script type="text/javascript" src="./assets/js/socket.js"></script>
    <script type="text/javascript" src="./assets/js/message.js"></script>
    <script type="text/javascript" src="./assets/js/message-input.js"></script>
</head>

<body>
    <div class="container">
        <div class="chat-app">
            <!-- 侧边栏 -->
            <div class="sidebar">
                <div class="app-header">
                    <div class="app-logo">
                        <i class="fas fa-comments"></i>
                        <span>Modern Chat</span>
                    </div>
                </div>

                <div class="user-profile">
                    <div class="avatar" id="user-avatar">U</div>
                    <div class="user-info">
                        <div class="username" id="sidebar-username">未设置用户名</div>
                        <div class="user-status">
                            <span class="status-dot"></span>
                            <span id="connection-status">离线</span>
                        </div>
                    </div>
                </div>

                <div class="user-list-title">其他在线用户 (<span id="online-count">0</span>)</div>
                <div class="user-list" id="user-list-container">
                    <!-- 用户列表将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 主聊天区域 -->
            <div class="chat-area">
                <div class="chat-header">
                    <div class="chat-title">群聊</div>
                </div>

                <div class="messages-container" id="messages-container">
                    <!-- 消息将通过JavaScript动态生成 -->
                    <div class="message system-message">
                        <div class="message-text">欢迎来到Modern Chat！请设置您的用户名开始聊天。</div>
                    </div>
                </div>

                <div class="input-area">
                    <!-- <input type="text" class="message-input" id="message-input" placeholder="输入消息..." disabled> -->
                    <div class="message-input" id="message-input" contenteditable="true" placeholder="输入消息..."></div>
                    <label for="file-input" class="file-button" title="发送图片">
                        <i class="fas fa-image"></i>
                    </label>
                    <input type="file" id="file-input" accept="image/*" style="display: none;"
                        onchange="imageSelect(event)">
                    <button class="send-button" id="send-button" disabled>
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 用户名设置弹窗 -->
    <div class="modal-overlay" id="username-modal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title">欢迎来到Modern Chat</div>
                <div class="modal-subtitle">请设置您的用户名以开始聊天</div>
            </div>
            <div class="form-group">
                <input type="text" class="form-input" id="username-input" placeholder="输入用户名" autofocus>
            </div>
            <button class="submit-button" id="set-username">开始聊天</button>
        </div>
    </div>

    <script>
        // 连接状态管理
        let socket = null;
        let isConnected = false;
        let isConnecting = false;
        let reconnectAttempts = 0;
        const MAX_RECONNECT_ATTEMPTS = 5;

        // 用户信息
        let username = '';
        let userColor = '';

        // DOM元素
        const messagesContainer = document.getElementById('messages-container');
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');
        const usernameInput = document.getElementById('username-input');
        const setUsernameButton = document.getElementById('set-username');
        const usernameModal = document.getElementById('username-modal');
        const userListContainer = document.getElementById('user-list-container');
        const sidebarUsername = document.getElementById('sidebar-username');
        const userAvatar = document.getElementById('user-avatar');
        const connectionStatus = document.getElementById('connection-status');
        const onlineCount = document.getElementById('online-count');
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            initWebSocket();
            initInputBox('message-input');


            // 确保事件监听器只绑定一次
            setUsernameButton.onclick = setUsername;
            usernameInput.onkeypress = (e) => {
                if (e.key === 'Enter') setUsername();
            };
            sendButton.onclick = sendMessage;
            messagesContainer.onclick = (e) => {
                const img = e.target.closest('.message-image');
                if (img) {
                    // 直接从src属性获取数据
                    showFullImage(img.src);
                }
            }
        });
    </script>
</body>

</html>

main.css

socket.js


// 初始化WebSocket连接
function initWebSocket() {
    if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) {
        return; // 如果已有活跃连接或正在连接，则不再创建新连接
    }

    isConnecting = true;
    socket = new WebSocket('ws://localhost:6002');

    // 清除旧的事件监听器（如果存在）
    socket.onopen = null;
    socket.onmessage = null;
    socket.onclose = null;
    socket.onerror = null;

    socket.onopen = (event) => {
        console.log('Connected to WebSocket server');
        isConnected = true;
        isConnecting = false;
        reconnectAttempts = 0;
        connectionStatus.textContent = '在线';

        // 如果已有用户名，重新发送用户信息
        if (username) {
            socket.send(JSON.stringify({
                type: 'setUsername',
                username: username,
                color: userColor
            }));
        }
    };

    socket.onmessage = (event) => {
        const data = JSON.parse(event.data);

        if (data.type === 'message') {
            addMessage(data);
        } else if (data.type === 'image') {
            addMessage(data);
        } else if (data.type === 'userList') {
            updateUserList(data.users);
            onlineCount.textContent = data.users.length > 0 ? data.users.length - 1 : data.users.length;
        }
    };

    socket.onclose = (event) => {
        console.log('Disconnected from WebSocket server');
        isConnected = false;
        isConnecting = false;
        connectionStatus.textContent = '离线';

        addSystemMessage('与服务器的连接已断开');

        // 禁用输入
        messageInput.disabled = true;
        sendButton.disabled = true;

        // 尝试重新连接（带指数退避）
        if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
            const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 30000); // 最大30秒
            reconnectAttempts++;
            console.log(`尝试重新连接 (${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})...`);
            setTimeout(initWebSocket, delay);
        } else {
            addSystemMessage('无法连接到服务器，请刷新页面重试');
        }
    };

    socket.onerror = (error) => {
        console.error('WebSocket error:', error);
        isConnecting = false;
    };
}

message-input.js

function initInputBox(eleId) {
    const messageInput = document.getElementById(eleId);
    messageInput
    // 处理粘贴事件（主要是图片）
    messageInput.addEventListener('paste', function (e) {
        e.preventDefault();

        // 检查剪贴板中是否有图片
        const items = (e.clipboardData || e.originalEvent.clipboardData).items;

        for (let i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
                const blob = items[i].getAsFile();
                const reader = new FileReader();

                reader.onload = function (event) {
                    // 创建img元素并插入到输入框
                    const img = document.createElement('img');
                    img.src = event.target.result;
                    img.setAttribute('data-image', 'true');

                    // 插入到当前光标位置
                    const selection = window.getSelection();
                    if (selection.rangeCount > 0) {
                        const range = selection.getRangeAt(0);
                        range.deleteContents();
                        range.insertNode(img);

                        // 在图片后添加换行并聚焦
                        const br = document.createElement('br');
                        range.insertNode(br);

                        // 移动光标到新位置
                        range.setStartAfter(br);
                        range.collapse(true);
                        selection.removeAllRanges();
                        selection.addRange(range);
                    } else {
                        messageInput.appendChild(img);
                        messageInput.appendChild(document.createElement('br'));
                    }
                };

                reader.readAsDataURL(blob);
                break; // 只处理第一个图片
            }
        }

        // 处理文本粘贴
        const text = (e.clipboardData || window.clipboardData).getData('text');
        if (text && text.trim() !== '') {
            document.execCommand('insertText', false, text);
        }
    });
    messageInput.onkeypress = (e) => {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendMessage();
        }
    };
}

function imageSelect(e) {
    const file = e.target.files[0];
    if (!file) return;

    if (!file.type.match('image.*')) {
        addSystemMessage('只能发送图片文件');
        return;
    }

    // 检查文件大小（限制为5MB）
    if (file.size > 5 * 1024 * 1024) {
        addSystemMessage('图片大小不能超过5MB');
        return;
    }

    const reader = new FileReader();
    reader.onload = (event) => {
        const imageData = event.target.result;

        // 如果是WebSocket连接状态良好
        if (socket && socket.readyState === WebSocket.OPEN) {
            // 先显示自己的图片消息（乐观更新）
            const tempMessage = {
                type: 'image',
                username: username,
                imageData: imageData,
                timestamp: new Date().toISOString(),
                color: userColor
            };
            addMessage(tempMessage);
            try {
                // 发送到服务器
                socket.send(JSON.stringify({
                    type: 'image',
                    imageData: imageData,
                    fileName: file.name
                }));
            } catch (error) {
                console.error('发送图片失败:', error);
                addSystemMessage('消息图片发送失败，请重试');
            }
        }
    };
    reader.readAsDataURL(file);

    // 重置input，允许重复选择同一文件
    e.target.value = '';
}

message.js


// 显示完整图片
function showFullImage(imageData) {
    // 检查是否已经存在大图查看器
    const existingViewer = document.querySelector('.image-container');
    if (existingViewer) {
        document.body.removeChild(existingViewer);
    }
    const container = document.createElement('div');
    container.className = 'image-container';
    container.innerHTML = `
            <img src="${imageData}" alt="完整图片">
        `;
    container.onclick = () => {
        document.body.removeChild(container);
    };
    container.onkeypress = () => {
        if (e.key === 'Escape') {
            document.body.removeChild(container);
        }
    };
    document.body.appendChild(container);
}

// 添加消息到聊天界面
function addMessage(data) {
    const messageEl = document.createElement('div');

    if (data.username === '系统') {
        messageEl.className = 'message system-message';
        messageEl.innerHTML = `
                    <div class="message-text">${data.content}</div>
                `;
    } else {
        const isOwnMessage = data.username === username;
        messageEl.className = `message ${isOwnMessage ? 'own-message' : ''}`;

        const avatarText = data.username.charAt(0).toUpperCase();
        const date = formatDate(data.timestamp);
        const time = formatTime(data.timestamp);
        let contentHtml = '';
        if (data.type === 'image') {
            contentHtml = `
                    <img src="${data.imageData}" class="message-image" alt="发送的图片">
            `;
        } else {
            contentHtml = data.content;
        }

        messageEl.innerHTML = `
                    <div class="message-avatar" style="background-color: ${data.color}">${avatarText}</div>
                    <div class="message-content">
                        <div class="message-info">
                            <div class="message-username" style="color: ${data.color}">${data.username}</div>
                            <div class="message-time">${date} ${time}</div>
                        </div>
                        <div class="message-text">${contentHtml}</div>
                    </div>
                `;
    }

    messagesContainer.appendChild(messageEl);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

// 添加系统消息
function addSystemMessage(text) {
    const messageEl = document.createElement('div');
    messageEl.className = 'message system-message';
    messageEl.innerHTML = `
                <div class="message-text">${text}</div>
            `;
    messagesContainer.appendChild(messageEl);
    messagesContainer.scrollTop = messagesContainer.scrollHeight;
}

// 更新用户列表
function updateUserList(users) {
    userListContainer.innerHTML = '';

    users.forEach(user => {
        if (user.username === username) return; // 不显示自己

        const userEl = document.createElement('div');
        userEl.className = 'user-item';
        userEl.innerHTML = `
                    <div class="avatar" style="background-color: ${user.color}">${user.username.charAt(0).toUpperCase()}</div>
                    <div class="user-info">
                        <div class="username">${user.username}</div>
                    </div>
                `;
        userListContainer.appendChild(userEl);
    });
}

// 格式化日期
function formatDate(timeStamp) {
    const date = new Date(timeStamp);
    return date.toLocaleDateString();
}

// 格式化时间
function formatTime(timestamp) {
    const date = new Date(timestamp);
    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}

// 生成随机颜色
function getRandomColor() {
    const colors = [
        '#4361ee', '#3f37c9', '#4895ef', '#4cc9f0',
        '#7209b7', '#b5179e', '#f72585', '#560bad',
        '#3a0ca3', '#480ca8', '#3a5a40', '#588157'
    ];
    return colors[Math.floor(Math.random() * colors.length)];
}

// 设置用户名
function setUsername() {
    const newUsername = usernameInput.value.trim();
    if (newUsername) {
        username = newUsername;
        userColor = getRandomColor();

        // 更新UI
        sidebarUsername.textContent = username;
        userAvatar.textContent = username.charAt(0).toUpperCase();
        userAvatar.style.backgroundColor = userColor;

        // 发送用户名到服务器
        if (socket && socket.readyState === WebSocket.OPEN) {
            socket.send(JSON.stringify({
                type: 'setUsername',
                username: newUsername,
                color: userColor
            }));
        }

        // 关闭弹窗
        usernameModal.style.display = 'none';

        // 启用消息输入
        messageInput.disabled = false;
        sendButton.disabled = false;
        messageInput.focus();

        addSystemMessage(`您已设置用户名为: ${username}`);
    }
}

// 发送消息
function sendMessage() {
    // const message = messageInput.value.trim();
    const message = messageInput.innerHTML.trim();
    if (message && socket && socket.readyState === WebSocket.OPEN) {
        // 先显示自己的消息（乐观更新）
        const tempMessage = {
            type: 'message',
            username: username,
            content: message,
            timestamp: new Date().toISOString(),
            color: userColor
        };
        addMessage(tempMessage);

        try {
            // 发送到服务器
            socket.send(JSON.stringify({
                type: 'message',
                content: message
            }));

            // 清空输入框
            // messageInput.value = '';
            messageInput.innerHTML = '';
        } catch (error) {
            console.error('发送消息失败:', error);
            addSystemMessage('消息发送失败，请重试');
        }
    }
}

server.js

const WebSocket = require('ws');
const http = require('http');

// 创建HTTP服务器
const server = http.createServer();
const wss = new WebSocket.Server({ server });

// 存储所有连接的客户端和用户名
const clients = new Map();

wss.on('connection', (ws) => {
    console.log('New client connected');

    // 为新连接分配一个默认用户名
    const defaultUsername = `User${Math.floor(Math.random() * 1000)}`;
    const userColor = getRandomColor();
    clients.set(ws, { username: defaultUsername, color: userColor });

    // 通知所有客户端有新用户加入
    broadcastUserList();

    ws.on('message', (message) => {
        try {
            const data = JSON.parse(message);
            // 检查消息大小（限制为5MB，Base64会比原文件大约1.37倍）
            if (data.content?.length > 7 * 1024 * 1024) {
                ws.send(JSON.stringify({
                    type: 'message',
                    username: '系统',
                    content: '消息太大，发送失败',
                    timestamp: new Date().toISOString(),
                    color: '#f00'
                }));
                return;
            }

            if (data.type === 'setUsername') {
                // 更新用户名
                const userData = clients.get(ws);
                userData.username = data.username;
                userData.color = data.color || userColor;
                clients.set(ws, userData);
                broadcastUserList();

                // 发送欢迎消息（不发送给新加入的用户自己）
                const welcomeMsg = {
                    type: 'message',
                    username: '系统',
                    content: `${data.username} 加入了聊天室`,
                    timestamp: new Date().toISOString(),
                    color: '#888'
                };
                broadcast(JSON.stringify(welcomeMsg), ws);
            } else if (data.type === 'message') {
                // 广播普通消息（不发送给消息来源的客户端）
                const userData = clients.get(ws);
                if (!userData) return;

                const msg = {
                    type: 'message',
                    username: userData.username,
                    content: data.content,
                    timestamp: new Date().toISOString(),
                    color: userData.color
                };
                broadcast(JSON.stringify(msg), ws);
            } else if (data.type === 'image') {
                // 图片消息处理
                const userData = clients.get(ws);
                if (!userData) return;

                // 检查图片大小（限制为6MB，Base64会比原文件大约1.37倍）
                if (data.imageData.length > 8 * 1024 * 1024) {
                    ws.send(JSON.stringify({
                        type: 'message',
                        username: '系统',
                        content: '图片太大，发送失败',
                        timestamp: new Date().toISOString(),
                        color: '#f00'
                    }));
                    return;
                }

                const msg = {
                    type: 'image',
                    username: userData.username,
                    imageData: data.imageData,
                    timestamp: new Date().toISOString(),
                    color: userData.color
                };
                broadcast(JSON.stringify(msg), ws);
            }
        } catch (e) {
            console.error('Error parsing message:', e);
        }
    });

    ws.on('close', () => {
        console.log('Client disconnected');
        const userData = clients.get(ws);
        if (userData) {
            // 通知所有客户端有用户离开（不发送给已断开的客户端）
            const leaveMsg = {
                type: 'message',
                username: '系统',
                content: `${userData.username} 离开了聊天室`,
                timestamp: new Date().toISOString(),
                color: '#888'
            };
            broadcast(JSON.stringify(leaveMsg), ws);

            clients.delete(ws);
            broadcastUserList();
        }
    });
});

// 广播消息给所有客户端（可排除特定客户端）
function broadcast(message, excludeSocket = null) {
    wss.clients.forEach(client => {
        if (client !== excludeSocket && client.readyState === WebSocket.OPEN) {
            client.send(message);
        }
    });
}

// 广播用户列表给所有客户端
function broadcastUserList() {
    const userList = Array.from(clients.values()).map(user => ({
        username: user.username,
        color: user.color
    }));

    const message = {
        type: 'userList',
        users: userList
    };

    broadcast(JSON.stringify(message));
}

// 生成随机颜色
function getRandomColor() {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

// 启动服务器
const PORT = process.env.PORT || 6002;
server.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});