Curriculum
Course: HTML Basic
Login

Curriculum

HTML Basic

HTML Introduction

0/1

HTML Editors

0/1

HTML Basic

0/1

HTML Elements

0/1

HTML Attributes

0/1

HTML Headings

0/1

HTML Paragraphs

0/1

HTML Styles

0/1

HTML Formatting

0/1

HTML Quotation

0/1

HTML Comments

0/1

HTML Colors

0/1

HTML CSS

0/1

HTML Links

0/3

HTML Images

0/3

HTML Favicon

0/1

HTML Page Title

0/1

HTML Tables

0/8

HTML Lists

0/4

HTML Block and Inline

0/1

HTML Div

0/1

HTML classes

0/1

HTML id

0/1

HTML Iframes

0/1

HTML Java Script

0/1

HTML File Paths

0/1

HTML - The Head Element

0/1

HTML Layout

0/1

HTML Responsive

0/1

HTML Computer Code

0/1

HTML Semantic

0/1

HTML Style Guide

0/1

HTML Entities

0/1

HTML Symbols

0/1

HTML Emojis

0/1

HTML Charsets

0/1

HTML URL Encode

0/1

HTML vs. XHTML

0/1

HTML Forms

0/6

HTML Graphics

0/2

HTML Media

0/5

HTML APIs

0/5
Text lesson

HTML SSE

Server-Sent Events – One Way Messaging

Server-Sent Events (SSE) enable a web page to receive automatic updates from a server without needing to constantly request updates.

This technology is used for real-time updates such as Facebook or Twitter feeds, stock prices, news updates, sports scores, and more.

Browser Support

The numbers in the table indicate the earliest browser version that fully supports Server-Sent Events (SSE).

sse

Receive Server-Sent Event Notifications

The EventSource object is employed to receive notifications from server-sent events.

Example

var source = new EventSource(“demo_sse.php”);
source.onmessage = function(event) {
  document.getElementById(“result”).innerHTML += event.data + “<br>”;
};

Here’s an explanation of the example:

  1. Instantiate a new EventSource object and specify the URL of the page that sends updates (e.g., “demo_sse.php”).
  2. Each time an update is received, the onmessage event is triggered.
  3. When the onmessage event occurs, insert the received data into the element with id=”result”.

Check Server-Sent Events Support

In the “tryit” example above, additional lines of code were included to verify browser support for server-sent events.

if(typeof(EventSource) !== “undefined”) {
  // Yes! Server-sent events support!
  // Some code…..
} else {
  // Sorry! No server-sent events support..
}

Server-Side Code Example

To enable the example above to function, you require a server capable of sending data updates, such as PHP or ASP.

Here’s a simple syntax for server-side event streaming. Set the “Content-Type” header to “text/event-stream” to begin sending event streams.

Example PHP code (demo_sse.php):

<?php
header(‘Content-Type: text/event-stream’);
header(‘Cache-Control: no-cache’);

$time = date(‘r’);
echo “data: The server time is: {$time}\n\n”;
flush();
?>

Code in ASP (VB) (demo_sse.asp):

<%
Response.ContentType = “text/event-stream”
Response.Expires = -1
Response.Write(“data: The server time is: ” & now())
Response.Flush()
%>

Here’s an explanation of the code:

  1. Set the “Content-Type” header to “text/event-stream”.
  2. Specify that the page should not be cached.
  3. Output the data to send (always start with “data: “).
  4. Flush the output data back to the web page.

The EventSource Object

In the examples above, we utilized the onmessage event to receive messages. However, other events are also available:

Events

Description

onopen

When a connection is established with the server

onmessage

Upon receiving a message

onerror

In the event of an error

 

 

 

Previous