Node.JS (getdata.js):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | var server, ip = "127.0.0.1" , port = 1337, http = require( "http" ), url = require( "url" ), fs = require( "fs" ), qs = require( "querystring" ); var textPath = "p.txt" ; server = http.createServer( function (req, res) { var polling = { timeover : false , timeout : null , request : function (q) { this .timeout = setTimeout( function () { polling.timeover = true ; }, 10000); this .action(q); }, action : function (q) { if ( this .timeover == true ) { //確認連線逾時 q.callback({}); } else { fs.readFile(textPath, "utf-8" , function (err, file) { if (q.json.lastTime < qs.parse(file).lastTime) { //有新資料 q.callback(qs.parse(file)); } else { //駐列輪巡 setTimeout( function () { polling.action(q) }, 100); } }); } } }; switch (url.parse(req.url).pathname) { case "/jquery" : fs.readFile( "js/jquery-1.9.1.js" , function (err, data) { if (err) throw err; res.writeHead(200, { "Content-Type" : "text/javascript" , "Content-Length" :data.length}); res.write(data); res.end(); }); break ; case "/index" : fs.readFile( "index.html" , function (err, data) { if (err) throw err; res.writeHead(200, { "Content-Type" : "text/html" , "Content-Length" :data.length}); res.write(data); res.end(); }); break ; case "/sendData" : var sendData = "" ; var lastTime = new Date().getTime(); req.setEncoding( "utf8" ); req.addListener( "data" , function (sendDataChunk) { sendData += sendDataChunk; }); req.addListener( "end" , function () { sendData += "&lastTime=" + lastTime; fs.open(textPath, "w" , 0644, function (err, fd) { if (err) throw err; fs.write(fd, sendData, 0, "utf8" , function (err) { if (err) throw err; fs.closeSync(fd); var json = JSON.stringify({lastTime: lastTime}); res.writeHead(200, { "Content-Type" : "text/json" , "Content-Length" : json.length }); console.log(json); res.end(json); }) }); }); break ; case "/getData" : var getData = "" ; req.setEncoding( "utf8" ); req.addListener( "data" , function (getDataChunk) { getData += getDataChunk; }); req.addListener( "end" , function () { polling.request({ json : qs.parse(getData), callback : function (data) { var json = JSON.stringify(data); res.writeHead(200, { "Content-Type" : "text/json" , "Content-Length" : json.length }); res.end(json); } }); }); break ; default : res.writeHead(200, { "Content-Type" : "text/html" }); res.write( "Page not found." ); res.end(); break ; } }); server.listen(port); console.log( "Server running at http://" + ip + ":" + port); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" lang= "zh-TW" xml:lang= "zh-TW" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>Title</title> <script src= "/jquery" ></script> <script type= "text/javascript" > $( function () { var localurl = window.location.protocol + "//" + window.location.host; var lastTime = 0; $( "#sendBtn" ).click( function () { var username = $( "#username" ).val(); var xValue = $( "#xValue" ).val(); var yValue = $( "#yValue" ).val(); var zValue = $( "#zValue" ).val(); $.post( "/sendData" , {user: username, x: xValue, y: yValue, z: zValue}, function (data) { console.log( "Message Send on " + data.lastTime); }, "json" ); }); var pollingData = function () { $.ajax({ cache: false , dataType: "json" , type: "POST" , url: localurl + "/getData" , data: {lastTime: lastTime}, error: function (xhr, status, error) { document.write( "Error" ); }, success: function (json) { //console.log(json); if (!$.isEmptyObject(json)) { //判斷內容是否為空 console.log( "Update..." ); //lastTime = new Date().getTime(); $( "#username" ).val(json.user); $( "#xValue" ).val(json.x); $( "#yValue" ).val(json.y); $( "#zValue" ).val(json.z); lastTime = json.lastTime; pollingData(); } else { //繼續輪巡 console.log( "Pulling..." ); pollingData(); } } }); }; pollingData(); }); </script> </head> <body> name: <input type= "text" id= "username" value= "QQBoxy" /><br /> x: <input type= "text" id= "xValue" value= "3" /><br /> y: <input type= "text" id= "yValue" value= "4" /><br /> z: <input type= "text" id= "zValue" value= "5" /><br /> <button id= "sendBtn" >Send</button> </body> </html> |
說明:
使用Node.JS與jQuery進行數據同步變更。