# How to use HTML5 Server-Sent Events (SSE)

**URL:** <https://discourse.slimframework.com/t/how-to-use-html5-server-sent-events-sse/879>\
**Category:** Questions\
**Created:** [November 4, 2016, 4:16pm UTC](https://discourse.slimframework.com/t/how-to-use-html5-server-sent-events-sse/879 "2016-11-04T16:16:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![SlimStorm](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@SlimStorm](https://discourse.slimframework.com/u/SlimStorm)\
**Post date:** [November 4, 2016, 4:16pm UTC](https://discourse.slimframework.com/t/how-to-use-html5-server-sent-events-sse/879/1 "2016-11-04T16:16:05Z")

</div>

Hi,

See: [http://www.w3schools.com/HTML/html5\_serversentevents.asp](http://www.w3schools.com/HTML/html5_serversentevents.asp)

With just native PHP on the server side it’s a no-brainer, but how do I get this running with Slim3?

I need this badly for a project that updates a browser-client every 3 seconds

---

<div class="post-metadata">

**Author:** ![TheLobos](https://avatars.discourse-cdn.com/v4/letter/t/e9bcb4/32.png) [@TheLobos](https://discourse.slimframework.com/u/TheLobos)\
**Post date:** [November 4, 2016, 5:41pm UTC](https://discourse.slimframework.com/t/how-to-use-html5-server-sent-events-sse/879/2 "2016-11-04T17:41:31Z")

</div>

This is the first time I’ve heard of SSE (yes, my bad) but a first thought would be that if you don’t get a satisfying answer in the time you need, couldn’t the same thing be achieved by calling an Ajax function scheduled through setInterval()?

Maybe this helps, I just wanted to offer this suggestion.

---

<div class="post-metadata">

**Author:** ![SlimStorm](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@SlimStorm](https://discourse.slimframework.com/u/SlimStorm)\
**Post date:** [November 4, 2016, 5:48pm UTC](https://discourse.slimframework.com/t/how-to-use-html5-server-sent-events-sse/879/3 "2016-11-04T17:48:53Z")

</div>

That’s the way I’m doing it right now 🙂 … but It creates a lot of overhead as some intervals are 1 sec. The server is flooded with requests, compared to a simple loop that writest a few bytes every few seconds using SSE.

---

<div class="post-metadata">

**Author:** ![tflight](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.slimframework.com/tflight/32/1205_2.png) [@tflight](https://discourse.slimframework.com/u/tflight)\
**Post date:** [November 5, 2016, 1:55pm UTC](https://discourse.slimframework.com/t/how-to-use-html5-server-sent-events-sse/879/4 "2016-11-05T13:55:18Z")

</div>

@SlimStorm, have a look at this comment in [Adding SSE requests to Slim](https://github.com/slimphp/Slim/issues/1959#issuecomment-250998762).

---

<div class="post-metadata">

**Author:** ![SlimStorm](https://avatars.discourse-cdn.com/v4/letter/s/cab0a1/32.png) [@SlimStorm](https://discourse.slimframework.com/u/SlimStorm)\
**Post date:** [November 5, 2016, 2:04pm UTC](https://discourse.slimframework.com/t/how-to-use-html5-server-sent-events-sse/879/5 "2016-11-05T14:04:15Z")

</div>

Presto, I did it. Reworked the CallbackStream in [https://github.com/phly/psr7examples](https://github.com/phly/psr7examples) and that did the trick.

Javascript snippet

`var evtSource = new EventSource(send_url);
                evtSource.onmessage = function(event) {
                    if ( event.data.substr(0,3) == 'END') {
                        evtSource.close();
                    } else {
                        $('#result').html(event.data);
                    }
                };`

Controller part (Slim3)

`$output = new CallbackStream(function () use ($request) {
            for ($i=0; $i<10; $i++) {
                $time = date('r');
                echo "data: The server time is: {$time}\n\n";
                ob_flush();
                flush();
                sleep(2);
            }
            echo "data: END\n\n";
            ob_flush();
            flush();
            return '';
        });
    return (new Response())
            ->withHeader('Content-Type', 'text/event-stream')
            ->withHeader('Cache-Control', 'no-cache')
            ->withBody($output);`

CallbackStream helper class

[code]\<?php  
namespace Helper;

use Psr\Http\Message\StreamInterface;

/\*\*

- Callback-based stream implementation.

- 
- Wraps a callback, and invokes it in order to stream it.

- 
- Only one invocation is allowed; multiple invocations will return an empty

- string for the second and subsequent calls.  
_/  
class CallbackStream implements StreamInterface  
{  
/_\*
