Javascript websocket

JavaScript example runs logging code on browser. It connects to localhost and send example log lines to web socket. TimeToPic Logger is able to receive those. If TimeToPic is used, data is added to timeline too.

When developing both back end and front end on same desktop, logger will combine streams based on their timestamps. This would be useful when developing.

var ws;
var newline = String.fromCharCode(10);
var contextName = "default";

function TTPLOG_SET_CONTEXT_NAME(newName) {
  contextName = newName;
}


function TTPLOG_EVENT_START(channel) {
 //timestamp;event;start;channelname[CR]LF
 var ret;
 ret = GetTimeStamp()+";event;start;["+contextName+"]"+channel;
 logText( ret ) ;
}


function TTPLOG_EVENT_STOP(channel) {
 //timestamp;event;stop;channelname[CR]LF
 var ret;
 ret = GetTimeStamp()+";event;stop;["+contextName+"]"+channel;
 logText( ret ) ;
}


function TTPLOG_NAMED_EVENT_START(channel, comment) {
 //timestamp;event;start;channelname[CR]LF
 var ret;
 ret = GetTimeStamp()+";namedevent;start;["+contextName+"]"+channel+";"+comment;
 logText( ret ) ;
}


function TTPLOG_NAMED_EVENT_STOP(channel) {
 //timestamp;event;stop;channelname[CR]LF
 var ret;
 ret = GetTimeStamp()+";namedevent;stop;["+contextName+"]"+channel;
 logText( ret ) ;
}

function TTPLOG_VALUE(channel, value){
 //timestamp;valueabs;value;channelname[CR]LF
 var ret;
 ret = GetTimeStamp()+";valueabs;"+value+";["+contextName+"]"+channel;
 logText( ret ) ;
}


function TTPLOG_STATE(channel, state){
 //timestamp;state;stateMessage;channelname[CR]LF
 var ret;
 ret = GetTimeStamp()+";state;"+state+";["+contextName+"]"+channel;
 logText( ret ) ;
}


function TTPLOG_STRING(str){
 var ret = GetTimeStamp()+";text;"+str
 logText( ret ) ;
}


function pad(n){
 //http://stackoverflow.com/questions/3605214/javascript-add-leading-zeroes-to-date
 return n<10 ? '0'+n : n
}


function GetTimeStamp() {   
 var d = new Date();
 //yyyy/MM/dd hh:mm:ss.zzz  
 var timestamp = d.getFullYear()+"/"+pad(1+d.getMonth())+"/"+pad(d.getDate())+" "+pad(d.getHours())+":"+pad(d.getMinutes())+":"+pad(d.getSeconds())+"."+d.getMilliseconds();     
 //var timestamp = d.toISOString(); // currently not supported by timetopic 
 return timestamp
}


function logText(myTxt) {
 txToWs (myTxt)
}


function txToWs(msg) {
 ws.send(msg+newline);
}


ws.onopen = function () {
 TTPLOG_EVENT_START("ws.onopen") 
 log('Connected to Logger');  
 TTPLOG_EVENT_STOP("ws.onopen")
};


function delay(amount) {
 for (k=0;k<amount;k++) {
   log('delay');
 }
}


function TTPLOG_INIT(url) {
ws = new WebSocket(url);  
ws.onmessage = function (evt) {
 var msg = evt.data;
 log('message received' + msg);
};


ws.onclose = function () {
 log('connection closed');
};


ws.onerror = function (e) {
 log('connection error');
};


}


function log(txt) {
 // implement here possible error handler if needed. 
 // var div = document.getElementById('log');
 // div.innerHTML = div.innerHTML + txt + '<br>';
}
  1. Download example as zip.
  2. Unzip content to suitable place.
  3. Make sure that TimeToPic Logger is running.
  4. Open file "tester.html" with browser.
  5. You should see something like below.





Browser screenshot when JavaScript code is sending logs


TimeToPic Logger screenshot when JavaScript code is receiving logs


TimeToPic screenshot that visualizes text stream into timeline.