221V
/
vibed_test


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Websocket test</title>
</head>

<body>

<header>
  <h1>Websocket test</h1>
  <p>change <b>/ws</b> to <b>/ws_mutex</b> for mutex example<br>use <b>disconnect();</b> and <b>connect();</b> in browser console</p>
  <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>
async function generateCookie(){
  const idLength = 15; // 15 bytes = 120 bits
  const randomBytes = new Uint8Array(idLength);
  window.crypto.getRandomValues(randomBytes); // crypto strong random bytes
  
  const hashBuffer = await window.crypto.subtle.digest("SHA-256", randomBytes.buffer); // sha-256 hash
  const idBytes = new Uint8Array(hashBuffer.slice(0, 15)); // take first 15 bytes of hash
  const base64 = btoa(String.fromCharCode.apply(null, idBytes)) // base64 encode (url safe)
    .replace(/\+/g, '-')
    .replace(/\//g, '_')
    .replace(/=+$/, '');
  return base64;
}

var cookie_user_id = localStorage.getItem('user_id');
if(!(cookie_user_id)){
  generateCookie().then(value => { localStorage.setItem('user_id', value); cookie_user_id = value; });
}


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_mutex';
server.value = 'ws://' + window.location.host + '/ws';
connected.style.display = 'none';
content.style.display = 'none';

function connect(){
  //wsHost = server.value;
  wsHost = server.value + '?client_id=' + cookie_user_id;
  console.log('cookie_user_id = ', cookie_user_id);
  console.log('wsHost = ', wsHost);
  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>