SSE Server Push

Background

There are many solutions for servers to push data to clients. Besides "polling" and WebSocket

HTML 5 also provides Server-Sent Events (hereinafter referred to as SSE)

Description

Generally speaking, the HTTP protocol only allows clients to initiate requests to the server, and the server cannot actively push data to the client. However, there is a special case where

the server declares to the client that what it is about to send is streaming information.

That is, what is being sent is not a one-time data packet, but a data stream that will be sent continuously.

At this point, the client will not close the connection and will keep waiting for new data streams from the server.

Essentially, this type of communication is a long-duration download in the form of streaming information.

SSE uses this mechanism to push information to the browser using streaming.

Comparison Between WebSocket and SSE

SSE and WebSocket serve similar purposes. Both establish a communication channel between the browser and the server, through which the server pushes information to the browser.

WebSocket is more powerful and flexible because it is a full-duplex channel that allows bidirectional communication;

SSE is a unidirectional channel. Only the server can send to the browser, because streaming is essentially a download. If the browser sends information to the server, it becomes another HTTP request.

Pros and Cons Comparison

• SSE uses the HTTP protocol, which all existing server software supports. WebSocket is an independent protocol.
• SSE is lightweight and simple to use; the WebSocket protocol is relatively complex.
• SSE supports automatic reconnection by default; WebSocket requires you to implement reconnection yourself.
• SSE is generally only used to transmit text. Binary data needs to be encoded before transmission. WebSocket supports binary data transmission by default.
• SSE supports custom message types.

Server Push Solution Used by Informat

Informat implements server-to-client data pushing using SSE technology. The client uses EventSource to call the server's SSE service.

The browser's EventSource instance opens a persistent connection to the HTTP service. Due to the browser's same-origin long connection limit, requests exceeding the connection limit will enter a waiting state.

The current solution is to enable the HTTP2 protocol.

Requirements for Enabling HTTP2

1. A domain name is required, resolved to the server

2. HTTPS must be enabled, with SSL certificates configured in Nginx (1.9.+) or Haproxy (1.8.+)

HTTP2 Configuration Example

Configuration Reference

# https 443 port listening

server {
    # IPV4 add http2 configuration
    listen 443 ssl http2;
    # IPV6 add http2 configuration
    listen [::]:443 ssl http2;
    server_name ai.ainformat.com;
    # Certificate path
    ssl_certificate /xxx/xxx/xxx.pem; 
    ssl_certificate_key /xxx/xxx/xxx.key;

    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    
    ...omitted...
}

# http 80 port listening, redirect all port 80 requests to https (optional)

server {
  listen 80;
  server_name ai.ainformat.com;
  rewrite ^(.*)$ https://$host$1 permanent;
}

Configuration Reference

frontend www
   mode http
   bind *:80
   bind *:443 ssl crt /path/to/cert.crt alpn h2,http/1.1
   http-request redirect scheme https unless { ssl_fc }

Request Example Before and After Enabling