JSFiddle - React, Tailwind, and code Playground

HTML

<select>
  <option value="wss://www.happyparents.org">happyarents  WebSocket</option>
  <option value="wss://echo.websocket.orgxx">Invalid WebSocket</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');
      if (evt.code == 3001) {
        logMsg('ws closed');        
      } else {
      alert(evt.code);
        logMsg('ws connection error');        
      }
      _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);
  }
})