Push Notification Example

by zookeeper

HTML

<h1>Push Notification Example</h1>
<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

if (!window.WebSocket) {
    alert("Your browser does not support WebSockets!");
} else {
    // set the websocket server endpoint
    var websocketurl = "wss://indigo.inside.ibinx.com/zookeeper/push/onair";

    var connstatus = document.getElementById("connectionstatus");

    var infodiv = document.getElementById("info");

    // create the WebSocket object
    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(evemt) {
        connstatus.innerHTML = "Disconnected";
        infodiv.innerHTML += "<p>Disconnected from the websocket server at: " + websocketurl + "</p>";
        document.getElementById('connect').style.display='none';
    };

    // 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>";
    };
}

function closeConnection() {
    if (socket) {
        socket.close();
    }
}