HTMX(as Web-Client) and PhP-SSE(as Server/Pusher)

Ion

3 min read

·

Oct 8, 2026

--

Listen

Share

Hi everybody!

In this test-Lab, I indend-to implement in local client — server paradigm,…the HTMX(as web-client on front-end/side) with SSE-pusher(written-in PhP as back-end/side).

Let’s starting…

# Ctrl + Alt+T - opene new shell/CLI terminal-window

# clear

# cd ~

sudo mkdir ~/htmx_php_sse_proj/

cd ~/htmx_php_sse_proj/

sudo touch index. php
sudo touch sse.php

ls -lh
# Total 8.0K
# -rw-r--r-- 1 root root  759 Oct  8 15:29 index.php
# -rw-r--r-- 1 root root 1.2K Oct  8 15:20 sse.php


sudo nano index.php
# fill it using Copy(shift-Mark + ^C ) & Paste(^V)
# save it with ^O Enter
# exit from nano editor with ^X

sudo nano sse.php
# fill it using Copy(shift-Mark + ^C ) & Paste(^V)
# save it with ^O Enter
# exit from nano editor with ^X
The content-of both files is …

• ~/htmx_php_sse_proj/index.php

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <title>HTMX + PHP SSE Example</title>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/htmx-ext-sse@2.2.2"></script>
</head>
<body>

    <h1>Real-time server updates</h1>

    <!-- Connect to the PHP script that generates the SSE events -->
    <div hx-ext="sse" sse-connect="sse.php">
        
        <!-- Listen for the 'ticker' event and replace the inner content -->
        <div sse-swap="ticker">
            Waiting for data from the server...
        </div>

    </div>

</body>
</html>

• ~/htmx_php_sse_proj/sse.php

<?php
// Set the mandatory Headers for Server-Sent Events(SSE)
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

// Disable PHP/server output buffering for instant-sending
while (ob_get_level()) {
    ob_end_flush();
}
flush();

// Infinite-loop to ...
// ... send-Data periodically
while (true) {
    // Generate dynamic information(e.g., the current-Time ...
    // ...or,...maybe  the Data from a database/DB, ...
    // ...or, any dinamically-changed data one !!!)
    $currentTime = date('H:i:s');
    $randomNumber = rand(10, 99);

    // The SSE-format requires the "event:" prefix ...
    // ...followed by... the event-name(defined-in HTMX-labeled: sse-swap)
    echo "event: ticker\n";
    
    // The "data:" prefix contains the HTML-fragment ...
    // ... that HTMX will inject into the page.
    echo "data: <div style='padding: 10px; background: #e0f7fa;'><strong>Server time:</strong> {$currentTime} | <strong>Random number:</strong> {$randomNumber}</div>\n";
    
    // Each SSE message-block, must end with two newlines (\n\n)
    echo "\n\n";

    // Send the buffer to the client(index.php in this case!!!) immediately
    flush();

    // 2-second pause... before the next update
    sleep(2);
}

Now could/would-try this project…

# Ctrl + Alt+T - opene new shell/CLI terminal-window

# clear

cd ~/htmx_php_sse_proj/

# cat index.php
# cat sse.php

# tree .

# start a local-webserver which listen-on free 8187 port
# ... (or,...other free port number, ...which have you... available!!!)
php -S 127.0.0.1:8187  
# [Thu Oct  8 15:44:06 2026] PHP 8.3.6 Development Server (http://127.0.0.1:8187) started

# IMPORTANT-REMARK: DO NOT CLOSE THIS webserver...could MINIMIZE IT, if need!!!!

# Note:   Open in browser the URL: http://127.0.0.1:8187
#         ... or,  could use ^ + ENTER conmbination-of keys....
#         ...on above-link offered by the webserver

#
# ... we will-see the following real-time(RT) content:
#

# Real-time server updates
# Server time: <12:48:00> | Random number: <68>

#Note that: the  <...> parts, will be changed in real-time(RT)!!!

Enjoy!

That is all. Bye..Bye!