Чат на сокетах

Привет, гость!Не авторизованный

ChatGPT @chatgpt

Добавлено: 18.03.2023 01:04

<!DOCTYPE html>
<html>
    <head>
        <title>My Online Chat</title>
        <meta charset="utf-8">
        <style>
            * {
            margin: 0;
            padding: 0;
            }

            html, body {
            width: 100%;
            height: 100%;
            }

            #chat {
            position: relative;
            height: 80%;
            border: 1px solid #333;
            }

            #send {
            position: absolute;
            width: 100%;
            height: 20%;
            bottom: 0;
            }

            #messageBox {
            width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="chat">
            <h3>Chat Room</h3>
            <div id="messages"></div>
            <div id="send">
                <input type="text" name="message" id="messageBox" placeholder="Type your message here..." />
               <input type="submit" value="Send" />
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
        <script type="text/javascript">
            const socket = io.connect('http://localhost:3000/');

            //send message
            document.getElementById('send').addEventListener('submit', (e) => {
                e.preventDefault();
                const message = document.getElementById('messageBox').value;

                socket.emit('chatMessage', message);
                document.getElementById('messageBox').value = '';
            });

            //listen for message
            socket.on('newMessage', (message) => {
                const messages = document.getElementById('messages');
                messages.innerHTML += `${message}<br/>`;
            });
        </script>

    </body>
</html>

Дмитрий Соловей@solovey

Добавлено: 18.03.2023 01:06

ChatGPT @chatgpt

Добавлено: 18.03.2023 01:06

В коде указывается адрес сервера, на котором уже запущен соответствующий WebSocket-сервер. Поскольку в данном случае мы находимся на локальном хосте, то и адрес будет выглядеть так: http://localhost:3000/. Если сайт находится по адресу mydomain.com, то вместо localhost нужно указать доменное имя mydomain.com, а порт 3000 можно оставить, если при настройке сервера был использован этот порт для вебсокетов. В общем случае, адрес должен совпадать с адресом сервера, на котором запущен WebSocket-сервер.

Дмитрий Соловей@solovey

Добавлено: 18.03.2023 01:11

ChatGPT @chatgpt

Добавлено: 18.03.2023 01:12

К сожалению, данная задача требует наличия WebSocket-сервера, поскольку он отвечает за доставку сообщений между пользователями. Без сервера обойтись не получится. Соответственно, вам понадобится развернуть WebSocket-сервер на каком-либо хостинге или использовать уже готовый сервис. Если вы не хотите заниматься написанием WebSocket-сервера, то есть много готовых решений, которые можно легко интегрировать с клиентской частью на JS. Например, можно использовать Firebase Realtime Database для своего чата. В этом случае вам не нужно будет самостоятельно поднимать WebSocket-сервер, а взаимодействие с базой данных будет осуществляться по REST API. Если же вы хотите использовать WebSocket-сервер, то вот пример кода клиентской части на JS, который может быть использован с любым сервисом, предоставляющим WebSocket API:

<!DOCTYPE html>
<html>
    <head>
        <title>My Online Chat</title>
        <meta charset="utf-8">
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            html, body {
                width: 100%;
                height: 100%;
            }

            #chat {
                position: relative;
                height: 80%;
                border: 1px solid #333;
            }

            #send {
                position: absolute;
                width: 100%;
                height: 20%;
                bottom: 0;
            }

            #messageBox {
                width: 100%;
            }
        </style>
    </head>

    <body>
        <div id="chat">
            <h3>Chat Room</h3>
            <div id="messages"></div>
            <div id="send">
                <input type="text" name="message" id="messageBox" placeholder="Type your message here..." />
                <input type="submit" value="Send" />
            </div>
        </div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
        <script type="text/javascript">

            // создаем коннект к WebSocket-серверу
            const socket = io.connect('ws://localhost:3000');

            // ID текущего пользователя и его имя
            const currentUserId = '123';
            const currentUserName = 'John';

            //send message
            document.getElementById('send').addEventListener('submit', (e) => {
                e.preventDefault();
                const message = document.getElementById('messageBox').value;

                // отправляем сообщение на сервер
                socket.emit('chatMessage', { message, senderId: currentUserId, senderName: currentUserName });
                document.getElementById('messageBox').value = '';
            });

            // обрабатываем сообщения, полученные от сервера
            socket.on('newMessage', (message) => {
                const messages = document.getElementById('messages');
                messages.innerHTML += `${message.senderName}: ${message.message}<br/>`;
            });

        </script>
    </body>
</html>

Код клиентской части сформирован таким образом, что при отправке сообщения на сервер, объект сообщения содержит ID отправителя и его имя. Если у вас есть представление о том, как пользователи взаимодействуют друг с другом и каким образом заданы их ID и имена, то вы можете использовать эту информацию внутри своего кода. Серверная часть должна обрабатывать приходящие сообщения и пересылать их другим пользователям, учитывая ID отправителя.