HTML5 WebSocket

by humanzing

HTML

<input id="message" />
<div id="output"></div>

CSS

scs

JavaScript

var message = document.getElementById("message"),
    output = document.getElementById("output");

message.addEventListener("keypress", function(e) {
    if(this.value) {
        if (e.keyCode == 13) { 
            sendMessage(this.value); 
            this.value = null;
        }
    }
});

websocket = new WebSocket("wss://127.0.0.1:8000/echo/");
websocket.onopen = function() { 
    output.innerHTML += "<p>&gt; CONNECTED</p>"; 
};

websocket.onmessage = function(e) { 
    output.innerHTML += "<p style='color: blue;'>&gt; RESPONSE: " + e.data + "</p>"; 
};

websocket.onerror = function(e) {
    output.innerHTML += "<p style='color: red;'>&gt; ERROR: " + e.data + "</p>";
};
            
function sendMessage(message) {
    output.innerHTML += "<p>&gt; SENT: " + message + "</p>";
    websocket.send(message);
}