How to implement the WebSocket object

 In This Article, We Discuss How to implement the WebSocket object.

Websocket protocol communications typically use TCP port number 80, so environments that block non-standard Internet connections by using a firewall will still pass WebSocket packets. A webpage is created that calls the websocket.org echo server, which will return the message passed to it. Consider the following webpage that contains a text box for entering a message and a button to send the message to a server, all output is appended to the <div> element whose id is divOutput.

How to implement the WebSocket object
How to implement the WebSocket object


<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

            <title></title>

             <script src=”Scripts/jquary-1.8.2.js”></script>

             <script src=”Scripts/default.js”></script>

</head>

<body>

            <h2>Websocket Test</h2>

             Enter Message: <input type=”text” id=”txtMessage”/>

             <button type=”button” id=”btnSend”>Send</button><br/>

             <div id=”divOutput”></div>

</body>

</html> {codeBox}


Whereas an HTTP URL begins with http:// or https:// for secure HTTP,the WebSocket URL begins with ws:// or wss:// for secure WebSocket protocol.In the browser code, you create a WebSocket object and configure the onopen,onmessage,onerror,and onclose events. call the send method to send a message, and the onmessage event triggers if there is a response. The following default.js file…


/// <reference path=”_reference.js”> />

Var wsUri = ‘ws://echo.websocket.org/’;

var websocket;

$(document) .ready(function () {

              if (checksupported() ){

              connect();

              $( ‘#btnsend’) .click(doSend);

          }

     });

     function writeOutput (message) {

      var output=$( “#divOutput”) ;

      output.html(output.html() + ‘<br />’ + message

   }

    function checkSupported() {

    if (window.websocket) {

      writeOutput(‘Websocket supported!’);

      return true;

    }

else {

         writeOutput(‘Websocket Not supported’) ;

         $(‘#btnSend’).attr(‘disabled’,’disabled’) ;

         retun false;

   }

  }

function connect () {

         websocket = new websocket(wsUri);

         websocket.onopen=function (evt) {onOpen(evt) };

         websocket.onclose=function (evt) {onClose(evt) };

         websocket.onmessage=function (evt) {onMessage(evt) };

         websocket.onerror=function (evt) {onError(evt) };

}

function do Send() {

         if (webSocket.readystate !=webSocket.OPEN)

{

   writeOutput (“NOT OPEN: “ + $(‘#txtMessage’).val() );

   return;

}

writeOutput(“SENT; “ + $(‘#txtMessage’).val() );

websocket.send($(‘#txtMessage’).val () );

}

function onOpen(evt) {

writeOutput(“CONNECTED”) ;

}

function onClose(evt) {

writeOutput(“DISCONNECTED”) ;

}

function onMessage(evt) {

writeOutput(‘RESPONSE: ‘ + evt.data);

}

function onError(evt) {

writeOutput (‘ERROR: ‘ + evt.data);

}{codeBox}

In this example, wsUri is set to the websocket.org echo server, which echoes messages sent to it. The ready function calls the checkSupported function to see whether WebSocket is supported. This is accomplished by checking whether the window object has a WebSocket object. If WebSocket is supported,the connect function is called.

For More Details- Click Here

*

Post a Comment (0)
Previous Post Next Post