How do I "pause" Server Sent Events?

Question

How I pause a Server Sent Event connection? Is it even possible, or do I have to close the SSE and then reopen it and assign all of the event handlers again?

For example I would like to do (this is all theoretical, I do not know the pause/restart function names):

var source = new EventSource(url);

source.addEventListener("something", somefunction, false);
source.addEventListener("somethingElse", somefunction2, false);

//...some code

source.pause();


//...some code

source.restart();

This project may serve as inspiration: [wikimedia-streams](https://github.com/ChlodAlejandro/wikimedia-streams) (main code is [here](https://github.com/ChlodAlejandro/wikimedia-streams/blob/master/src/index.ts)). — Gras Double, Mar 18 '22 at 08:00
The project linked above also has features "autoreconnect on lost connection" and ability to choose the starting point in the stream, by supplying a header "Last-Event-ID". Though, it requires this [EventSource implementation](https://github.com/EventSource/eventsource) instead of the browser native implementation. — Gras Double, Mar 18 '22 at 08:09

score 4 · Accepted Answer · edited Mar 18 '22 at 15:25

4

Yes, that's what technically needs to happen but you can abstract it away. Note: This one only connects after you do .connect()

function EventSource2(url) {
    this.url = url;
    this.es = null;
    this.listeners = {};
}

EventSource2.prototype = {
    constructor: EventSource2,
    
    
    connect: function() {
        this.es = new EventSource(this.url);
        this.bindEvents();
    },
    
    disconnect: function() {
        this.es.close();
        this.es = null;
    },
    
    bindEvents: function() {
        for ( var type in this.listeners ) {
            var evs = this.listeners[type];
            for( var i = 0; i < evs.length; ++i ) {
                this.es.addEventListener( type, evs[i], false );
            }
        }
    },
    
    addEventListener: function( type, fn ) {
        if( !this.listeners[type] ) {
            this.listeners[type] = [];
        }
        
        this.listeners[type].push( fn );
        if( this.es ) {
            this.bindEvents();
        }
    }
}

Usage:

var source = new EventSource2(url);

source.addEventListener("something", somefunction, false);
source.addEventListener("somethingElse", somefunction2, false);

source.connect();

source.disconnect();

source.connect();

edited Mar 18 '22 at 15:25

Naftali

144,921
39
244
303

answered Jul 09 '12 at 15:33

Esailija

138,174
23
272
326

I was thinking about something like this, but it seemed _hacky_ – Naftali Jul 09 '12 at 15:35
4

Nothing *hacky* about it, this is exactly why abstractions over low level constructs exist. – Marcus Stade Aug 17 '12 at 02:01
There's a little typo in function bindEvents. The L should be uppercase in this.es.addEventListener(). – user1915746 Mar 16 '17 at 10:08
@Naftali Why the rollback? – Gras Double Mar 22 '22 at 15:03
@GrasDouble well... I rolled back bc I am not sure why code in the answer from 10 years ago was changed! – Naftali Apr 11 '22 at 22:48
Wow, I didn't think EventSource were more than 10 years old! (and still not supported by IE…) Please note my changes consist only of fixing obvious mistakes. For example, revision 3 fixes unused arguments for snippet's `addEventListener` (which has the same name as browser's `Element.addEventListener`). – Gras Double Apr 13 '22 at 00:35

How do I "pause" Server Sent Events?

1 Answers1