chat.html

<h1>Live Chat with Server sent events in PHP!</h1>
<div class="row g-2">
    <!-- Chat messages -->
    <div class="col-8 text-center bg-secondary text-white">
        <div class="p-3 border">Messages</div>
    </div>
    <!-- users list -->
    <div class="col-4 text-center">
        <div class="p-2 border">
            <div class="card-body">
                <h5 class="card-title">Users</h5>

            </div>
            <div class="card w-100">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">An item</li>
                    <li class="list-group-item">A second item</li>
                    <li class="list-group-item">A third item</li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        // withCredentials=true: pass the cross-domain cookies to server-side
        const source = new EventSource('http://localhost:8080/sse.php', {withCredentials: true});
        source.addEventListener('news', function (event) {
            console.log(event.data);
            // source.close(); // disconnect stream
        }, false);
    </script>
</div>