221V
/
vibed_test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
							<!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>