|
|
@@ -0,0 +1,107 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+<meta charset="utf-8">
|
|
|
+<title>Websocket test</title>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+<header>
|
|
|
+ <h1>Websocket test</h1>
|
|
|
+ <div id="status"></div>
|
|
|
+</header>
|
|
|
+
|
|
|
+<nav>
|
|
|
+ <div id="connecting">
|
|
|
+ <input type="text" id="server" value=""></input>
|
|
|
+ <button type="button" onclick="toggle_connection()">connection</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="connected">
|
|
|
+ <input type="text" id="message" value=""></input>
|
|
|
+ <button type="button" onclick="sendTxt()">send</button>
|
|
|
+ </div>
|
|
|
+</nav>
|
|
|
+
|
|
|
+<main id="content">
|
|
|
+ <button id="clear" onclick="clearScreen()" >Clear text</button>
|
|
|
+ <div id="output"></div>
|
|
|
+</main>
|
|
|
+
|
|
|
+<script>
|
|
|
+var websocket;
|
|
|
+var server = document.getElementById('server');
|
|
|
+var message = document.getElementById('message');
|
|
|
+var connecting = document.getElementById('connecting');
|
|
|
+var connected = document.getElementById('connected');
|
|
|
+var content = document.getElementById('content');
|
|
|
+var output = document.getElementById('output');
|
|
|
+
|
|
|
+server.value = 'ws://' + window.location.host + '/ws';
|
|
|
+connected.style.display = 'none';
|
|
|
+content.style.display = 'none';
|
|
|
+
|
|
|
+function connect(){
|
|
|
+ wsHost = server.value;
|
|
|
+ websocket = new WebSocket(wsHost);
|
|
|
+ showScreen('<b>Connecting to: ' + wsHost + '</b>');
|
|
|
+ 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 disconnect(){
|
|
|
+ websocket.close();
|
|
|
+}
|
|
|
+
|
|
|
+function toggle_connection(){
|
|
|
+ if(websocket && websocket.readyState == websocket.OPEN){
|
|
|
+ disconnect();
|
|
|
+ }else{
|
|
|
+ connect();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function sendTxt(){
|
|
|
+ if(websocket.readyState == websocket.OPEN){
|
|
|
+ var msg = message.value;
|
|
|
+ websocket.send(msg);
|
|
|
+ showScreen('sending: ' + msg);
|
|
|
+ }else{
|
|
|
+ showScreen('websocket is not connected');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function onOpen(evt){
|
|
|
+ showScreen('<span style="color:green">CONNECTED </span>');
|
|
|
+ connecting.style.display = 'none';
|
|
|
+ connected.style.display = '';
|
|
|
+ content.style.display = '';
|
|
|
+}
|
|
|
+
|
|
|
+function onClose(evt){
|
|
|
+ showScreen('<span style="color:red">DISCONNECTED</span>');
|
|
|
+}
|
|
|
+
|
|
|
+function onMessage(evt){
|
|
|
+ showScreen('<span style="color:blue">RESPONSE: ' + evt.data + '</span>');
|
|
|
+}
|
|
|
+
|
|
|
+function onError(evt){
|
|
|
+ showScreen('<span style="color:red">ERROR: ' + evt.data + '</span>');
|
|
|
+}
|
|
|
+
|
|
|
+function showScreen(html){
|
|
|
+ var el = document.createElement('p');
|
|
|
+ el.innerHTML = html;
|
|
|
+ output.insertBefore(el, output.firstChild);
|
|
|
+}
|
|
|
+
|
|
|
+function clearScreen(){
|
|
|
+ output.innerHTML = '';
|
|
|
+}
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
221V