<html>
<head>
<title>WebSocketServer</title>
<script type="text/javascript">
var ws;
function log(msg, color)
{
var div = document.getElementById("output");
div.innerHTML = div.innerHTML + "<pre style='color:" + color + "'>" + msg + "</pre>";
}
function WebSocketOpen()
{
if ("WebSocket" in window)
{
ws = new WebSocket("ws://localhost:9980/ws");
ws.onopen = function()
{
ws.send("Hello, world!");
log("WebSocket opened.", "green");
};
ws.onmessage = function(evt)
{
var arr = evt.data.split(",");
if (arr.length >= 4)
{
log("Data: " + evt.data, "green");
updateTable(arr[0], arr[1], arr[2], arr[3]);
}
else
log("Unknown message received: " + evt.data, "red");
};
ws.onclose = function()
{
log("WebSocket closed.", "red");
}
}
else
{
log("This browser does not support WebSockets.", "red");
}
}
function WebSocketSend(msg)
{
ws.send("hello");
}
function WebSocketClose()
{
ws.close();
}
function updateTable(id, name, address, age)
{
var table = document.getElementById("dataTable");
if (table.rows.length > 1)
{
for (r = 1; r < table.rows.length; r++)
{
if (table.rows[r].cells[0].innerHTML == id)
{
table.rows[r].cells[1].innerHTML = name;
table.rows[r].cells[2].innerHTML = address;
table.rows[r].cells[3].innerHTML = age;
return;
}
}
}
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
cell1.innerHTML = id;
var cell2 = row.insertCell(1);
cell2.innerHTML = name;
var cell3 = row.insertCell(2);
cell3.innerHTML = address;
var cell4 = row.insertCell(3);
cell4.innerHTML = age;
}
</script>
</head>
<body onload="WebSocketOpen()">
<h1>Web Notifier Example</h1>
<!--
<p><a href="javascript:WebSocketOpen()">Open WebSocket</a></p>
<p><a href="javascript:WebSocketClose()">Close WebSocket</a></p>
<p><a href="javascript:WebSocketSend('hello')">Send Echo</a></p>
-->
<table id="dataTable" width="350px" border="1">
<tr> <th>ID</th> <th>Name</th> <th>Address</th> <th>Age</th></tr>
</table>
<div id="output"></div>
</body>
</html>