Learning to use server-to-browser communication channels

Using XHR or Fetch API, we can request a state from the server. This is a one-way communication. If we want real-time communication, we need this in the opposite direction as well. For example, we may want user notifications (your post has been liked, new comment, or new private message) to pop up as soon as the corresponding records change in the DB. The server side has connection to the DB, so we expect the server to notify the client. In the past, to receive these events on the client, we were using tricks that were known under the umbrella term COMET (hidden iframe, long polling, tag long polling, and others). Now we can go with native JavaScript APIs.

Server-Sent Events

The technology that provides a way to subscribe to server-side events is the Server-Sent Events (SSE) API. On the client, we register a server stream (EventSource) and subscribe to the event coming from it:

var src = new EventSource( "./sse-server.php" );

src.addEventListener...