DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
View Events Video Library
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Integrating PostgreSQL Databases with ANF: Join this workshop to learn how to create a PostgreSQL server using Instaclustr’s managed service

Mobile Database Essentials: Assess data needs, storage requirements, and more when leveraging databases for cloud and edge applications.

Monitoring and Observability for LLMs: Datadog and Google Cloud discuss how to achieve optimal AI model performance.

Automated Testing: The latest on architecture, TDD, and the benefits of AI and low-code tools.

Related

  • Reactive Event Streaming Architecture With Kafka, Redis Streams, Spring Boot, and HTTP Server-Sent Events (SSE)
  • Embed a Spreadsheet Into Your Web App
  • Server-Sent Events Using Spring
  • Reactive Messaging Examples for Quarkus

Trending

  • Creating a Deep vs. Shallow Copy of an Object in Java
  • Analyzing Stock Tick Data in SingleStoreDB Using LangChain and OpenAI's Whisper
  • Best Practices for Developing Cloud Applications
  • Extracting Maximum Value From Logs
  1. DZone
  2. Coding
  3. Languages
  4. Server sent events with HTML5 and ColdFusion

Server sent events with HTML5 and ColdFusion

Sagar Ganatra user avatar by
Sagar Ganatra
·
Mar. 31, 11 · News
Like (0)
Save
Tweet
Share
9.96K Views

Join the DZone community and get the full member experience.

Join For Free
There are several ways to interact with the server apart from the traditional request\response and refresh all protocol. They are polling, long polling, Ajax and Websockets (pusherapp). Of all these Ajax and Websockets have been very popular. There is another way to interact with the server such that the server can send notifications to the client using Server Sent Events (SSE). SSE is a part of HTML5 spec: http://dev.w3.org/html5/eventsource/


What are Server Sent Events (SSE)

The specification says "API for opening an HTTP connection for receiving push notifications from a server in the form of DOM events. The API is designed such that it can be extended to work with other push notification schemes such as Push SMS."

Server Sent Events operate over HTTP and it provides an interface 'EventSource'. Web applications can subscribe to an EventSource and receive updates from the server side i.e. the server can push data to the clients as and when it wishes to do so. 


Why not Websockets?

Websockets are very useful in designing various applications such as Chat applications, Games etc,. where in communication takes place over a bi-directional channel between the client and server. However in applications such as Stock ticker, Feed reader the server responds with a message to the client and client receives it and shows it to the user. In such applications the client doesn't post a message very often. In these scenarios SSEs are very useful. Another advantage of using SSEs over Websockets is that it operates over HTTP meaning it doesn't require a special protocol or any server side implementation.


An Example of SSEs with ColdFusion

As mentioned earlier the web application can subscribe to the server using the EventSource interface. So in my javascript I have this code:
var source = new EventSource('outputMessages.cfm');
It's very simple. We are subscribing to the server side code which is  'outputMessages.cfm'.  Once the connection is successful, the client can then start receiving messages from the server. The EventSource object has the following event listeners: message, open and error.
source.addEventListener('message', function(e){

document.body.innerHTML += e.data + "<br>";

});

source.addEventListener('open', function(e){

alert('open')

}, false);

source.addEventListener('error', function(e){

if (e.eventPhase == EventSource.CLOSED) {

alert('closed')

}

}, false);
he EventSource object can then run these scripts in the background with out blocking any scripts. After establishing the connection with the server, the 'onopen' event will be fired and the client is ready to receive the messages from the server. If the server responds with the message then the 'onmessage' event will be fired and it's corresponding event handler will be executed. The 'onerror' event would be fired when the server has completed its execution and as it is observed in the above code the state of the EventSource object would be set to CLOSED. 


The EventSource object expects the server to send data with MIME type text/event-stream and the data will be sent in the following format:
data: Your message here \n\n
It expects the string 'data:' and then the message and then end of line character. The extra end of line character marks the end of message i.e. users can send multiple data lines in this way and then send the end of line character to mark the end of message. The below cfm file does just that:

<cfcontent type="text/event-stream">

<cfsetting requesttimeout="60">



<cffunction name="sendData">

<cfoutput>data: #timeFormat(now(), "medium")# #Chr(10)#</cfoutput>

<cfoutput>data: End of this message #Chr(10)#</cfoutput>

<cfoutput>#Chr(10)#</cfoutput>

<cfflush>

</cffunction>



<cfloop from="1" to="50" index="i">


<cfset sendData()>

<cfthread action="sleep" duration="1000"/>


</cfloop>
The cfcontent tag sets the MIME type to text/event-stream and then the requestTimeout is set to 60 seconds. The function sendData is called 50 times (in cfloop) and will output the data to the client every second. The third cfoutput sends just the end of line character marking the end of message.

The loop would run for 50 seconds and once the served side program has completed its execution the state of the EventSource object would be set to CLOSED. The client then reestablishes the connection with server after 3 seconds and the same loop will be executed again.

SSEs can be of great help in reducing the bandwidth and in cases where the client wants to post some data then the XHR object comes in handy.

Server-sent events Event HTML

Published at DZone with permission of Sagar Ganatra, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Reactive Event Streaming Architecture With Kafka, Redis Streams, Spring Boot, and HTTP Server-Sent Events (SSE)
  • Embed a Spreadsheet Into Your Web App
  • Server-Sent Events Using Spring
  • Reactive Messaging Examples for Quarkus

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: