HTML5 WebSockets

by Ryan Morris

HTML

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

JavaScript

$("#message").on('keypress', function (e) {

    if (this.value) {
        if (window.event.keyCode == 13) {
            sendMessage(this.value);
            this.value = null;
        }
    }

});

function init() {

    var outputNode = $("#output")[0];
    
    websocket = new WebSocket("ws://echo.websocket.org/");

    websocket.onopen = function () {
        outputNode.innerHTML += "<p>> CONNECTED</p>";
    };

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

    websocket.onerror = function (e) {
        outputNode.innerHTML += "<p style='color: red;'>> ERROR: " + e.data + "</p>";
    };
}

function sendMessage(message) {
    
    $("#output")[0].innerHTML += "<p>> SENT: " + message + "</p>";

    websocket.send(message);
}

init();