console.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>PHP WebSocket Chat</title>
    <style>
        body {
            background-color: #0f0f0f;
            font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
            color: #333;
        }

        .chat_wrapper {
            width: 500px;
            margin: auto;
            background: #f2f2f2;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .message_box {
            background: #fff;
            height: 150px;
            overflow: auto;
            padding: 10px;
            border: 1px solid #ccc;
        }

        .panel input {
            padding: 2px 5px;
            margin-right: 4px;
        }

        .system_msg {
            color: #bdbdbd;
            font-style: italic;
        }

        .user_name {
            font-weight: bold;
        }

        .user_message {
            color: #88b6e0;
        }
    </style>
</head>
<body>
<script>

    document.addEventListener('DOMContentLoaded', function () {
        const chatApp = {
            colours: [
                '007AFF', 'FF7000', '15E25F', 'CFC700', 'CF1100', 'CF00BE', 'F00',
                '00D1FF', 'F14CC8', '7FFF00', 'FFD700', 'FF4500', '00FA9A',
                '8A2BE2', 'DC143C', '00FFFF', '20B2AA', 'FF6347', '800080',
                'FF69B4', 'FFA500', 'B0C4DE', '8B008B', '2E8B57', '4682B4',
                'D2B48C', '008080', 'D8BFD8', 'FFC0CB', 'DDA0DD', 'ADFF2F',
                '9ACD32', '6A5ACD', 'BDB76B', '006400', '4B0082', '7CFC00',
                'F08080', '66CDAA', '0000CD', 'BA55D3', '9370DB', '3CB371',
                '7B68EE', '48D1CC', 'C71585', '191970', 'FFE4E1', 'FFEBCD',
                '556B2F', 'FFDEAD', '87CEFA', '32CD32', 'FAF0E6', 'FFDAB9',
                'CD5C5C', 'F0FFF0', '228B22', 'FF00FF', 'DCDCDC', 'F5FFFA',
                'FFFAF0', 'B0E0E6', '800000', '666666', 'BDB76B', '4169E1',
                '8B4513', 'FA8072', 'FAA460', '2E8B57', 'A0522D', 'C0C0C0',
                '87CEEB', '6B8E23', 'FFB6C1', 'FFFACD', '6495ED', 'FFF5EE',
                '6B8E23', 'FFA07A', 'FFA500', 'FFFF00', '00FF00', 'AFEEEE',
                'DB7093', 'FFEFD5', 'FFDAB9', 'CD853F', 'FFC0CB', 'DDA0DD',
                'B0E0E6', '800080', '663399', 'FF0000', 'BC8F8F', '4169E1',
                '8B4513', 'FA8072', 'FAA460', '2E8B57', 'A0522D', 'C0C0C0',
                '87CEEB', '6B8E23', 'FFB6C1', 'FFFACD', '6495ED', 'FFF5EE'
            ],
            websocket: null,
            userColour: null,

            init() {
                this.userColour = this.colours[Math.floor(Math.random() * this.colours.length)];
                this.bindEvents();
            },

            bindEvents() {
                document.getElementById('connect-btn').addEventListener('click', () => this.connectWebSocket());
                document.getElementById('send-btn').addEventListener('click', () => this.sendMessage());
                document.getElementById('terminate-btn').addEventListener('click', () => this.terminateConnection());
            },

            connectWebSocket() {
                const connectButton = document.getElementById('connect-btn')
                connectButton.textContent = 'Connecting...';
                connectButton.disabled = true;

                const wsUri = `ws://${window.location.hostname}:${window.location.port}/index.php`;
                this.websocket = new WebSocket(wsUri);
                this.websocket.onopen = () => {
                    this.appendMessage("Connected!", 'system_msg');
                    this.updateButtonVisibility();
                };

                this.websocket.onmessage = (ev) => this.displayMessage(ev);
                this.websocket.onerror = (ev) => this.appendMessage(`Error Occurred - ${ev.data}`, 'system_error');
                this.websocket.onclose = () => {
                    this.appendMessage("Connection Closed", 'system_msg');
                    this.updateButtonVisibility();
                    connectButton.textContent = 'Connect';
                    connectButton.disabled = false;
                };
            },

            isJsonString(item) {
                let value = typeof item !== "string" ? JSON.stringify(item) : item;
                try {
                    value = JSON.parse(value);
                } catch (e) {
                    return false;
                }
                return typeof value === "object" && value !== null;
            },
            displayMessage(ev) {
                console.log(ev.data);
                if (!this.isJsonString(ev.data)) {
                    this.appendMessage(ev.data, 'system_msg');
                    return;
                }
                const data = JSON.parse(ev.data);
                console.log('isJson', data)

                const {type, message, name, color} = data.payload;
                const messageElement = type === 'usermsg'
                    ? `<div><span class='user_name' style='color:#${color}'>${name}</span>: <span class='user_message'>${message}</span></div>`
                    : `<div class='system_msg'>${message}</div>`;

                this.appendMessage(messageElement);
            },

            sendMessage() {
                const $message = document.getElementById('message');
                const myMessage = $message.value.trim();
                const myName = document.getElementById('name').value.trim();

                if (!myName) {
                    alert("Enter your Name please!");
                    return;
                }
                if (!myMessage) {
                    alert("Enter some message please!");
                    return;
                }

                const msg = {
                    type: 'usermsg',
                    message: myMessage,
                    name: myName,
                    color: this.userColour
                };

                this.websocket.send(JSON.stringify(msg));
                $message.value = ''; // Reset message input
            },

            appendMessage(content, className = '') {
                const messageBox = document.getElementById('message_box');
                const div = document.createElement('div');
                if (className) {
                    div.className = className;
                }
                div.innerHTML = content;
                messageBox.appendChild(div);
            },

            updateButtonVisibility() {
                const connectBtn = document.getElementById('connect-btn');
                const terminateBtn = document.getElementById('terminate-btn');

                if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
                    connectBtn.style.display = 'none';
                    terminateBtn.style.display = 'block';
                } else {
                    connectBtn.style.display = 'block';
                    terminateBtn.style.display = 'none';
                }
            },

            terminateConnection() {
                if (this.websocket) {
                    this.websocket.close();
                    this.websocket = null;
                }
            }
        };

        chatApp.init();
    });
</script>
<div class="chat_wrapper">
    <div class="message_box" id="message_box"></div>
    <div class="panel">
        <label for="name">Name</label><input type="text" name="name" id="name" placeholder="Your Name" maxlength="10"
                                             style="width:20%"/><br/>
        <label for="message">New Message</label><input type="text" name="message" id="message" placeholder="Message"
                                                       maxlength="80" style="width:60%"/><br/>
        <button id="send-btn">Send</button>
        <button id="connect-btn">Connect</button>
        <button id="terminate-btn" style="display:none;">Terminate</button>
    </div>
</div>
</body>
</html>