Another AJAX-based technique is Server-Sent Events (SSE), which is also known as Server Push or HTTP Streaming. In this, the client opens a connection to the server via an initial HTTP request, and the server sends events to the client when there is new information available. So, if the usual functions of your clients are similar to stock tickers or news feeds and they need updates from the server with time, then the SSE technique is the ideal solution for you. By the way, if a client has new information to send to the server, it can send it through a new HTTP request.

SSE is useful in the following cases:

The advantages of SSE are as follows:

The disadvantages of SSE are as follows:

The following browsers are supported:

The EventSource class is used to receive SSE. This class connects via a specified URL to a server over HTTP and receives server events without closing the connection. The events come in a text/event-stream format. To open a connection to a server and start receiving events, we create a new instance of the EventSource class via a factory constructor and pass the URL of the resource that generates the events through it. Once the connection is established, we wait for the messages.

On the server side, each message is sent as a block of text terminated by a pair of new lines. The text data is encoded with UTF-8. Each message consists of one or more lines of text listing the fields for that message. Each field is represented by the field name, followed by a colon and the text data for that field's value. Here is an example of data-only messages:

; this is a comment
data: some text

data: another text

In the preceding code, the first line is just a comment. All the text messages starting with a colon character are comments. A comment could be useful as Keep-Alive if the messages are not sent regularly. The second and the third line contains just a data field with a text value. The third line contains an extra new line character terminating a message. Several events could be sent via a message. Each event has a name specified in the event field and data field whose values are any string. Data could also be in a JSON format as shown in the following code:

event: userLogon
data: {"username": "John", "time": "01:22:45", "text": "Hello World"}

event: userMessage
data: "Any data"

You can use unnamed events in messages without the event field. The SSE implementation uses message as a name for unnamed events. Each event might have an id. In this scenario, data can be combined as follows:

id: 123
data: some text
data: {"text": "Another text}

Let's take a look at the server side of our example:

      //…
main() {
  final allUrls = new RegExp('/(.*)'),

  HttpServer.bind(urls.serverAddress, urls.serverPort)
  .then((server) {
    print("Server runs on ${server.address.host}:${server.port}");
    new Router(server)
        ..serve(urls.dataUrl, method: 'GET').listen(processSSE)
        ..serve(allUrls).listen(serveDirectory('', as: '/'))
        ..defaultStream.listen(send404);
  });
}

String fetchData() {
  return dataGenerator.nextInt(100).toString();
}

The EventSource class instance, which is created on the client side, opens a connection that submits the HTTP request with the text/event-stream value in the accept header. This is a signal for the server to start the SSE communication. In our example, we send the logon event first. The server connection remains open to the client so we can send message events periodically, as shown in the following code:

processSSE(HttpRequest request) {
  if (request.headers.value(HttpHeaders.ACCEPT) == EVENT_STREAM) {
    writeHead(request.response);
    int num = 0;
    
    new Timer.periodic(new Duration(seconds:5), (Timer t) {
      sendMessageEvent(request.response, num++);
    });
    
    sendLogonEvent(request.response);
  }
}

To allow you to send the push events, the output buffering in HttpResponse must be disabled. In addition to this, you need to specify content type, cache control, and the type of connection via the header attributes, as follows:

writeHead(HttpResponse response) {
  response.bufferOutput = false;
  response.headers.set(HttpHeaders.CONTENT_TYPE, EVENT_STREAM);
  response.headers.set(HttpHeaders.CACHE_CONTROL, 'no-cache'),
  response.headers.set(HttpHeaders.CONNECTION, "keep-alive");
}

To send a message, you can use the writeln method of response. It automatically assigns to a newline character to each string, so you need to add only one newline character at the end of your event. Finally, the flush method of the response pushes the event to the client, as shown here:

sendMessageEvent(HttpResponse response, int num) {
  print("Send Message event $num");
  response.writeln('id: 123'),
  response.writeln('data: {"msg": "hello world", "num": $num, "value": ${fetchData()}}
'),
  response.flush();
}

For the logon message, we create a custom-defined userLogon event type. If the connection opened via the EventSource terminates, the web browser will automatically re-establish the connection to the server after three seconds. You can change this value via the retry property of the event. This value must be an integer that specifies the reconnection time in milliseconds:

sendLogonEvent(HttpResponse response) {
  print("Send Logon event");
  response.writeln('event: userlogon'),
  response.writeln('retry: 15000'),
  response.writeln('id: 123'),
  response.writeln('data: {"username": "John", "role": "admin"}
'),
  response.flush();
}

The SSE code implementation at the client side is as follows:

import 'dart:html';
import 'urls.dart' as urls;

var url = "http://${urls.serverAddress}:${urls.serverPort}${urls.dataUrl}";
String get timeStamp {
  DateTime dt = new DateTime.now();
  return " (${dt.minute}:${dt.second})";
}

responseHandler(DivElement log, String data) {
  DivElement item = new DivElement();
  item.text = data + timeStamp;
  log.insertAdjacentElement('beforebegin', item);
}

In the preceding code, we created an instance of EventSource with the specified URL. From now, we will start listening to the events from the server. We add the open and error event listeners. The EventSource class informs the code about the closed connection from the server side via changes in the readyState property. The message listener handles all the unknown events. A special event listener for the userlogon event handles the sort of events that could be added via the addEventListener method of the EventSource class. The event keeps the message information in the data property. An event identifier assigned on the server side is available via the lastEventId property, as shown in the following code:

main() {
  DivElement log = querySelector("#log");
  EventSource sse = new EventSource(url);
  sse.onOpen.listen((Event e) {
    responseHandler(log, "Connected to server: ${url}");
  });

  sse.onError.listen((Event e) {
    if (sse.readyState == EventSource.CLOSED) {
      responseHandler(log, "Connection closed");
    } else {
      responseHandler(log, "Error: ${e}");
    }
  });
  sse.onMessage.listen((MessageEvent e) {
    responseHandler(log, 
      "Event ${e.lastEventId}: ${e.data}");
  });
  sse.addEventListener("userlogon", (Event e) {
    responseHandler(log, 
      "User Logon: ${(e as MessageEvent).data}");
  }, false);
}

Now, create a Dartium launcher, run the server, and open index.html in the web browser to see the following result:

Connected to server: http://localhost:8080/data (43:33)
User Logon: {"username": "John", "role": "admin"} (43:33)
Event 123: {"msg": "hello world", "num": 0, "value": 45} (43:38)
Event 123: {"msg": "hello world", "num": 1, "value": 1} (43:43)
Event 123: {"msg": "hello world", "num": 2, "value": 65} (43:48)
Event 123: {"msg": "hello world", "num": 3, "value": 10} (43:53)
//…

Let's take a look at the server log to see the server-generated messages:

Server runs on 127.0.0.1:8080
Send Logon event
Send Message event 0
Send Message event 1
Send Message event 2
Send Message event 3
//…