WebSocket Test

by spn99

HTML

<html>

  <head>
    <title>WebSocket Test</title>
  </head>

  <body>
    <button id="connect" class="btn">Connect</button>
    <button id="disconnect" class="btn">Disconnect</button>
    <button id="sendShortText" class="btn">Send short text</button>
    <button id="sendLargeText" class="btn">Send large text</button>
    <button id="clear" class="btn">Clear</button>
    <br />
    <div id="output"></div>
  </body>

</html>

CSS

.btn {
  padding: 10px;
  margin: 5px;
}

TypeScript

document.getElementById("connect").onclick = connect
document.getElementById("disconnect").onclick = disconnect
document.getElementById("sendShortText").onclick = () => {
  sendText(10)
}
document.getElementById("sendLargeText").onclick = () => {
  sendText(10000)
}
document.getElementById("clear").onclick = clear


let ws

function connect() {
	const url = "wss://streaming.bitquery.io/graphql"
  log('CONNECTING: ' + url, 'green')
  ws = new WebSocket(url)

  ws.onopen = () => {
    log('CONNECTED', 'green')
  }

  ws.onmessage = (evt) => {
    log("RESPONSE: " + evt.data, 'blue')
    console.log('RESPONSE: ', evt)
  }

  ws.onerror = (evt) => {
    log("ERROR: " + evt.type, 'red')
    console.log('ERROR: ', evt)
  }

  ws.onclose = (evt) => {
    log('CLOSE: ' + evt.code + " " + evt.reason, 'green')
    console.log('CLOSE: ', evt)
  }
}

function randomText(len) {
  const allCharacters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var randomText = ''
  for (var i = 0; i < len; i++) {
    var k = Math.floor(Math.random() * allCharacters.length)
    randomText += allCharacters.charAt(k);
  }
  return randomText
}

function sendText(len) {
  if (!ws) return;
  log("SENDING: " + len + " characters")
  ws.send(randomText(len))
}

function disconnect() {
  if (!ws) return;
  ws.close(4000, 'Closed by client');
  ws = null;
}

function log(s, color) {
  document.getElementById("output").innerHTML += "<p style='color: " + color + ";'>> " + s + " </p>"

}

function clear() {
  document.getElementById("output").innerHTML = ''
}