Cоздания чата в реальном времени с использованием WebSockets

Структура проекта:server.php — WebSocket-сервер на PHP.index.html — Интерфейс чата.chat.js — Логика клиента для соединения с WebSocket-сервером.1. Файл server.php (WebSocket-сервер на PHP)

Для работы WebSocket на PHP, нужно использовать библиотеку Ratchet. Установите её через Composer:

  1. composer require cboden/ratchet

Теперь создадим WebSocket-сервер:
  1. <?php
  2. require __DIR__ . '/vendor/autoload.php';
  3.  
  4. use Ratchet\MessageComponentInterface;
  5. use Ratchet\ConnectionInterface;
  6.  
  7. class Chat implements MessageComponentInterface {
  8.     protected $clients;
  9.  
  10.     public function __construct() {
  11.         $this->clients = new \SplObjectStorage;
  12.     }
  13.  
  14.     public function onOpen(ConnectionInterface $conn) {
  15.         // Новое соединение открыто
  16.         $this->clients->attach($conn);
  17.         echo "Новое соединение ({$conn->resourceId})\n";
  18.     }
  19.  
  20.     public function onMessage(ConnectionInterface $from, $msg) {
  21.         // Сообщение получено, отправляем всем клиентам
  22.         foreach ($this->clients as $client) {
  23.             if ($from !== $client) {
  24.                 $client->send($msg);
  25.             }
  26.         }
  27.     }
  28.  
  29.     public function onClose(ConnectionInterface $conn) {
  30.         // Соединение закрыто
  31.         $this->clients->detach($conn);
  32.         echo "Соединение {$conn->resourceId} закрыто\n";
  33.     }
  34.  
  35.     public function onError(ConnectionInterface $conn, \Exception $e) {
  36.         echo "Ошибка: {$e->getMessage()}\n";
  37.         $conn->close();
  38.     }
  39. }
  40.  
  41. // Запуск WebSocket-сервера
  42. $server = \Ratchet\App::factory('localhost', 8080, '0.0.0.0');
  43. $server->route('/chat', new Chat, ['*']);
  44. $server->run();


2. Файл index.html (интерфейс чата)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Чат в реальном времени</title>
  7.     <style>
  8.         #chat {
  9.             height: 300px;
  10.             width: 100%;
  11.             border: 1px solid #000;
  12.             overflow-y: scroll;
  13.             margin-bottom: 10px;
  14.         }
  15.  
  16.         #message {
  17.             width: 80%;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <div id="chat"></div>
  23.     <input type="text" id="message" placeholder="Введите сообщение...">
  24.     <button id="send">Отправить</button>
  25.  
  26.     <script src="chat.js"></script>
  27. </body>
  28. </html>


3. Файл chat.js (клиентская логика)
  1. document.addEventListener('DOMContentLoaded', function () {
  2.     var chat = document.getElementById('chat');
  3.     var message = document.getElementById('message');
  4.     var send = document.getElementById('send');
  5.  
  6.     // Соединение с WebSocket-сервером
  7.     var conn = new WebSocket('ws://localhost:8080/chat');
  8.  
  9.     // Получение сообщений с сервера
  10.     conn.onmessage = function (e) {
  11.         var newMessage = document.createElement('div');
  12.         newMessage.textContent = e.data;
  13.         chat.appendChild(newMessage);
  14.         chat.scrollTop = chat.scrollHeight;  // Автопрокрутка
  15.     };
  16.  
  17.     // Отправка сообщений
  18.     send.addEventListener('click', function () {
  19.         if (message.value !== '') {
  20.             conn.send(message.value);
  21.             message.value = '';  // Очищаем поле ввода
  22.         }
  23.     });
  24.  
  25.     // Нажатие клавиши Enter для отправки
  26.     message.addEventListener('keypress', function (e) {
  27.         if (e.key === 'Enter') {
  28.             send.click();
  29.         }
  30.     });
  31. });


Как это работает:server.php — это WebSocket-сервер, который обрабатывает события открытия соединения, получения сообщений и закрытия соединения. Когда клиент отправляет сообщение, сервер пересылает его всем подключенным клиентам, кроме того, кто отправил.index.html — простой интерфейс чата с полем для сообщений и кнопкой "Отправить". Также есть блок, куда будут добавляться новые сообщения.chat.js — клиентская логика. После загрузки страницы устанавливается WebSocket-соединение с сервером. Когда сервер отправляет сообщение, оно добавляется в чат. Пользователь может отправлять сообщения как кликом по кнопке "Отправить", так и нажатием клавиши Enter.Как запустить:Установите Ratchet через Composer:composer require cboden/ratchetЗапустите WebSocket-сервер:php server.phpОткройте файл index.html в браузере и начните обмениваться сообщениями.Примечание:Чтобы эта система заработала на удаленном сервере или локально с других устройств, убедитесь, что порты открыты, и замените localhost в WebSocket URL на ваш IP-адрес или домен.Этот пример показывает, как можно использовать WebSockets для создания реального чата, где все пользователи могут общаться в реальном времени без перезагрузки страницы или дополнительных запросов к серверу.

  20.09.24 / 10:03 | PHP |   26 | 1   0