WebSocket JMS Tutorial - Complete

by Kaazing Corporation

HTML

<script src="//cdn.kaazing.com/releases/enterprise.javascript.client/4.1.0/WebSocket.js"></script>
<script src="//cdn.kaazing.com/releases/enterprise.javascript.client/4.1.0/JmsClient.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body onload="doConnect()">
    <!-- Task 1 -->
    <div id="sliderDiv">
        <input id="slider" type="range" min="0" max="1200" value="600" onchange="sliderChange(this.value)" />
    </div>
    <!-- Task 1 -->
    <!-- Task 13 -->
    <img id="pic" src="http://photography.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/Photography/Images/POD/b/balcones-escarpment-523192-sw.jpg" width="600">
    <!-- Task 13 -->
    <div id="logMsgs"></div>
</body>

JavaScript

// Variables you can change
//
var WEBSOCKET_URL = "wss://sandbox.kaazing.net/jms";
var TOPIC_NAME = "/topic/myTopic";
var IN_DEBUG_MODE = true;
var DEBUG_TO_SCREEN = true;

/*** Task 9 ***/
// Message Properties and Message Types
var MESSAGE_PROPERTIES = {
    "messageType": "MESSAGE_TYPE",
    "userId": "USERID",
    "sliderPos": "SLIDER_POS"
};

var MESSAGE_TYPES = {
    "sliderMoved": "SLIDER_MOVED"
};
/*** Task 9 ***/

/*** Task 10 ***/
var userId = Math.random(100000).toString();
/*** Task 10 ***/

// WebSocket and JMS variables
//
var connection;
var session;
var wsUrl;

// *** Task 16 ***
// Internal variables
//
var sending = false;
var sliderQueue = [];
// *** Task 16 ***

// Variable for log messages
//
var screenMsg = "";

// JSFiddle-specific variables
//
var runningOnJSFiddle = (window.location.hostname === "fiddle.jshell.net");

// Used for development and debugging. All logging can be turned
// off by modifying this function.
//
var consoleLog = function(text) {
    if (IN_DEBUG_MODE) {
        if (runningOnJSFiddle || DEBUG_TO_SCREEN) {
            // Logging to the screen
            screenMsg = screenMsg + text + "<br>";
            $("#logMsgs").html(screenMsg);
        } else {
            // Logging to the browser console
            console.log(text);
        }
    }
};

var handleException = function(e) {
    consoleLog("EXCEPTION: " + e);
};

// *** Task 6a ***
var handleTopicMessage = function(message) {
    // *** Task 12 ***
    if (message.getStringProperty(MESSAGE_PROPERTIES.userId) != userId) {
        consoleLog("Message received: " + message.getText());
        // *** Task 8b ***
        $("#slider").val(message.getText());
        // *** Task 8b ***
        // *** Task 15 ***
        $("#pic").width(message.getText());
        // *** Task 15 ***        
    }
    // *** Task 12 ***
};
// *** Task 6a ***


// *** Task 2 ***
var sliderChange = function(sliderValue) {
    consoleLog("Slider changed: " + sliderValue);
    // *** Task...