advanced code snippet search

Posted By

bcmoney on 12/10/10


Tagged

http proxy html5


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

wirenaught


proxy.html

 / Published in: HTML
 

URL: http://bcmoney-mobiletv.com/blog/2009/05/01/the-server-side-proxy/

Using WebMessaging or WebSocket for cross-site communication in HTML5 rather than a full-blown Proxy: http://www.tutorialspoint.com/html5/html5_websocket.htm

(Recommend using in unison with pysocketserver included in article, or, http://siriux.net/2010/08/php-websocket-server/)

Expand | Embed | Plain Text 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. /*
  6.  * log
  7.  *   Log messages to the console or to the history object
  8.  * USAGE: 
  9.  *   log('inside coolFunc',this,arguments);
  10.  * @author Paul Irish
  11.  * @source http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
  12.  */
  13. window.log = function() {
  14.   log.history = log.history || [];   // store logs to an array for reference
  15.   log.history.push(arguments);
  16.   document.getElementById('output').innerHTML = Array.prototype.slice.call(arguments).toString().split(":")[1];
  17.   if(this.console){
  18.     console.log( Array.prototype.slice.call(arguments) );
  19.   }  
  20. };
  21.  
  22. var notified = false;
  23.  
  24. /**
  25.  * crossDomainMessage
  26.  *   Wraps the WebSocket message sending functionality of HTML5
  27.  * NOTE: To use this you must run a WebSocket server, see:
  28.  *   PHP - https://github.com/nicokaiser/php-websocket
  29.  *   Python - http://code.google.com/p/pywebsocket/
  30.  *   Java - https://github.com/TooTallNate/Java-WebSocket
  31.  *   C# - http://superwebsocket.codeplex.com/
  32.  */  
  33. function crossDomainMessage() {
  34.   var m = document.getElementById('msg').value;
  35.   msg = (typeof m == "undefined" || m === null || m == "") ? "test" : m;
  36.   if ("WebSocket" in window && !notified) {
  37.      log("WebSocket is supported by your Browser: " + navigator.userAgent); notified = true;
  38.   }
  39.   else if (!("WebSocket" in window) && !notified) {
  40. 	log("WebSocket NOT supported by your Browser: " + navigator.userAgent);  notified = true; // The browser doesn't support WebSocket (so you could fallback to a Flash or JS websocket library)
  41.   }
  42.   else if ("WebSocket" in window) {
  43. 	sendWebSocketMsg(msg);
  44.   }
  45.   else {    
  46.     alert("You need to use a 'Flash/JS websocket library' to support WebSockets in this browser!");
  47.   }  
  48. }
  49.  
  50. /**
  51.  * sendWebSocketMsg
  52.  *   Sends a message via a web socket
  53.  *@param msg String representing the text-based message to send
  54.  *@param _server (optional) String representing the location of a server implementing the WebSocket protocol
  55.  */
  56. function sendWebSocketMsg(msg, _server) {
  57.    url = (typeof _server != "undefined" && _server !== null && _server !="") ? _server : "ws://localhost:8000/echo";
  58.    var ws = new WebSocket(url); // opens a web socket 
  59.      ws.onopen = function() {        
  60.         ws.send(msg); // Web Socket is connected, send data using send()
  61.         log("Sent the following Message: " + msg);
  62.      };
  63.      ws.onmessage = function (evt) { 
  64.         var received_msg = evt.data;
  65.         log("The following Message was received: \n" + received_msg);
  66.      };
  67.      ws.onclose = function() {         
  68.         log("Connection was closed to server: " + url);  // websocket is closed.
  69.      };
  70. }
  71. </script>
  72. </head>
  73. <body onload="crossDomainMessage();">
  74. <div id="sse">
  75.    <label>Message to send: <input type="text" id="msg" name="msg" size="40" maxlength="100" value="test" onfocus="if(this.value='test'){this.value='';}"/></label>
  76.    <button onclick="javascript:crossDomainMessage();document.getElementById('msg').value='';">Send Message via WebSocket</button>
  77.    <div id="output" style="background:#eee;width:48%;text-align:center;" title="Last message received by the server will be displayed here..."> 
  78.    </div>
  79. </div>
  80. </body>
  81. </html>

Report this snippet  

You need to login to post a comment.