<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Dari Client</title>
</head>
<body>
    <h1>Chat Dari Client</h1>
    <div>
        <label for="message">Message:</label>
        <input type="text" id="message" placeholder="Type your message here">
        <button id="send">Send</button>
    </div>
    <div>
        <h2>Server Response:</h2>
        <p id="response"></p>
    </div>
    <script>
        let ws;

        function connectWebSocket() {
            ws = new WebSocket("ws://192.168.1.170:12345"); // Sesuaikan dengan server Anda

            ws.onopen = () => {
                console.log("Connected to the server");
            };

            ws.onmessage = (event) => {
                document.getElementById("response").innerText = event.data;
            };

            ws.onerror = (error) => {
                console.error("WebSocket error:", error);
            };

            ws.onclose = () => {
                console.log("Connection closed");
                // Coba reconnect setelah 3 detik jika koneksi ditutup
                setTimeout(connectWebSocket, 3000);
            };
        }

        connectWebSocket();

        document.getElementById("send").addEventListener("click", () => {
            const message = document.getElementById("message").value;
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(message);
            } else {
                console.error("WebSocket is not open");
            }
        });
    </script>
</body>
</html>
