Структура проекта:server.php — WebSocket-сервер на PHP.index.html — Интерфейс чата.chat.js — Логика клиента для соединения с WebSocket-сервером.1. Файл server.php (WebSocket-сервер на PHP)
Для работы WebSocket на PHP, нужно использовать библиотеку Ratchet. Установите её через Composer:
composer require cboden/ratchet
require __DIR__ . '/vendor/autoload.php';
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) {
// Сообщение получено, отправляем всем клиентам
foreach ($this->clients as $client) {
if ($from !== $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";
$conn->close();
}
}
// Запуск WebSocket-сервера
$server = \Ratchet\App::factory('localhost', 8080, '0.0.0.0');
$server->route('/chat', new Chat, ['*']);
$server->run();
Чат в реальном времени
document.addEventListener('DOMContentLoaded', function () {
var chat = document.getElementById('chat');
var message = document.getElementById('message');
var send = document.getElementById('send');
// Соединение с WebSocket-сервером
var conn = new WebSocket('ws://localhost:8080/chat');
// Получение сообщений с сервера
conn.onmessage = function (e) {
var newMessage = document.createElement('div');
newMessage.textContent = e.data;
chat.appendChild(newMessage);
chat.scrollTop = chat.scrollHeight; // Автопрокрутка
};
// Отправка сообщений
send.addEventListener('click', function () {
if (message.value !== '') {
conn.send(message.value);
message.value = ''; // Очищаем поле ввода
}
});
// Нажатие клавиши Enter для отправки
message.addEventListener('keypress', function (e) {
if (e.key === 'Enter') {
send.click();
}
});
});