В этой статье мы разберём как сделать простой чат на языке программирования PHP для вашего сайта.
Ещё стоит сказать, что наш чет использует WebSocket на PHP, для этого мы будем использовать библиотеку Ratchet, но мы не будем подробно про неё рассказывать, для этого посмотрите статью: «Основы PHP библиотеки Ratchet», в ней вы узнает всё самое важное, что стоит знать.
Back-end:
Так как мы делаем чат на языке PHP, начнём со серверной части, сперва нужно установить библиотеку Ratchet, для этого используйте эту команду:
1 | composer require cboden/ratchet |
После того как всё установили, создадим файл «chat.php», где создадим класс для работы с нашем чатом, вот что в нём будет.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | // Объявляем пространство имён namespace MyApp; // Подключаем нужные компоненты use Ratchet\MessageComponentInterface; use Ratchet\ConnectionInterface; // Создаём новый класс для обработки чата class Chat implements MessageComponentInterface { // Свойство для хранения всех подключенных пользователей protected $clients; // Создаём конструктор класса public function __construct() { $this->clients = new \SplObjectStorage; } // Метод для открывания нового подключения public function onOpen(ConnectionInterface $conn) { $ Добавляем нового пользователя $this->clients->attach($conn); // Выводим сообщение что есть новый пользователь echo "Новое подключение ({$conn->resourceId})\n"; } // Метод для получения и отправки сообщений public function onMessage(ConnectionInterface $from, $msg) { // Вывод что сообщение получено echo "Получение сообщения: " . $msg; // Цикл для прохода по всем пользователям foreach ($this->clients as $client) { // Отправляем пользователю сообщение $client->send($msg); } } // Метод для отключения пользователя public function onClose(ConnectionInterface $conn) { // Отключаем клиента $this->clients->detach($conn); // Выводим сообщение об отключение echo "Отключение пользователя {$conn->resourceId} \n"; } // Метод для обработки ошибок public function onError(ConnectionInterface $conn, \Exception $e) { // Вывод Ошибки echo "Есть ошибка: {$e->getMessage()}\n"; // Отключения соединения WS сервера $conn->close(); } } |
В начале мы создаём пространство имён для этого скрипта, потом подключаем все нужные зависимости.
Потом создаём класс Chat и наследуем его от класса MessageComponentInterface, создаём защищенное свойство для хранения всех подключённых клиентов, и в конструкторе ему даём значение объекта класса SplObjectStorage.
Потом создаём несколько методов, первый onOpen(), следит за подключением новых пользователей и добавляем их в clients.
Второй метод onMessage() нужен для обработки полученных сообщений и отправки их остальным клиентам, в нём для отправки проходимся по всем пользователям и отправляем каждому.
Следующий метод проверяем отключение клиента от сервера и убирает его, последний нужен для вывода ошибок, если есть, то закрывает сервер.
Теперь создадим файл «index.php», в котором запустим WS сервер.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // Подключаем файл зависимостей require "./vendor/autoload.php"; // Подключаем файл с классом Chat require "./chat.php"; // Подключаем все зависимости use Ratchet\Server\IoServer; use Ratchet\Http\HttpServer; use Ratchet\WebSocket\WsServer; use MyApp\Chat; // Объявляем сервер $server = IoServer::factory( new HttpServer( new WsServer( new Chat() ) ), 8080 ); // Запускаем сервер $server->run(); |
В начале мы подключаем нужные нам файлы, первый это со всеми скаченными библиотеками через composer, второй файл с нашем классом Chat, потом идёт подключение всех зависимостей.
Объявляем сервер с помощью IoServer::factory(), где первым параметром назначаем класс для обработки данных, в нашем случае Chat, второй порт на котором будет работать WS сервер и запускаем его через метод run().
На этом разработка сервера закончена, мы создали чат на PHP без MySQL и с использование WebSocket, запускаем его.
1 | php index.php |
Всё должно работать.
Front-end:
Теперь перейдём к клинской части, для этого я создам файл «index.html», вот что в нём будет.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Chat Room</title> </head> <body> <input id="message-input" type="text" size="100"><br> <input id="btn-submit" type="button" value="Send"> <div id="chat"> </div> </body> </html> |
То есть обычный HTML файл, теперь сделаем основную логику на JavaScript, можете это сделать в отдельном JS файле или прямо в HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | let chat = document.querySelector("#chat") let input = document.querySelector("#message-input") let btnSubmit = document.querySelector("#btn-submit") const webSocket = new WebSocket('ws://localhost:8080'); webSocket.onopen = function(e) { console.log("Есть подключение"); }; webSocket.onmessage = function(e) { const data = JSON.parse(e.data); chat.innerHTML += '<div class="msg">' + data.message + '</div>' }; btnSubmit.addEventListener("click", () => { message = input.value; webSocket.send(JSON.stringify({ 'message': message })); input.value = ''; }) |
Как видите он достаточно короткий, я не буду объяснять как он работает, так как тут всё просто, но если вам интересно, то посмотрите статью «Чат на JavaScript и Node.js».
Переходим во файл «index.html» и пишем сообщения, ещё можете его использовать как шаблон для своего сайта, вот такой получился чат с WebSocket на PHP.
Вывод:
В этой статье мы разобрали как сделать простой чат на php для сайта с использованием библиотеки Ratchet, если вам про неё что-то не понятно, то посмотрите документацию.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...