WebSockets Example

by Marko Draisma

HTML

<h1>WebSocket API Example</h1>
<div id="controls">
    <label>Enter your message to send to the WebSocket server:</label>
    <input type="text" id="message" />
    <button type="button" id="sendbutton">Send my message to the server</button>
</div>
<div id="info">
    <p>
        <strong>Status: </strong><span id="connectionstatus">Disconnected</span>
    </p>
</div>
<br /><br />
<button type="button" id="connect" onclick="closeConnection();">Disconnect from the WebSocket Server</button>

CSS

body {
    font-family: sans-serif; 
    padding: 10px;    
}
h1 {
    font-weight: bold;
    margin-bottom: 8px;            
}
label {
     font-size: small;   
}
#controls {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000;    
}

JavaScript

//First test for the browsers support for WebSockets
if (!window.WebSocket) {
    //If the user's browser does not support WebSockets, give an alert message
    alert("Your browser does not support the WebSocket API!");
} else {
    //Set the websocket server URL
    var websocketurl = "ws://echo.websocket.org";

    //get status element
    var connstatus = document.getElementById("connectionstatus");

    //get info div element
    var infodiv = document.getElementById("info");

    //Create the WebSocket object (web socket echo test service provided by websocket.org)
    socket = new WebSocket(websocketurl);

    //This function is called when the websocket connection is opened
    socket.onopen = function() {
        connstatus.innerHTML = "Connected!";
        infodiv.innerHTML += "<p>Connected to websocket server at: " + websocketurl + "</p>";
    };

    //This function is called when the websocket connection is closed
    socket.onclose = function() {
        connstatus.innerHTML = "Disconnected";
        infodiv.innerHTML += "<p>Disconnected from the websocket server at: " + websocketurl + "</p>";
    };

    //This function is called when the websocket receives a message. It is passed the message object as its only parameter
    socket.onmessage = function(message) {
        infodiv.innerHTML += "<p>Message received from server: '" + message.data + "'</p>";
    };
    
    sendbutton.onclick = sendMessage;
}

//function to send a message to the websocket server


function sendMessage() {
    //check to ensure that the socket variable is present i.e. the browser support tests passed
    if (socket) {
        //get the message text input element
        var message = document.getElementById("message").value;

        if (message !== "") {
            socket.send(message);
            infodiv.innerHTML += "<p>Sent message to server: '" + message + "'</p>";
        } else {
            alert("You must enter a message to be sent!");
        }
   ...