<!DOCTYPE HTML> <html> <head> <title>rhimportd Websocket Testclient</title> <meta charset="utf-8"> <style type="text/css"> body { background-color: #555; } div.data { background-color: white; border: 1px solid; padding: 1em; font-family: monospace; margin-top: 1em; margin-bottom: 1em; } #progress { background-color: white; border: 1px solid; padding: 1em; font-family: monospace; margin-top: 2em; margin-bottom: 0em; } #progress span.caption { font-weight: bold; } td { text-align: right; } </style> <script src="jquery.min.js"></script> <script type="text/javascript"> function SessionList(req) { this.req = req this.sock = new WebSocket("ws://localhost:4080/public/socket"); this.sock_onmessage = function (event) { $('#listmsg').text(event.data); } this.sock.onmessage = this.sock_onmessage.bind(this); this.sock_onopen = function() { this.sock.send(JSON.stringify(this.req)); $('#buttonlist').attr('disabled','disabled') } this.sock.onopen = this.sock_onopen.bind(this); } var sl; function list() { req = { COMMAND: "list", LOGIN_NAME: $('#username').val(), PASSWORD: $('#token').val()}; sl = new SessionList(req); } function Session(req) { this.req = req $('#rawmsg').text(""); this.sock = new WebSocket("ws://localhost:4080/public/socket"); this.sock_onmessage = function (event) { msg = $.parseJSON(event.data) if (msg.TYPE != "progress") { $('#rawmsg').append(event.data + "<br />\n"); } switch (msg.TYPE) { case "ack": $('#sessionid').val(msg.ID); buttonsRunning(); break; case "progress": repaintProgress(msg.PROGRESS_STEP_NAME, msg.PROGRESS, msg.TITLE, msg.CART_NUMBER, msg.CUT_NUMBER); break; case "done": case "error": this.sock.close(); init(); break; } } this.sock.onmessage = this.sock_onmessage.bind(this); this.sock_onopen = function() { this.sock.send(JSON.stringify(this.req)); } this.sock.onopen = this.sock_onopen.bind(this); this.cancel = function() { this.sock.send(JSON.stringify({COMMAND: "cancel"})); } } var s; function run() { req = { COMMAND: "new", TIMEOUT: 7200, REFERENCE_ID: $('#refid').val(), LOGIN_NAME: $('#username').val(), PASSWORD: $('#token').val(), SHOW_ID: 10002, CLEAR_SHOW_CARTS: true, SOURCE_URI: $('#source').val() }; s = new Session(req); } function reconnect() { req = { COMMAND: "reconnect", LOGIN_NAME: $('#username').val(), ID: $('#sessionid').val() }; s = new Session(req); } function cancel() { s.cancel(); } function detach() { s.sock.close(); buttonsIdle(); } function buttonsIdle() { $('#buttonrun').removeAttr('disabled'); $('#buttonreconnect').removeAttr('disabled'); $('#buttondetach').attr('disabled','disabled'); $('#buttoncancel').attr('disabled','disabled'); } function buttonsRunning() { $('#buttonrun').attr('disabled','disabled'); $('#buttonreconnect').attr('disabled','disabled'); $('#buttondetach').removeAttr('disabled'); $('#buttoncancel').removeAttr('disabled'); } function repaintProgress(step, value, title, cart, cut) { $('#progress_step').text("'" + step + "'"); $('#progress_value').text(Math.round(value*100)/100 + "%"); $('#progress_title').text("'" + title + "'"); $('#progress_cart').text(cart); $('#progress_cut').text(cut); } function init() { $('#sessionid').val(""); buttonsIdle(); repaintProgress("", 0, "", 0, 0); $('#buttonlist').removeAttr('disabled','disabled'); } </script> </head> <body onload="init()"> <h1>rhimportd Websocket Testclient</h1> <div> <table> <tr><td>Username</td><td><input id="username" type="text" size="20" value="heslinki" /></td></tr> <tr><td>Token</td><td><input id="token" type="text" size="20" /></td></tr> </table> </div> <div> <button id="buttonlist" onclick="list()">list</button> <div id="listmsg" class="data"></div> </div> <div> <input id="source" type="text" size="30" value="silence://600"> <input id="refid" type="text" size="15" value="test-reference-id"> <button id="buttonrun" onclick="run()">start</button> <button id="buttondetach" onclick="detach()">detach</button> <input id="sessionid" type="text" size="45"> <button id="buttonreconnect" onclick="reconnect()">reconnect</button> <button id="buttoncancel" onclick="cancel()">cancel</button> <div id="progress"> <span class="caption">Step/Value:</span> <span id="progress_step"></span> / <span id="progress_value"></span> <span class="caption">Title</span> <span id="progress_title"></span> <span class="caption">Cart/Cut</span> <span id="progress_cart"></span> / <span id="progress_cut"></span> </div> <div id="rawmsg" class="data"></div> </div> </body> </html>