Websocket

HTML

<!DOCTYPE html>
<html>
<head>
<title>WebSockets Client</title>
<style>    
    body {
    font-family:Arial, Helvetica, sans-serif;
}
#container{
    border:5px solid grey;
    width:800px;
    margin:0 auto;
    padding:10px;
}
#chatLog{
    padding:5px;
    border:1px solid black;
}
#chatLog p {
    margin:0;
}
.event {
    color:#6F6;
}
.warning{
    font-weight:bold;
    color:#CCC;
}
.error {
    font-weight:bold;
    color:#FCC;
}
    
</style>
</head>
<body>
<div id="wrapper">
    <div id="container">
        <h1>WebSockets Client</h1>
        <div id="chatLog">
        </div><!-- #chatLog -->
        Host : <input id="host" type="text" />
        <button id="connect" >Connect</button>
        <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>
        <input id="text" type="text" />
        <button id="disconnect" disabled="disabled">Disconnect</button>
    </div><!-- #container -->
</div>
</body>
</html>

CSS

body{
  background-color:red;
}

JavaScript

(function() {

    function message(cl, txt) {
        arguments.length === 1 && (txt = cl, cl = 'message');
        document.getElementById('chatLog').innerHTML += '<p class="' + cl + '">' + txt + '</p>';
    }

    function connect(host) {
        function send() {
            var text = document.getElementById('text').value;

            if (!text) {
                message('warning', 'Please enter a message');
                return;
            }

            try {
                socket.send(text);
                message('event', 'Sent: ' + text + ' (' + socket.bufferedAmount + ')')

            } catch (e) {
                message('warning', e);
            }
            document.getElementById('text').value = "";
        }

        document.getElementById('text').onkeypress = function(event) {
            if (event.keyCode == '13') {
                send();
            }
        };

        document.getElementById('disconnect').onclick = function() {
            socket.close();
        };

        try {
            if (host) 
              document.getElementById ('host').value = host;     
            else
              host = document.getElementById ('host').value;

            if (!host) {
              message ('error', 'No host specified');
              return;
            }

            document.getElementById('text').disabled =
            document.getElementById('disconnect').disabled = '';
            document.getElementById('connect').disabled = 'disabled';
                
            var socket = new WebSocket('wss://' + host);

            message('event', 'Socket Status: ' + socket.readyState);

            socket.onopen = function() {
                message('event', 'Socket Status: ' + socket.readyState + ' (open)');
            }

            socket.onmessage = function(msg) {
                message('Received: ' + msg.data);
            }

            socket.onclose = function() {
                message('event', 'Socket Status: ' +...