JSFiddle - React, Tailwind, and code Playground

by boulabiar

HTML

<h1>WebSockets test</h1>
<form>
  <input type="text" />
  <button>Send</button>
</form>
<div></div>

JavaScript

$(function() {
  window.WebSocket = window.WebSocket || window.MozWebSocket;
  var websocket = new WebSocket('ws://127.0.0.1:8765',
                                'dumb-increment-protocol');
  websocket.onopen = function () {
      $('h1').css('color', 'green'); };

  websocket.onerror = function () {
      $('h1').css('color', 'red'); };
 
  websocket.onmessage = function (message) {
      console.log(message.data);
      $('div').append($('<p>', { text: message.data })); };
                
      $('button').click(function(e) {
                    e.preventDefault();
                    websocket.send($('input').val());
                    $('input').val('');
                });
      });