Эта статья предназначена для тех кто уже знает или начинает учить PHP, Но также человек далёкий от программирования может написать свой мессенджер если просто будет следовать инструкциям.
Для начала давайте объясню что такое WebSocket, простыми словами это тоже самое что и AJAX (http) только тут Клиент (Фронтенду) подключается к Серверу (Бэкенду) и не разрывает соединение а соединение остаётся активным, и мы можем отправлять запросы сколько угодно и сервер тоже. То-есть сервер может на наш запрос не отвечать а мы просто отправлять, наоборот и можем вез порядочно отправлять друг другу запросы. Иллюстрация принципа работы WebSocket.
1. Установка PHP
И так мы поняли что такое WebSocket, теперь давайте установим PHP (Язык программирования).
Для Windows пользователей:
Шаг 1: Заходим на официальный сайт ospanel.io.
Шаг 2: Нажимаем скачать и на открывшейся странице два раза нажимаем на кнопку «Нет, спасибо, хочу просто скачать» и начнётся скачивание Open Server (пока скачивайте можете попить чайку ?)
Шаг 3: Двойной клик по файлу. Откроется окошко с предложением выбрать место, куда распаковать файлы из архива. Я выбрал диск D.
Жмем кнопку ОК. Начнется процесс разархивации.
Шаг 4: Заходим в папку, которую выбрали на 3-ем шаге. Видим что появилась папка OpenServer. Входим в неё.
Видим два ярлыка запуска программы (ярлык может быть всего один, это зависит от разрядности Windows).
Два раза щелкаем по ярлычку Open Server x64.
Так как это первый запуск Опенсервера, то начнется процесс установки компонентов (MicrosoftVC++) для правильной работы программы.
После окончания установки программа подскажет, что нужно перезагрузить компьютер. Перезагружаем.
Шаг 5: Заново проходим четвертый шаг – то есть заходим в папку Опенсервера и запускаем программу.
В трее (область в нижнем правом углу там, где часы) видим новый значок – красный флажок.
Щелкаем мышкой по нему, и откроется меню программы.
Шаг 6: Нажимаем My favorites и Git-Bash
Шаг 7(Последний): Пишем на появившейся окошке php -v и видим
Для Linux Пользователей:
Шаг 1: Открываем терминал и пишем команду
Для Arch Linux -> sudo pacman -S php
Для Debiam Linux -> sudo apt -y install php8.2
Для Fedora/RHEL -> sudo dnf install dnf-plugins-core
sudo dnf install http://rpms.remirepo.net/fedora/remi-release-37.rpm
sudo dnf module reset php
sudo dnf config-manager --set-enabled remi
sudo dnf module enable php:remi-8.2
sudo dnf module install php:remi-8.2
Шаг 2 (Последний): Перезагружаем систему и вводим в терминале php -vДолжны увидеть
2. Установка Composer (Пакетный менеджер PHP)
Мы установили PHP, теперь давайте установим Composer чтобы использовать фреймворк Ratchet для написания WebSocket приложений на PHP.
Шаг 1: Зайдите на сайт — https://getcomposer.org/download/ потом спуститесь ниже и нажмите на ссылку Latest Stable у вас должно скачаться файл composer.phar.
Шаг 2: Создайте папку где нибудь в системе для проекта и перемещаем туда скачанный файл composer.phar.
Шаг 3: Открываем терминал и переходим на директорию проекта пишем cd [директория вашего проекта]
Шаг 4: Пишем в терминале php composer.phar require cboden/ratchet для установки фреймворка Ratchet
Теперь у нас всё готово для написания кода.
3. Пишем код
И так давайте в папке проекта создадим файлы client.html и server.php
Открываем server.php на любом вам удобном текстовом редакторе (не имеется введу Word или его аналог а именно текстовый редактор по типу блокнота в Windows или редактора кода к примеру Notepad++).
и пишем туда код
<?php require __DIR__ . '/vendor/autoload.php'; use Ratchet\MessageComponentInterface; use Ratchet\ConnectionInterface; use Ratchet\WebSocket\WsServer; use Ratchet\Http\HttpServer; use Ratchet\Server\IoServer; // Создаем класс обработчика сообщений WebSocket class WebSocketHandler implements MessageComponentInterface { protected $clients; public function __construct() { $this->clients = new \SplObjectStorage; } // Обработчик нового подключения клиента public function onOpen(ConnectionInterface $conn) { $this->clients->attach($conn); echo "New client connected: {$conn->resourceId}\n"; } // Обработчик получения сообщения от клиента public function onMessage(ConnectionInterface $from, $msg) { foreach ($this->clients as $client) { $client->send($msg); } } // Обработчик закрытия соединения клиента public function onClose(ConnectionInterface $conn) { $this->clients->detach($conn); echo "Client disconnected: {$conn->resourceId}\n"; } // Обработчик ошибок соединения public function onError(ConnectionInterface $conn, \Exception $e) { echo "An error has occurred: {$e->getMessage()}\n"; $conn->close(); } } // Создаем новый WebSocket-сервер на порту 8080 $server = IoServer::factory( new HttpServer( new WsServer( new WebSocketHandler() ) ), 8080 ); // Запускаем сервер echo "WebSocket server started\n"; $server->run();Код на 3тьей строке импортирует все установленные библиотеки в папке проекта.
С 5го по 9тая строка кода импортирует фреймворк Ratchet и его внутренние элементы.
На 12ой строке подключаем интерфейс фреймфорка Ratchet MessageComponentInterface к нашему классу WebSocketHandler
На 13ой троке кода создаём протектированную переменную $clients, эта переменная хранит все подключённые клиенты.
На 16ой строке кода мы присваиваем к нашей переменной $clients объект SplObjectStorage чтобы мы могли удобно проводить манипуляцию со списком клиентов.
В функции на строке 20 которая запускается при каждом подключений клиента к серверу, добавляется ID клиента к списку $clients и выводится на терминал его ID.
В функции на 26ой строке которая запускается при каждой отправке сообщения, функция получает данные отправителя и его сообщение и перечисляет всех подключённых клиентов из списка и отправляет всем сообщение включая самого отправителя чтобы он сам мог видеть свои отправленные сообщения.
В функции на строке 34 которая вызывается при разрывании соединения с сервера с клиентом, при этом удаляя его ID из списка $clients.
В функции на строке 40 вызывается при ошибке с WebSocket, сервер выводит ошибку в терминал и отключает весь сервер.
С 47 по 54тую строку создаём хост с портом 8080 если оно не доступно можете изменить на 8081.
На 58 строке запускаем сервер.
И запускаем код на терминале написав php server.php.
Открываем client.html и пишем туда код
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Chat</title> </head> <body> <div id="messages"></div> <form> <input type="text" id="message" autocomplete="off"> <button>Send</button> </form> <script> const socket = new WebSocket('ws://localhost:8080'); socket.addEventListener('open', function(event) { console.log('Connected to server.'); }); socket.addEventListener('message', function(event) { const messages = document.getElementById('messages'); const message = document.createElement('div'); message.innerHTML = event.data; messages.appendChild(message); }); const form = document.querySelector('form'); const input = document.querySelector('input'); form.addEventListener('submit', function(event) { event.preventDefault(); const message = input.value; socket.send(message); input.value = ''; }); </script> </body> </html> На 15 строке Создаётся WebSocket соединение с адресом ws://localhsot:8080 с портом 8080 как говорил выше если оно занято можете изменить на 8081.
В функции на 17ой строке кода которая выполняется при подключений с сервером и выводит текст Connected to server.
В функции на 21ой строке которая запускается при каждом получений сообщения которая добавляет в тег с id messages текст сообщения.
А в функции на 31 строке которая вызывается при отправке сообщения, которая отправляет сообщение серверу.
4. Пользование
Наш мессенджер готов теперь мы можем протестировать его чтобы протестировать открываем на двух вкладках браузера файл client.html и пишем любое сообщение потом нажимаем Enter или кнопку Send.
В продолжений этой статьи мы установим наш мессенджер на хостинг чтобы все могли им пользоваться.
Спасибо за просмотр!
Это моя первая статья и был бы благодарен, если отметите мои ошибки.
С уважением Туленов Темур.
При поддержке сообщества ThinkUP
ссылка на оригинал статьи https://habr.com/ru/post/724366/
Добавить комментарий