HTML5 SSE Tutorial

SSE stand for Server Sent Event. Server-Sent Events are real-time events send by the server and received by the browser. They are similar to web sockets in that they happen in real time, however they are very much a one-way communication method from the server.

These events are similar to basic JavaScript events that occur in the browser  like- click events, except you can control the name of the event and the data associated with it. Server Sent Events allow a web page to get updates from a server.This is new in html5. The SSE support all the browser except the internet explorer.

Some simple examples of applications that could make use of Server-Sent Events are:

• A real-time chart of streaming stock prices
• Real-time news coverage of an important event.
• A live Twitter wall fed by Twitter’s streaming API
• A monitor for server statistics like uptime, health, and running processes

Server-Sent Event Properties :

Server-Sent Events are more than just a one-way web socket. They have some unique features:

• The connection stream is from the server and read-only. This suits lots of applications, some examples of which we listed above.
• They do not a special protocol rather they use regular HTTP requests for the persistent connection.
• If the connection drops, the EventSource fires an error event and automatically tries to reconnect. The server can also control the timeout before the client tries to reconnect.
• Clients can send a unique ID with messages. When a client tries to reconnect after a dropped connection, it will send the last known ID. Then the server can see that the client missed n messages and send the backlog of missed messages on reconnect.

Message Format :

A simple message do not require much:

data: this is a simple message <blank line>

You notice that the end of a message is indicated by a blank line.

For a message with multiple lines:

data: this is line one data: and this is line two

You can send message IDs to be used if the connection is dropped:

id: 33 data: this is line one data: this is line two