Test Wesockets

by bakhshi

HTML

<button class="start">start</button>
<input type="text">
<button class="send">send</button>
<button class="stop">stop</button>
<output></output>

TypeScript

let ws: WebSocket;

$ = document.querySelectorAll.bind(document);

let running = false;

$('.send')[0].addEventListener('click', ()=>{
	const data = $('input')[0].value;
  log('sending data: ' + data);
  ws.send(data);
});

$('.start')[0].addEventListener('click', () => {
  if (running)
    return;
  running = true;
  ws = new WebSocket('wss://echo.websocket.org/');
  ws.onopen = () => {
    log('open...')
  }
  ws.onclose = () => {
    log('closed')
  }
  ws.onmessage = (e) => {
    log(e.data)
  }
  ws.onerror = (e) => {
    log(e.data)
  }
})

$('.stop')[0].addEventListener('click', () => {
  if (!running)
    return;
  running = false;
  ws.close();
});

function log(msg: string) {
  $('output')[0].innerText = $('output')[0].innerText + "\n" + msg;
}