Web sockets online Tutorial

Question: What is WEBRTC?
WebRTC is an API that support browser-to-browser applications for voice calling, video calling, and P2P file sharing.

Question: What is Web Socket?
WebSocket is a protocol, providing full-duplex communication channels over a single TCP connection.

Question: How does WebSocket work?
WebSockets provide a persistent connection between a client and server that both parties can use to start sending data at any time.
The client establishes a WebSocket connection through a process known as WebSocket handshake.

Question: Why should I use WebSockets?
Because the server can actively push information to the client any time.
And the client can push information to the server without HTTP requests.
WebSocket is designed for low protocol and wire-level overhead - chunky HTTP headers.

Question: What is difference between WebRTC vs Websockets?
WebRTC is designed for high-performance, high quality communication of video, audio and arbitrary data (Browser to Browser).
WebSocket is designed for bi-directional communication between client and server (Browser to Server and vice versa).

Question: Importance of Websockets?

Web Socket is an independent TCP-based protocol but support other protocol.
Web Socket is a transport layer on top.
Define sub-protocols for example XMPP, STOMP, and AMQP.
Used JavaScript that can interpret the Web Socket handshake, establish and maintain a Web Socket connection.

Question: How websocket established the connection ?

The client establishes a connection through Web Socket handshake.
Client sending a HTTP request to the server.
Header is also sent from which server can get the details

Question: Give example of Web Socket connection?

//Declare variables
var output;
var wsUri = "ws://echo.websocket.org/";

//Defination of init function
function init() {
    output = document.getElementById("output");
    testWebSocket();
}
function testWebSocket() {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) {
        onOpen(evt)
    };
}

function onOpen(evt) {
    output.innerHTML = 'Connected';
}

//Call on load
window.addEventListener("load", init, false);

ws://echo.websocket.org/ Here ws is used for Web socket.
It is public URL you can use it for testing.
After testing, you need to create your own because you can't use it in your production OR development server.

Question: How to send error message in Web Socket?

  
    var wsUri = "ws://echo.websocket.org/";
    var output;

    /* Init the WebSocket */          
    function init() {
       output = document.getElementById("output");
       startWebSocket();
    }

    /* Declare the Socket Function */          
    function startWebSocket() {
       websocket = new WebSocket(wsUri);

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

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

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

    /* Function Defination */                  
    function onOpen(evt) {
       writeToScreen("Web Socket Connected");
       doSend("This is custom message");
    }

    function onClose(evt) {
       writeToScreen("Web Socket Dis Connected");
    }

    function onError(evt) {
       writeToScreen('Error :' + evt.data);
    } 

    function doSend(message) {
       websocket.send(message);
       writeToScreen("Sent Data: " + message); 

    }

    function writeToScreen(message) {
       var pre = document.createElement("div");          
       pre.innerHTML = message; output.appendChild(pre);
    }

    window.addEventListener("load", init, false);

Web Technology Experts Notes

Wednesday 13 September 2017