• Latest
  • All
  • News
  • Business

HTML5 Web Sockets Example

Jun 8, 2017
How are Slots & Other Online Casino Games Programmed?

Slot Selection: Choose The Game That Applies Best To Your Interests

Mar 17, 2023
Five Top Tips On How To Choose The Best Gaming Headset

Five Top Tips On How To Choose The Best Gaming Headset

Mar 17, 2023
A Guide On How To Choose The Best Gaming Mouse

A Guide On How To Choose The Best Gaming Mouse

Mar 17, 2023
Buying A Gaming Monitor: What You Should Look For Before Choosing The One To Buy

Buying A Gaming Monitor: What You Should Look For Before Choosing The One To Buy

Mar 17, 2023
A Step-by-Step Guide on How to Get Your CleanMyMacX Activation Number

Different Factors To Consider When You Want To Choose A Keyboard For Gaming

Mar 17, 2023
10 games that are designed to keep you engaged

Useful Tips for Choosing Your New Gaming Chair

Mar 17, 2023
Discovery Phase For Software Development: How Much Does It Cost?

The 3 Main Reasons To Identify Security Problems in Software Code

Mar 15, 2023
The Evolution Of Air Conditioning Technology And Its Impact on the Way We Live And Consume

The Evolution Of Air Conditioning Technology And Its Impact on the Way We Live And Consume

Mar 14, 2023
What You Should Know About The Maker Protocol: A Comprehensive Guide

What You Should Know About The Maker Protocol: A Comprehensive Guide

Mar 14, 2023
Tableau Developer Career Path in 2023

Tableau Developer Career Path in 2023

Mar 13, 2023
5 Best Data Security Practices

Digital transformation trends businesses need to watch in 2023

Mar 13, 2023
The Biggest Innovations in Business Communication Technology

How to Leverage the Power of Intelligent Leadership

Feb 23, 2023
  • Guest Posts
  • Advertise
  • Contact Us
  • Privacy Policy
Tuesday, March 21, 2023
Tech Featured
  • Home
  • Latest Tech
  • Apple
  • How to’s
  • Apps
  • Automobiles
  • Gadgets
  • Gaming
  • Reviews
  • Tech Tips
No Result
View All Result
No Result
View All Result
Tech Featured
No Result
View All Result
Home News

HTML5 Web Sockets Example

by techfeatured
Jun 8, 2017
in News
0
0
SHARES
9
VIEWS
Share on FacebookShare on Twitter

HTML5 Web Sockets will single handedly revolutionize web technologies as we know it. The purpose of this post is to explain what techniques have been used to simulate server push until now, define HTML5 web sockets, and then give an example of how to use it in your HTML5 application.

What is polling?

Until now, the web has been one directional. In other words, web pages could only send a request to a web server, and not the other way around. Once AJAX came along in 2005, web developers quickly adopted techniques to simulate a request from server to client known as polling. There are two types of polling, short polling and long polling.

Short polling is implemented by making a request to the web server every few seconds or so to see if data has changed. If it has, the web server will respond with the new data. Otherwise, it will respond with a blank message. The drawback to this technique, however, is both a surplus is server requests and an overhead in CPU usage on the web server to constantly check if an update to the data has been made.

Long polling is implemented by making a single request to the web server and keeping the connection open until the data has changed, at which point the web server sends back a response. The drawback to this technique, like short polling, is that the web server still has to check if the data has changed every few seconds or so, creating an overhead in CPU usage.

What’s an HTML5 web socket?

This is where HTML5 web sockets come in. HTML5 will be the first HTML specification to support client side web sockets. In other words, when data changes on the web server, the web server can send a request to client, eliminating the need for polling.

HTML5 web socket example

Step 1: Create a WebSocket with a valid URL

Create a new WebSocket connection to WebSocket server at finance.example.com.

var stockTickerWebSocket = new WebSocket(“ws://finance.example.com”);

Note that a ws:// and wss:// prefix indicate a WebSocket and a secure WebSocket connection respectively. The default port for WebSockets is 81 and the default port for secure WebSocket is 815.

Step 2: Attach JavaScript Callback Functions

Associate event listeners to handle each phase of the connection life cycle.

stockTickerWebSocket.onopen = function(evt) {

alert(“Stock Ticker Connection open…”);

};

stockTickerWebSocket.onmessage = function(evt) {

alert( “Received Ticker Update: ” + evt.data);

};

stockTickerWebSocket.onclose = function(evt) {

alert(“Connection closed.”);

};

Step 3: Send and Receive Data

To send a message to the server, simply call the postMessage method on the webocket with the content you wish to send to the server.

stockTickerWebSocket.postMessage(“BUY: GOOG,[email protected]″);

This will send the BUY message to the server. Any message coming from the server will be delivered to the onmessage callback registered in step #2.

Step 4: Disconnect When Done

When completed, call the disconnect() method to close the WebSocket connection.

stockTickerWebSocket.disconnect();

As demonstrated in the example above, there are no HTTP requests made to the server from the client side to retrieve data, instead the data was pushed to the client from the server – when it becomes available.

When a new WebSocket connection is established the browser opens an HTTP connection to the server first and then negotiates with the server to upgrade the connection to a dedicated and persistent WebSocket connection. This process automatically sets up a tunnel through to the server – passing through all network agents (proxies, routers, and firewalls) in the middle (very much like HTTPS establishing a secure, endtoend connection), solving numerous issues that the various Comet programming techniques encountered. Once established the WebSocket is a fullduplex channel between the client and the server.

Example provided by http://www.indicthreads.com

Tags: androidimaciphonemacbooktechnology news
ShareTweetShareSendShare

For any queries, you can reach us at [email protected]

Latest Posts

  • Slot Selection: Choose The Game That Applies Best To Your Interests
  • Five Top Tips On How To Choose The Best Gaming Headset
  • A Guide On How To Choose The Best Gaming Mouse
  • Buying A Gaming Monitor: What You Should Look For Before Choosing The One To Buy
  • Different Factors To Consider When You Want To Choose A Keyboard For Gaming
Tech Featured

© 2022. All Rights Reserved.

Navigate Site

  • Guest Posts
  • Advertise
  • Contact Us
  • Privacy Policy

Follow Us

No Result
View All Result
  • Home
  • Latest Tech
  • Apple
  • How to’s
  • Apps
  • Automobiles
  • Gadgets
  • Gaming
  • Reviews
  • Tech Tips

© 2022. All Rights Reserved.