JSFiddle - React, Tailwind, and code Playground

by odiseo

HTML

<select>
  <option value="wss://release.qa.espressive.com/ws?apikey=6e95033632e3f6ac0ea0c9d70400a83de00646a977c3b2ec7aac70f1b2dfb738">Esp Release</option>
  <option value="wss://echo.websocket.org">websocket.org</option>
</select>
<button>Connect</button>
<ul id="console"></ul>

CSS

body {
  background: #000;
}

button,
select {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  cursor: pointer;
}

button {
  background: #369;
  color: #fff;
  padding: 5px 0;
  border: none;
}

ul {
  background: #000;
  color: #eee;
}

li {}

JavaScript

var _websocket = null;

function wsConnect() {
  var wsurl = $('select').val();
  if (_websocket) {
    _websocket.close(3001);
  } else {
    _websocket = new WebSocket(wsurl);
    _websocket.onopen = function() {
      logMsg('ws connected');
      $('button').text('Disconnect').css('background', 'green');
    };
    _websocket.onmessage = function(msg) {
      logMsg(msg);
    };

    _websocket.onclose = function(evt) {
      $('button').text('Connect').css('background', '#369');
      logMsg('ws closed: '+evt.code);

      _websocket = null;
    };

    _websocket.onerror = function(evt) {
      if (_websocket.readyState == 1) {
        logMsg('ws normal error: ' + evt.type);
      }
    };
  }
}

function logMsg(err) {
  console.log(err);
  $('#console').prepend('<li>' + err + '</li>');
}

//bind controls
$('button').click(function() {
  wsConnect();
})

$('select').on('change', function() {
  if (_websocket) {
    _websocket.close(3001);
  }
})