client.html

<script type="text/javascript" src="json-viewer.js"></script>
<link rel="stylesheet" type="text/css" href="/json-viewer.css">

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

<script>

    var output = document.getElementById("output");
    var wsClient = {};
    wsClient.connect = function()  {
        var ws = new WebSocket('ws://100.109.0.10:8000/');
        ws.onopen = function() {
            console.log('ws connected');
	    ws.send(window.JSON.stringify('connect'));
        };
        ws.onerror = function() {
            console.log('ws error');
        };
        ws.onclose = function() {
            console.log('ws closed');
        };
        ws.onmessage = function(msgevent) {
	    console.log('received');
            var notification = JSON.parse(msgevent.data);
            console.log(notification);
	    onNotificationReceived(notification);
	    
        };
    };


    function onNotificationReceived(notification){
    	var display = {};
	var instance_payload = notification.payload['nova_object.data'];
	display.event_type = notification.event_type;
	if (! display.event_type.includes('scheduler'))
	{
		display.name = instance_payload.display_name;
		display.state = instance_payload.state;
		display.power_state = instance_payload.power_state;
		display.task_sate = instance_payload.task_state;
		display.host = instance_payload.host;
		display.full_payload = notification.payload;
 	}
	display.full_payload = notification.payload;

	var jsonViewer = new JSONViewer();
	var container = jsonViewer.getContainer();
	output.appendChild(container);
	jsonViewer.showJSON(display, null, 1);
    }

    wsClient.connect();

</script>