JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<script src="http://localhost:1337/socket.io/socket.io.js"></script>
<div class="chat">
    <div class="chat-transcript"></div>
    <form>
        <input type="text" />
        <button>Send</button>
    </form>
</div>

CSS

body {
    font-size: 14px;
    line-height: 1.5;
}
.chat {
    margin: 25px;
}
.chat-transcript {
    width: 400px;
    height: 300px;
    
    border: 1px solid silver;
}
button {
    width: 75px;
    height: 21px;
    
    font-size: 14px;
}
input {
    margin-top: 10px;
    width: 320px;
    height: 21px;
    
    font-size: 14px;
    line-height: 21px;
}

JavaScript

var socket = io.connect('http://localhost:1337');
  socket.on('init', function (data) {
      console.log(data);
      socket.emit('statusCheck', { status: 'connected' });
      
      $('button').click(function(e) {
          e.preventDefault();
          socket.emit('clientMessage', { 
              id: 'BRENT!', 
              message: $('.chat input').val()
          });
      });  
  });

socket.on('transcriptUpdate', function(data) {
    $('.chat-transcript').append('<div><span>' + data.id + ':</span> ' + data.message + '</div>');
});