Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    socket.onmessage = function... HTML5 Display an icon on recieved message

    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

    then

    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

    Code:
    var socket;
    
    function init(){
      var host = "ws://api.blockchain.info:8335/inv";
      try{
        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); }
      $("msg").focus();
    }
    
    function send(){
      var txt,msg;
      txt = $("msg");
      msg = txt.value;
      if(!msg){ alert("Message can not be empty"); return; }
      txt.value="";
      txt.focus();
      try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log(ex); }
    }
    function quit(){
      log("Goodbye!");
      socket.close();
      socket=null;
    }
    
    // Utilities
    function $(id){ return document.getElementById(id); }
    function log(msg){ $("log").innerHTML+="<br>"+msg; }
    function onkey(event){ if(event.keyCode==13){ send(); } }
    </script>
    and this in the body

    Code:
    <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

    Code:
     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.

    Code:
    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

    Code:
    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":"127.0.0.1","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.

  • #2
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

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

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

    Code:
    try{ socket.send({"op":"addr_sub", "addr":") + (msg) + ("}) (; log('Sent: '+msg); } catch(ex){ log(ex); }
    So im thinking something like
    Code:
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •