D13 實作日 - 聊天室 client 端改寫 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 13

自我挑戰組

chatGPT 帶你從零開始寫 websocket 連線遊戲系列第 13 篇

D13 實作日 - 聊天室 client 端改寫

15th鐵人賽聊天室實作

sixwings

2023-09-13 23:19:22

238 瀏覽

分享至

今天的實作內容是改寫前端網頁的輸入框，不囉嗦，直接上扣

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Client Example</h1>
    <div id="messages"></div>
    <input type="text" id="inputMessage" placeholder="Enter a message">
    <button id="sendButton">Send</button>

    <script>
        const messagesDiv = document.getElementById('messages');
        const inputMessage = document.getElementById('inputMessage');
        const sendButton = document.getElementById('sendButton');

        const socket = new WebSocket("ws://localhost:8765/");

        socket.onopen = (event) => {
            console.log("Connected to server");
        };

        socket.onmessage = (event) => {
            const message = event.data;
            const messageElement = document.createElement('p');
            messageElement.textContent = message;
            messagesDiv.appendChild(messageElement);
        };

        socket.onclose = (event) => {
            console.log("disconnected to server");
        };

        const isCmd = (s) => s.trim().startsWith('/')

        let cmdId = 1
        const send = () => {
            const message = inputMessage.value;
            if (message === '') return;

            if (isCmd(message)) {
                const [cmd, ...args] = message.split(' ')
                payload = JSON.stringify({ id: cmdId, type: cmd.slice(1), args})
            } else {
                payload = JSON.stringify({type: "chat", message})
            }
            socket.send(payload);
            inputMessage.value = '';
        }

        sendButton.addEventListener('click', send);
        inputMessage.addEventListener('keydown', (e) => {
            // console.log(e.code)
            if (e.code === 'Enter') {
                send()
            }
        }, false);
    </script>
</body>
</html>

今天改寫的重點如下：