Enroll Course

100% Online Study
Web & Video Lectures
Earn Diploma Certificate
Access to Job Openings
Access to CV Builder


Chapters


HTML5 - Introduction

HTML5 - Syntax
HTML5 - Attributes
HTML5 - Events
HTML5 - Web Forms 2.0
HTML5 - MathML
HTML5 - Web Storage
HTML5 - Web SQL Database
HTML5 - Server Sent Events
HTML5 - WebSockets
HTML5 - Canvas
HTML5 - Audio & Video
HTML5 - Geolocation
HTML5 - Microdata
HTML5 - Drag & Drop
HTML5 - Web Workers
HTML5 - IndexedDB
HTML5 - Web Messaging
HTML5 - CORS
HTML5 - Web RTC


Outlines


WebSocket Attributes

WebSocket Events
WebSocket Methods
WebSocket Example
Client-Side HTML & JavaScript Code
Install Pywebsocket
Starting The Server

ENROLL NOW










Online Certification Courses

HTML5 - WebSockets

HTML5 Course. HTML5 Certification, HTML5 Training, HTML5 Tutorials. 

Websocket's are a next-gen two-way communication technology that is meant for applications on the web that operates over a single socket and is made available through a Javascript interface in HTML5 supported browsers.

Immediately you get a web socket connection to the web server, you'll have the access to send data from the web browser to the server just by calling the send() and also accept incoming data from the server to the web browser by an onmessage event handler. 

The code below is the API that initiates a new WebSocket object as specified by HTML5

var Socket = new WebSocket(url, [protocol] );

Here first parameter, URL, specify the URL to which to connect. The second parameter, protocol is mainly optional and not always necessary, and if present specifies a sub-protocol that the server must support for the connection to be successful.

WebSocket Attributes

The following are the attribute that is available for the WebSocket object.

Sr.No. Attribute & Description
1

Socket.readyState

The read-only attribute readyState stands for the current state of the connection. It can have the following values:

  • when it's a value of 0, it indicates that the connection has not yet been established.

  • when it's a value of 1, it indicates that the connection is established and communication is possible.

  • When it's a value of 2, it indicates that the connection is going through the closing handshake.

  • When it's a value of 3, it indicates that the connection has been closed or could not be opened.
2

Socket.bufferedAmount

The bufferedAmount stands for the value/number of bytes of UTF-8 text that have been queued using the send() function and it is read-only.

WebSocket Events

The following are the events that are available for the WebSocket object.

Event Event Handler Description
open Socket.onopen This event is initiated when the socket connection is established.
message Socket.onmessage This event is initiated when the client receives data from the server.
error Socket.onerror This event is initiated when there is an error in communication.
close Socket.onclose This event is initiated when the connection is closed.

WebSocket Methods

The following are the methods that are available to work with the WebSocket object.

Sr.No. Method & Description
1

socket.send()

The send(data) method sends data using the connection.
2

Socket.close()

The close() method is used to terminate an existing connection.

WebSocket Example

A WebSocket is a two-direction TCP socket that occurs between the client and the server. The TCP socket initiates as an HTTP connection and is then upgraded to a TCP socket after an HTTP handshake. After the HTTP handshake, both the client and the server can transmit data.

Client-Side HTML & JavaScript Code

There are currently only a few web browsers that support the WebSocket() interface. You can test out the code below with the newest version of Chrome, Mozilla, Opera, and Safari.

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type = "text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is availabe in your Browser!");
               
               // Let us initiate a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen = function() {
                  
                  // Web Socket is connected, let's transmitt data using send()
                  ws.send("This is a message");
                  alert("Message is sent...");
               };
				
               ws.onmessage = function (evt) { 
                  var received_msg = evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose = function() { 
                  
                  // websocket is closed.
                  alert("Connection is terminated..."); 
               };
            } else {
              
               // The browser doesn't have support WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id = "sse">
         <a href = "javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

Install pywebsocket

Just before you test the code above, you need to install a server that has support for WebSocket. You have to download mod_pywebsocket-x.x.x.tar.gz from pywebsocket which main aim is to create a Web Socket extension for the Apache HTTP server and it can be installed using the following steps:

1. Unzip and untar the file you downloaded.

2. Go into pywebsocket-x.x.x/src/ directory.

3. Type $python setup.py build into your terminal

4. Type $sudo python setup.py install into your terminal

5. Then open the document by typing:

        $pydoc mod_pywebsocket

This will install the package into your python environment.

Starting the Server

Navigate to the pywebsocket-x.x.x/src/mod_pywebsocket directory and run the following:

$sudo python standalone.py -p 9998 -w ../example/

This will kickstart the server and it will be listening at port 9998 and use the handlers directory listed by the -w option where our echo_wsh.py is.

Now making use of the Chrome browser, open the HTML file we created from the beginning. If your browser has support for WebSocket(), then an alert will be displayed indicating that your web browser has support for WebSocket and then you can click on the "Run WebSocket" and you'll receive Goodbye message sent by the server script. 

< Previous Page Next Page >
[ CHOOSE COURSE ]
ENROLL NOW

SIIT is on a mission to make technology education and professional training more accessible, so more people can show off their talents and take their tech careers to the next level. All courses are tailored to meet individual specific career needs, leading to Tech Skills Acquisition and Professional Certification.

Corporate Training for Business Growth and School