How to use Websockets in HTML5

In this article I am going to explain about Websockets in Html5.
  • 2827

HTML5 Websockets

In Html5 websockets is an communication technique for web application which operates over a single socket and is exposed via JavaScript interface. The websocket provide an API that enable webpage to use websocket protocol for communication from the remote host. Websocket defines two-way communication, bi-direction channal that operate through a single TCP stock over the web. Websocket also provide efficient, low latency and low cost full-duplex communication between server and client. 

For sending data Browser to server we firstly have to create connection with web server then we call send() method.  For receiving data fro server to client side we use onmessage event handler.

How to create websocket object

var webObj = new WebSocket(url Name, [protocal] );

Attribute of Websocket

(1) Websoc.ReadyState :- ReadyState define state of connection. It is an Readonly attribute. ReadyStete has some value that is folling.

  • Value 1 :- That represent connection has not establish.
  • Value 2 :-That represent connection has been establish and server is ready to communication.
  • Value 3 :- That represent connection is going through handshake.
  • Value 4 :-That represent connection has been closed.

(2) Websoc.bufferedAmount :- bufferedAmount define number of bytes of UTF-8 text that has been queued by using send() method.

Websocket event

websocket event occurs when we create object of server and establish connection and close connection. That are following..

  • Open :-Open event occurs when connection is establish.
  • Close :-Close event occurs when connection is close.
  • OnMessage :-OnMessage event occurs when client receive data fro the server.
  • Error :-Error event occurs when any error comes in communication.

Websocket Method

  • Send() :-Send method() use for send data to server.
  • Close() :-Close() method use for stop the connection.

How to establish connection from the server

Before establish connection from the server we need an server that supports websocket and Download mod_pywebsocket-x.x.x.tar.gz and install it.

For start server open download file and go in pywebsocket-x.x.x/src/mod_pywebsocket folder and run this command

$sudo python standalone.py -p 1653 -w

After it we will run this html code

 

<html>

<head>

    <script type="text/javascript">

        function Testsocket() {

            if ("WebSocket" in window) {

                alert("your browsObjer supported to websocket");

 

                var wsObj = new WebSocket("wsObj://localhost:1653/echo");

                wsObj.onopen = function () {

 

                    wsObj.send("send message");

                    alert("Message has been sent");

                };

                wsObj.onmessage = function (str) {

                    var received_msg = str.data;

                    alert("message is receiveing...");

                };

                wsObj.onclose = function () {

 

                    alert("connectio has been closed");

                };

            }

            else {

 

                alert("your browsObjer does not supported to websocket");

            }

        }

    </script>

</head>

<body>

    <div id="dvm">

        <a href="javascript:Testsocket()">click for run Websocket</a>

    </div>

</body>

</html>

After run this following message will be show than after we can communicate to server

socket.jpg

Further Readings

You may also want to read these related articles: here
Ask Your Question 
 
Got a programming related question? You may want to post your question here
 

 

© 2020 DotNetHeaven. All rights reserved.