View Full Version : socket.onmessage = function... HTML5 Display an icon on recieved message

10-31-2012, 12:21 AM
Im trying to get started experimenting with websockets.

Right now this websocket looks just like the echo test. A box, "log" with an input box and the buttons start/quit.

ex http://www.websocket.org/echo.html

and when is opens it displays
WebSocket - status 0


Welcome - status 1

Rather then display a "log" I am trying to learn how to implement this into a site. If I wanted to it just do something; Like display an Icon/img/gif when it is ready what that code look like?

Right now I have this is the head

var socket;

function init(){
var host = "ws://api.blockchain.info:8335/inv";
socket = new WebSocket(host);
log('WebSocket - status '+socket.readyState);
socket.onopen = function(msg){ log("Welcome - status "+this.readyState); };
socket.onmessage = function(msg){ log("Received: "+msg.data); };
socket.onclose = function(msg){ log("Disconnected - status "+this.readyState); };
catch(ex){ log(ex); }

function send(){
var txt,msg;
txt = $("msg");
msg = txt.value;
if(!msg){ alert("Message can not be empty"); return; }
try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log(ex); }
function quit(){

// Utilities
function $(id){ return document.getElementById(id); }
function log(msg){ $("log").innerHTML+="<br>"+msg; }
function onkey(event){ if(event.keyCode==13){ send(); } }

and this in the body

<input id="msg" type="textbox" onKeyPress="onkey(event)"/>
<button onClick="send()">Start</button>
<button onClick="quit()">Quit</button>

My thoughts right now is I need to change the first line

log('WebSocket - status '+socket.readyState);

to remove the log and do a function(event) and something like a document.getElementByID that opens my img/giff

And my next step is setting up a function for when I receive data from the websocket.

socket.onmessage = function(msg){ log("Received: "+msg.data); };

Right now it outputs a lot of data in the "log"

All I want to do is get one piece of this data and display a number in a green box.

this is what the data looks like now

Sent: {"op":"addr_sub", "addr":"1GSZj2ydskgAsd2sVpgimWY73TpCCLAwFR"}
Sent: {"op":"addr_sub", "addr":"1NTGckTrNbwdbj1CVgnEGjXqfR8wLwK87S"}
Received: {"op":"utx","x":{"hash":"36c325166decd7f7cdf8b269aecc9f8c161033223581f4aeb1c3665a7317a16d","vin_sz":1,"vout_sz":2,"lock_time":"Unavailable","size":257,"relayed_by":"","tx_index":31068727,"time":1351625866,"inputs":[{"prev_out":{"value":27900000,"type":0,"addr":"1GHYfp7X81X8pXBpmQZwFJcXCsoCAESNag"}}],"out":[{"value":1000000,"type":0,"addr":"1NTGckTrNbwdbj1CVgnEGjXqfR8wLwK87S"},{"value":26850000,"type":0,"addr":"1GHYfp7X81X8pXBpmQZwFJcXCsoCAESNag"}]}}

I want to keep is the "value":1000000 and display it in new box/img. similar to what i'm trying to do in the original 0, 1 message showing the websocket on of off.

If I wanted to store the data of the hash and time into a database is that possible with a websocket as well?

Would would this code look like? im working in Dreamweaver and having a hard time finding dumbed down examples of javascript working with websockets to get me started.

10-31-2012, 08:08 AM
maybe ill post more speffic question.

The following needs to be typed into the message box to send a request to the websocket server

{"op":"addr_sub", "addr":" //Data "}

I think this is ware I can edit this javascript to build that into the websocket?

try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log(ex); }

I know javascript doesnt like quotes in srings.
so this wont work

try{ socket.send({"op":"addr_sub", "addr":") + (msg) + ("}) (; log('Sent: '+msg); } catch(ex){ log(ex); }

So im thinking something like

try{ socket.send({/"op/":/"addr_sub/", /"addr/":/") + (msg) + (/"}) (; log('Sent: '+msg); } catch(ex){ log(ex); }

Not sure the right way to handle that in javascript.
and Something tells me those brackets { are not acting right.