<title>CloudI WebSockets Testing</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="style.css" />

<script type="text/javascript">

var web_socket = undefined;

function is(type, obj)

if (obj === undefined)

return type === 'undefined';

else if (obj === null)

return type === 'null';

else

return type === Object.prototype.toString.call(obj).slice(8, -1);

String.prototype.startsWith = function (str)

return this.slice(0, str.length) == str;

function view(connected)

document.getElementById("service_name").contentEditable = ! connected;

document.getElementById("request").contentEditable = connected;

document.getElementById("response").contentEditable = connected;

function send()

if (web_socket == undefined)

{

alert("Not connected!");

return;

}

var request = document.getElementById("request").innerHTML.trim();

web_socket.send(request);

console.log("Request (out): " + request);

var br = document.createElement("br");

document.getElementById("responses").appendChild(br);

var service_name = document.getElementById("service_name").innerHTML.trim();

var text = document.createTextNode(service_name +

" request(" + request + ")");

document.getElementById("responses").appendChild(text);

function open()

if (! ("WebSocket" in window))

{

alert("This browser does not support WebSockets");

return;

}

var service_name = document.getElementById("service_name").innerHTML.trim();

web_socket = new WebSocket("ws://127.0.0.1:6464" + service_name);

console.log("Connecting to ws://127.0.0.1:6464" + service_name);

web_socket.onopen = function()

{

console.log("Connected");

view(true);

document.getElementById("connection").style.backgroundColor = '#00FF00';

};

handle_message = function (data)

{

if (data.startsWith("notification:"))

{

// client state check to determine this is an incoming

// service request, not an incoming response

console.log("Request (in): " + data);

var br = document.createElement("br");

document.getElementById("requests").appendChild(br);

var service_name =

document.getElementById("service_name").innerHTML.trim();

var text = document.createTextNode(service_name + "/websocket" +

" request(" + data + ")");

document.getElementById("requests").appendChild(text);

var response = document.getElementById("response").innerHTML.trim();

web_socket.send(response);

console.log("Response (in): " + response);

text = document.createTextNode(" -> response(" +

response + ")");

document.getElementById("requests").appendChild(text);

}

else

{

console.log("Response (out): " + data);

var text = document.createTextNode(" -> response(" + data + ")");

document.getElementById("responses").appendChild(text);

}

};

web_socket.onmessage = function (evt)

{

var data = evt.data;

if (is("Blob", data))

{

// for the example, treat binary as text

var reader = new FileReader();

reader.readAsText(data, "text/plain");

reader.onload = function (reader_evt) {

data = reader_evt.target.result;

handle_message(data);

};

}

else

{

handle_message(data);

}

};

web_socket.onclose = function()

{

web_socket = undefined;

console.log("Connection closed");

view(false);

document.getElementById("connection").style.backgroundColor = '#FF0000';

};

function close()

if (web_socket == undefined)

{

alert("Not connected!");

return;

}

web_socket.close();

var responses = document.getElementById("responses");

while (responses.firstChild !== responses.lastChild)

{

responses.removeChild(responses.lastChild);

}

var requests = document.getElementById("requests");

while (requests.firstChild !== requests.lastChild)

{

requests.removeChild(requests.lastChild);

}

<div class="control" id="connection">

<div id="service_name" contenteditable="true">

/tests/websockets/bounce

WebSocket <a href="javascript:open()">Connect</a> /

<a href="javascript:close()">Disconnect</a>

<div class="control">

<div id="request" contenteditable="false">

42

WebSocket <a href="javascript:send()">Request</a>

<div id="responses">

<h2>Responses</h2>

<div class="control">

<div id="response" contenteditable="false">

ok, sounds good

<strong>Websocket Response</strong>

<div id="requests">

<h2>Requests</h2>