2021-01-30 07:51:39 +01:00
|
|
|
<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>";
|
|
|
|
|
}
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
function WebSocketOpen()
|
|
|
|
|
{
|
2023-03-23 19:19:11 +01:00
|
|
|
if ("WebSocket" in window)
|
2021-01-30 07:51:39 +01:00
|
|
|
{
|
|
|
|
|
ws = new WebSocket("ws://localhost:9980/ws");
|
|
|
|
|
|
|
|
|
|
ws.onopen = function()
|
|
|
|
|
{
|
|
|
|
|
ws.send("Hello, world!");
|
|
|
|
|
log("WebSocket opened.", "green");
|
|
|
|
|
};
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
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");
|
|
|
|
|
};
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
ws.onclose = function()
|
|
|
|
|
{
|
|
|
|
|
log("WebSocket closed.", "red");
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
{
|
|
|
|
|
log("This browser does not support WebSockets.", "red");
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
function WebSocketSend(msg)
|
|
|
|
|
{
|
|
|
|
|
ws.send("hello");
|
|
|
|
|
}
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
function WebSocketClose()
|
|
|
|
|
{
|
|
|
|
|
ws.close();
|
|
|
|
|
}
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
function updateTable(id, name, address, age)
|
|
|
|
|
{
|
|
|
|
|
var table = document.getElementById("dataTable");
|
2023-03-23 19:19:11 +01:00
|
|
|
|
|
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
var row = table.insertRow(table.rows.length);
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
var cell1 = row.insertCell(0);
|
|
|
|
|
cell1.innerHTML = id;
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
var cell2 = row.insertCell(1);
|
|
|
|
|
cell2.innerHTML = name;
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
var cell3 = row.insertCell(2);
|
|
|
|
|
cell3.innerHTML = address;
|
2023-03-23 19:19:11 +01:00
|
|
|
|
2021-01-30 07:51:39 +01:00
|
|
|
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>
|
2023-03-23 19:19:11 +01:00
|
|
|
</html>
|
