chat2/static/script/main.js

window.onload = () => {
    fetchHistory()
    updateLoginState(false)
}
const socket = io("ws://localhost:5691");
socket.on("connect", () => {
    console.log("Connected");
    updateState(true)
    writeLogSystem("已连接到服务器", true, "client")
});

socket.on("system", data => {
    console.log("system", data)
    data = JSON.parse(data)
    writeLogSystem(data.msg, data.status, "system")
})

socket.on("username", data => {
    updateUsername(data);
})

socket.on("notice", data => {
    console.log("notice", data)
    data = JSON.parse(data)
    writeLogSystem(data.msg, data.status, "notice")
})

socket.on("msg", data => {
    console.log("user", data)
    data = JSON.parse(data);
    let msg = ` ${data.msg}`
    writeLogUser(msg, data.sender)
})

socket.on("disconnect", () => {
    updateState(false);
    console.log("Disconnected")
    writeLogSystem("已断开服务器连接", false, "client")
    updateLoginState(false)
});

const connect = () => socket.connect()
const disconnect = () => socket.disconnect();
const register = () => socket.emit("system", JSON.stringify({ opt: "signin", args: { username: document.getElementById("username").value } }));
const sendMsg = () => {
    socket.emit("msg", document.getElementById("message").value)
    document.getElementById("message").value = ""
}

const updateState = (value) => {
    const statEl = document.getElementById('stat');
    const statText = document.getElementById('stat-text');
    if (value) {
        statEl.className = 'status-badge connected';
        statText.textContent = 'connected';
    } else {
        statEl.className = 'status-badge disconnected';
        statText.textContent = 'disconnected';
    }
}

document.getElementById("message").addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        sendMsg();
    }
});

const updateUsername = data => {
    document.getElementById("current-username").textContent = data;
    updateLoginState(true, data);
}

const updateLoginState = (isLoggedIn, username = '') => {
    const usernameEl = document.getElementById("current-username");
    const loginPrompt = document.getElementById("login-prompt");

    if (isLoggedIn) {
        usernameEl.textContent = username || '已登录';
        usernameEl.style.display = 'block';
        if (loginPrompt) loginPrompt.style.display = 'none';
    } else {
        usernameEl.textContent = '未登录';
        if (loginPrompt) loginPrompt.style.display = 'block';
    }
}

const showLogin = () => {
    const username = prompt("请输入用户名：");
    if (username && username.trim()) {
        socket.emit("system", JSON.stringify({ opt: "signin", args: { username: username.trim() } }));
    }
}

function fetchHistory() {
    fetch("/history")
        .then(res => res.json())
        .then(res => {
            res.data.reverse().forEach(element => {
                writeLogUser(element.message, element.sender)
            });
        })
        .catch(err => {
            console.log(err)
        })
}

function fetchOnline() {
    fetch("/online").then(res => res.json()).then(res => {
        const c = document.getElementById('online');
        document.getElementById('online-number').textContent = res.online;
        c.innerHTML = "";
        res.user.forEach(element => {
            const u = document.createElement('span');
            u.textContent = element;
            c.append(u);
        });
    });
}

const onlineChecker = setInterval(() => {
    fetchOnline();
}, 1000)

function writeLogSystem(msg, status = true, topic = "system") {
    const c = document.getElementById('sysmsg');
    const m = document.createElement('span');
    m.style.color = status ? 'var(--success-color)' : 'var(--danger-color)'
    m.textContent = `[${new Date().toLocaleTimeString()}][${topic}] ${msg}`
    c.appendChild(m);
    c.scrollTop = c.scrollHeight;
}

function writeLogUser(msg, sender) {
    const c = document.getElementById('usrmsg');
    const m = document.createElement('span');
    m.textContent = `[${new Date().toLocaleTimeString()}][${sender}] ${msg}`
    c.appendChild(m);
    c.scrollTop = c.scrollHeight;
}

document.getElementById("username")?.addEventListener("keydown", (e) => {
    if (e.key === "Enter") {
        register();
    }
});