Создаем простой чат с использованием Swoole PHP и JavaScript
Создание простого чата с использованием PHP Swoole на серверной стороне и JavaScript на клиентской стороне может выглядеть следующим образом.
Шаг 1: Установка Swoole
Установите Swoole с помощью PECL:
pecl install swoole
Добавьте расширение Swoole в конфигурационный файл php.ini:
extension=swoole
Шаг 2: Серверный код на PHP с использованием Swoole
Создайте файл server.php с содержимым:
<?php
// Создаем WebSocket сервер
$server = new Swoole\WebSocket\Server("0.0.0.0", 9502);
// Обработчик открытия нового соединения
$server->on('open', function ($server, $request) {
echo "connection open: {$request->fd}\n";
});
// Обработчик получения сообщения
$server->on('message', function ($server, $frame) {
echo "received message: {$frame->data}\n";
// Рассылаем сообщение всем подключенным клиентам
foreach ($server->connections as $fd) {
$server->push($fd, $frame->data);
}
});
// Обработчик закрытия соединения
$server->on('close', function ($server, $fd) {
echo "connection close: {$fd}\n";
});
// Запускаем сервер
$server->start();
Шаг 3: Клиентский код на JavaScript с использованием HTML
Создайте файл index.html с содержимым:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat</title>
<style>
#chat {
height: 300px;
overflow-y: scroll;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
#message {
width: calc(100% - 100px);
}
#send {
width: 80px;
}
</style>
</head>
<body>
<div id="chat"></div>
<input type="text" id="message" placeholder="Type a message...">
<button id="send">Отправить</button>
<script>
const ws = new WebSocket('ws://localhost:9502');
const chat = document.getElementById('chat');
const messageInput = document.getElementById('message');
const sendButton = document.getElementById('send');
ws.onmessage = function(event) {
const message = document.createElement('div');
message.textContent = event.data;
chat.appendChild(message);
chat.scrollTop = chat.scrollHeight;
};
sendButton.onclick = function() {
const message = messageInput.value;
if (message) {
ws.send(message);
messageInput.value = '';
}
};
messageInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
sendButton.click();
}
});
</script>
</body>
</html>
Шаг 4: Запуск сервера
Запустите сервер Swoole:
php server.php
Шаг 5: Открытие клиента
Откройте index.html в браузере. Вы должны увидеть интерфейс чата. Введите сообщение и нажмите "Отправить". Сообщение должно быть отправлено всем подключенным клиентам.
Теперь у вас есть простой чат на базе WebSocket, использующий PHP Swoole на серверной стороне и JavaScript на клиентской стороне.
-
Создано 08.07.2024 08:27:36
-
Михаил Русаков
Комментарии (1):
Здравствуйте. Хорошо было бы увидеть пример на хостинге.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.