github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/themes/wind/static/libs/sockjs-client-1.1.0/tests/html/web-worker.html (about) 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <meta charset="UTF-8" /> 6 7 <link href="data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABmJLR0T///////8JWPfcAAAACXBIWXMAAABIAAAASABGyWs+AAAAF0lEQVRIx2NgGAWjYBSMglEwCkbBSAcACBAAAeaR9cIAAAAASUVORK5CYII=" rel="icon" type="image/x-icon" /> 8 9 <script type="text/javascript" src="lib/sockjs.js"></script> 10 <script type="text/javascript" src="static/jquery.min.js"></script> 11 12 <script type="text/javascript" src="config.js"></script> 13 </head> 14 <body> 15 <form> 16 <select id="transport"> 17 <option value="">- any - </option> 18 <option value="websocket">websocket</option> 19 <option value="xdr-streaming">xdr-streaming</option> 20 <option value="xhr-streaming">xhr-streaming</option> 21 <option value="eventsource">eventsource</option> 22 <option value="iframe-eventsource">iframe-eventsource</option> 23 <option value="htmlfile">htmlfile</option> 24 <option value="iframe-htmlfile">iframe-htmlfile</option> 25 <option value="xdr-polling">xdr-polling</option> 26 <option value="xhr-polling">xhr-polling</option> 27 <option value="iframe-xhr-polling">iframe-xhr-polling</option> 28 <option value="jsonp-polling">jsonp-polling</option> 29 </select> 30 <input type="checkbox" id="sameOrigin" checked>Same Origin? 31 <input type="button" value="Connect" id="connect"> 32 <input type="button" value="Disconnect" id="disconnect" disabled="yes"> 33 </form> 34 35 Latency: <code id="latency"></code><br> 36 <code id="logs" style="height:200px; overflow:auto; display: block; border: 1px gray solid;"> 37 </code> 38 39 <script> 40 /* global $, clientOptions */ 41 'use strict'; 42 function log(a) { 43 if ('console' in window && 'log' in window.console) { 44 console.log(a); 45 } 46 $('#logs').append($('<code>').text(a)); 47 $('#logs').append($('<br>')); 48 $('#logs').scrollTop($('#logs').scrollTop() + 10000); 49 } 50 51 var worker; 52 function send() { 53 worker.postMessage(JSON.stringify({ type: 'message', data: JSON.stringify({ t: (new Date()).getTime()}) })); 54 } 55 function onopen() { 56 log('connected'); 57 $('#sameOrigin').attr('disabled', true); 58 send(); 59 } 60 function onclose(code, reason) { 61 log('disconnected ' + code + ', ' + reason); 62 $('#connect').each(function(_,e){ 63 e.disabled = ''; 64 }); 65 $('#disconnect').attr('disabled', true); 66 $('#sameOrigin').attr('disabled', false); 67 } 68 69 var i = 0; 70 function xonmessage(e) { 71 var msg = JSON.parse(e); 72 var td = (new Date()).getTime() - msg.t; 73 $('#latency').text('' + i + ' ' + td + ' ms'); 74 i += 1; 75 send(); 76 } 77 78 $('#connect').click(function() { 79 $('#connect').attr('disabled', true); 80 $('#disconnect').each(function(_,e){ 81 e.disabled = ''; 82 }); 83 var transport = $('#transport').val() || undefined; 84 log('[connecting] ' + transport); 85 var url; 86 if ($('#sameOrigin').prop('checked')) { 87 if (window.location.origin) { 88 url = window.location.origin; 89 } else { 90 url = window.location.protocol + '//' + window.location.hostname + 91 (window.location.port ? ':' + window.location.port : ''); 92 } 93 } else { 94 url = clientOptions.url; 95 } 96 worker = new Worker('lib/worker.js'); 97 worker.onmessage = function (e) { 98 var msg = JSON.parse(e.data); 99 switch (msg.type) { 100 case 'message': 101 xonmessage(msg.data); 102 break; 103 case 'open': 104 onopen(); 105 break; 106 case 'close': 107 onclose(msg.code, msg.reason); 108 break; 109 case 'error': 110 console.error(msg.data); 111 break; 112 default: 113 console.error('unknown type: ' + msg.type); 114 } 115 }; 116 117 worker.postMessage(JSON.stringify({ type: 'open', url: url + '/echo', transports: transport })); 118 }); 119 $('#disconnect').click(function() { 120 $('#disconnect').attr('disabled', true); 121 log('[disconnecting]'); 122 worker.postMessage(JSON.stringify({ type: 'close' })); 123 }); 124 </script> 125 </body> 126 </html>