How to Implement Real-Time Notifications in PHP Using WebSockets

etd_admin,

Real-time notifications are an essential feature for modern web applications, enabling instant updates without requiring the user to refresh the page. One effective way to achieve this is by using WebSockets, a protocol that facilitates persistent, bi-directional communication between the server and client. In this article, we will guide you step-by-step on how to implement real-time notifications in PHP using WebSockets.

A couple of things you need before proceeding with the implementation:

  1. A WebSocket library, such as Ratchet, which simplifies WebSocket implementation in PHP.
  2. A web server capable of handling WebSocket connections (e.g., Apache, Nginx, or a standalone PHP WebSocket server).

Step 1. Install Ratchet WebSocket Library

Ratchet is a popular PHP library for building WebSocket applications. You can install it using Composer:

composer require cboden/ratchet

Step 2. Create the WebSocket Server

Create a PHP script to act as the WebSocket server. This server will manage connections and send notifications to clients.

<?php

require __DIR__ . '/vendor/autoload.php';

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class NotificationServer implements MessageComponentInterface
{
    protected $clients;

    public function __construct()
    {
        $this->clients = new \SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn)
    {
        // Store the new connection
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})\n";
    }

    public function onMessage(ConnectionInterface $from, $message)
    {
        // Broadcast message to all connected clients
        foreach ($this->clients as $client) {
            if ($from !== $client) {
                $client->send($message);
            }
        }
    }

    public function onClose(ConnectionInterface $conn)
    {
        // Remove the connection
        $this->clients->detach($conn);
        echo "Connection {$conn->resourceId} has disconnected\n";
    }

    public function onError(ConnectionInterface $conn, \Exception $e)
    {
        echo "An error has occurred: {$e->getMessage()}\n";
        $conn->close();
    }
}

// Run the server
use Ratchet\Server\IoServer;

$server = IoServer::factory(
    new NotificationServer(),
    8080
);

echo "WebSocket server running on ws://localhost:8080\n";
$server->run();

Step 3. Start the WebSocket Server

Run the server using PHP CLI:

php path/to/your/websocket-server.php

This starts the WebSocket server on ws://localhost:8080.

Step 4. Create a Frontend to Connect to the WebSocket Server

To demonstrate real-time notifications, let’s create a simple HTML and JavaScript frontend.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-Time Notifications</title>
</head>
<body>
    <h1>Real-Time Notifications</h1>
    <ul id="notifications"></ul>

    <script>
        // Connect to the WebSocket server
        const ws = new WebSocket('ws://localhost:8080');

        // Display incoming messages as notifications
        ws.onmessage = (event) => {
            const notifications = document.getElementById('notifications');
            const newNotification = document.createElement('li');
            newNotification.textContent = event.data;
            notifications.appendChild(newNotification);
        };

        // Simulate sending a message (for testing purposes)
        ws.onopen = () => {
            ws.send('Hello, this is a test notification!');
        };
    </script>
</body>
</html>

Step 5. Of Course You Need to Test the Implementation

Start the WebSocket server and open the HTML file in your browser. The frontend that we created in Step 4 should connect to the WebSocket server and display any notifications sent from the server.

How Does it Work?

  1. The WebSocket server listens for incoming connections on port 8080.
  2. When a client connects, the server adds the connection to the SplObjectStorage list.
  3. Messages sent to the server are broadcasted to all connected clients, enabling real-time updates.

Implementing real-time notifications in PHP using WebSockets is a powerful way to enhance the user experience of your web applications. By following the steps outlined above and leveraging the Ratchet library, you can easily create a WebSocket server and integrate real-time notifications into your projects, ensuring that your applications stay dynamic, responsive, and engaging for your users.

PHP