How to Implement PHP WebSocket?

1composer require cboden/ratchet

1use Ratchet\MessageComponentInterface;
2use Ratchet\ConnectionInterface;
3
4class Chat implements MessageComponentInterface {
5    protected $clients;
6
7    public function __construct() {
8        $this->clients = new \SplObjectStorage;
9    }
10
11    public function onOpen(ConnectionInterface $conn) {
12        $this->clients->attach($conn);
13    }
14
15    public function onMessage(ConnectionInterface $from, $msg) {
16        foreach ($this->clients as $client) {
17            if ($from !== $client) {
18                $client->send($msg);
19            }
20        }
21    }
22
23    public function onClose(ConnectionInterface $conn) {
24        $this->clients->detach($conn);
25    }
26
27    public function onError(ConnectionInterface $conn, \Exception $e) {
28        $conn->close();
29    }
30}

1use Ratchet\Server\IoServer;
2use Ratchet\Http\HttpServer;
3use Ratchet\WebSocket\WsServer;
4
5require __DIR__ . '/vendor/autoload.php';
6
7$server = IoServer::factory(
8    new HttpServer(
9        new WsServer(
10            new Chat()
11        )
12    ),
13    8080
14);
15
16$server->run();

1const socket = new WebSocket('ws://localhost:8080');
2
3socket.onopen = function(event) {
4    console.log('Connected to WebSocket server.');
5};
6
7socket.onmessage = function(event) {
8    console.log('Message from server: ', event.data);
9};
10
11socket.onclose = function(event) {
12    console.log('Disconnected from WebSocket server.');
13};
14
15socket.onerror = function(error) {
16    console.error('WebSocket error: ', error);
17};
18
19// Send a message to the server
20socket.send('Hello Server!');

1public function onError(ConnectionInterface $conn, \Exception $e) {
2    error_log("Error: {$e->getMessage()}");
3    $conn->close();
4}

1import { useEffect, useState } from 'react';
2
3const [messages, setMessages] = useState([]);
4
5useEffect(() => {
6    const socket = new WebSocket('ws://localhost:8080');
7
8    socket.onmessage = function(event) {
9        setMessages(prevMessages => [...prevMessages, event.data]);
10    };
11
12    return () => socket.close();
13}, []);