Простой мессенджер на WebSocket в PHP

Создание простого мессенджера с использованием WebSocket на PHP — это отличный способ понять, как работает двусторонняя связь в реальном времени. В этом примере мы используем библиотеку Ratchet для создания WebSocket-сервера и JavaScript для клиентской части.

Шаг 1: Установка Ratchet

Убедитесь, что у вас установлены PHP и Composer.
Создайте директорию для проекта и установите Ratchet:

   mkdir websocket-messenger
   cd websocket-messenger
   composer require cboden/ratchet

Шаг 2: Создание WebSocket-сервера

Создайте файл server.php в корневой директории проекта:

<?php
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;

require 'vendor/autoload.php';

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) {
        // Отправляем сообщение всем клиентам, кроме отправителя
        foreach ($this->clients as $client) {
            if ($client !== $from) {
                $client->send("Пользователь {$from->resourceId}: $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";
        $conn->close();
    }
}

// Запуск сервера на порту 8080
$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Chat()
        )
    ),
    8080
);

echo "Сервер запущен на порту 8080\n";
$server->run();

Шаг 3: Запуск сервера

Запустите сервер:

php server.php

Сервер начнет слушать порт 8080. Вы увидите сообщение:

Сервер запущен на порту 8080

Шаг 4: Создание клиентской части

Создайте файл index.html для клиентской части мессенджера:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Messenger</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #chat {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }
        #message {
            width: 300px;
            padding: 5px;
        }
        #send {
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>WebSocket Messenger</h1>
    <div id="chat"></div>
    <input type="text" id="message" placeholder="Введите сообщение">
    <button id="send">Отправить</button>

    <script>
        const chat = document.getElementById("chat");
        const messageInput = document.getElementById("message");
        const sendButton = document.getElementById("send");

        // Подключение к WebSocket-серверу
        const socket = new WebSocket("ws://localhost:8080");

        // Обработка открытия соединения
        socket.onopen = function() {
            console.log("Соединение установлено");
        };

        // Обработка входящих сообщений
        socket.onmessage = function(event) {
            const message = document.createElement("div");
            message.textContent = event.data;
            chat.appendChild(message);
            chat.scrollTop = chat.scrollHeight; // Прокрутка вниз
        };

        // Обработка закрытия соединения
        socket.onclose = function(event) {
            console.log("Соединение закрыто");
        };

        // Отправка сообщения
        sendButton.onclick = function() {
            const message = messageInput.value;
            if (message) {
                socket.send(message);
                messageInput.value = ""; // Очистка поля ввода
            }
        };

        // Отправка сообщения при нажатии Enter
        messageInput.onkeypress = function(event) {
            if (event.key === "Enter") {
                sendButton.click();
            }
        };
    </script>
</body>
</html>

Шаг 5: Тестирование мессенджера

Откройте файл index.html в браузере.
Откройте этот же файл в другом браузере или вкладке.
Введите сообщение в одном окне и нажмите «Отправить». Сообщение должно появиться в другом окне.

Шаг 6: Улучшение мессенджера

Идентификация пользователей:

При подключении отправляйте имя пользователя на сервер.
Храните имена пользователей в объекте $clients.

История сообщений:

Сохраняйте сообщения в массиве на сервере.
При подключении нового пользователя отправляйте ему историю.

Групповые чаты:

Создайте несколько комнат (каналов).
Позвольте пользователям выбирать комнату для общения.

Безопасность:

Используйте wss:// для защищенного соединения.
Добавьте аутентификацию пользователей.

Пример улучшенного сервера с именами пользователей

public function onOpen(ConnectionInterface $conn) {
    $this->clients->attach($conn);
    echo "Новое соединение: ({$conn->resourceId})\n";
    $conn->send("Введите ваше имя:");
}

public function onMessage(ConnectionInterface $from, $msg) {
    if (!isset($from->username)) {
        $from->username = $msg;
        $from->send("Добро пожаловать, $msg!");
        return;
    }

    foreach ($this->clients as $client) {
        if ($client !== $from) {
            $client->send("{$from->username}: $msg");
        }
    }
}

Заключение

Этот пример демонстрирует базовую реализацию мессенджера с использованием WebSocket на PHP. Вы можете расширить его, добавив новые функции, такие как комнаты, история сообщений, аутентификация и многое другое. WebSocket — это мощный инструмент для создания приложений реального времени, и Ratchet делает его использование простым и удобным.