Untitled

<html>
    <head>
        <title>Welcome To Skillbox Chat 5000</title>
        <script language="javascript">
            //alert("Ваш код на Джаваскрипте идеален!")
            // Начинаем работу, когда загрузится вся страница
            // () => {}

            window.addEventListener("load", () => {
                const ws = new WebSocket("ws://127.0.0.1:9001/");

                const messages_list = document.getElementById("messages_list");
                const user_name = document.getElementById("user_name");
                const set_name_button = document.getElementById("set_name_button");
                const msg_text = document.getElementById("msg_text");
                const public_msg_button = document.getElementById("public_msg_button");

                const display_message = (name, text) => {
                    const message_div = document.createElement("div");
                    message_div.innerText = `[${name}]: ${text}`;
                    messages_list.append(message_div);
               };

                ws.onmessage = ({ data }) => {
                    const payload = JSON.parse(data);
                    if (payload["error"]) {
                        alert(payload["error"]);
                    }
                    if (payload["command"] == "public_msg") {
                        const text = payload["text"];
                        const user_from = payload["user_from"];
                        const user_name = payload["user_name"];
                        display_message(`${user_name}#${user_from}`, text);
                    }
                };

                set_name_button.addEventListener("click", () => {
                    const payload = { "command": "set_name", "name": user_name.value };
                    ws.send(JSON.stringify(payload));
                });

                public_msg_button.addEventListener("click", () => {
                    const payload = { "command": "public_msg", "text": msg_text.value };
                    display_message("Я", msg_text.value);
                    ws.send(JSON.stringify(payload));
                    msg_text.value = "";
                });
            });
        </script>
    </head>
    <body>
        <b>Укажите имя:</b>
        <input type="text" id="user_name"/>
        <input type="button" value="Сохранить" id="set_name_button" />
        <br />

        <input type="text" placeholder="Текст сообщения" id="msg_text"/>
        <input type="button" value="Отправить Публично" id="public_msg_button"/>
        <div id="messages_list">

        </div>
    </body>
</html>