WebSocket – First steps – part 001. – free-tutorials.org with free tutorials and source code

I do not think that is so sought after. Most people prefer products WebRTC.
Also on the good reason of using WebRTC instead of WebSocket is the latency of streaming.
Is the protocol for two-way communication with a remote host.
The WebSocket interface and defines a full-duplex communication channel and operates through a single socket over the Web. The WebSocket detects the presence of a proxy server.
The next step is to automatically set up a tunnel to pass through the proxy.
The tunnel is established by issuing an HTTP CONNECT statement to the proxy server.
Let’s see one simple example:

<!DOCTYPE html>
  <meta charset="utf-8" />
  <title>Tutorial free-tutorials.org - testing websocket</title>
  <script language="javascript" type="text/javascript">

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

  function init()
  {
    output = document.getElementById("output");
    test_web_socket();
  }

  function test_web_socket()
  {
    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 onOpen(evt)
  {
    screen_output("open connection");
    doSend("websocket working");
  }

  function onClose(evt)
  {
    screen_output("close connection");
  }

  function onMessage(evt)
  {
    screen_output('<span style="color: blue;">reply: ' + evt.data+'</span>');
    websocket.close();
  }

  function onError(evt)
  {
    screen_output('<span style="color: red;">error is:</span> ' + evt.data);
  }

  function doSend(message)
  {
    screen_output("message is: " + message);
    websocket.send(message);
  }

  function screen_output(message)
  {
    var pre = document.createElement("p");
    pre.style.wordWrap = "break-word";
    pre.innerHTML = message;
    output.appendChild(pre);
  }

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

  </script>

  <h2>tutorial about websocket test</h2>

  <div id="output"></div>

<!DOCTYPE html>

<title>Tutorial free-tutorials.org - testing websocket</title>

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

var output;

function init()

{

output = document.getElementById("output");

test_web_socket();

}

function test_web_socket()

{

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 onOpen(evt)

{

screen_output("open connection");

doSend("websocket working");

}

function onClose(evt)

{

screen_output("close connection");

}

function onMessage(evt)

{

screen_output('<span style="color: blue;">reply: ' + evt.data+'</span>');

websocket.close();

}

function onError(evt)

{

screen_output('<span style="color: red;">error is:</span> ' + evt.data);

}

function doSend(message)

{

screen_output("message is: " + message);

websocket.send(message);

}

function screen_output(message)

{

var pre = document.createElement("p");

pre.style.wordWrap = "break-word";

pre.innerHTML = message;

output.appendChild(pre);

}

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

</script>

<h2>tutorial about websocket test</h2>

It is one simple open and close and sending a message with WebSocket and javascript show events.
The most important part is to define the WebSocket:

    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) };

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) };

The next steps are to use it with the default javascript event system and window show message.

Leave a Reply Cancel reply