Websocket Picture Example

by Matthew Vasallo

HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Kaazing WebSocket Tutorial - JMS</title>
        <script src="http://demo.kaazing.com/lib/client/javascript/StompJms.js" type="text/javascript" language="javascript"></script>
    </head>
    <body onload="doConnect()">
        <!-- Task 1 -->
        <div id="sliderDiv">
            <input id="slider" type="range" min="0" max="1200" value="600" oninput="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>
</html>

JavaScript

// Variables you can change
//
var MY_WEBSOCKET_URL = "ws://tutorial.kaazing.com/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 ***

// JSFiddle-specific variables
//
var runningOnJSFiddle = (window.location.hostname === "fiddle.jshell.net");
var WEBSOCKET_URL = (runningOnJSFiddle ? MY_WEBSOCKET_URL : "ws://" + window.location.hostname + ":" + window.location.port + "/jms");

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

// 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 ***
};
// ***...