數據變化后前端需要更新,有幾種方式:(參考http://www.xiaocai.name/post/cf1f9_7b6507) 1.利用setInterval函數,每隔n秒去異步拉取數據。對數據實時性要求不高時可用。 2.Ajax輪詢方式推送數據。缺點是服務端需要在死循環中反復查詢數據庫。(還沒有試過這種方式) 3. 利用websocket推送數據,這是HTML5提供的方法,所以只能支持HTML5標准的瀏覽器。這種方式可以利用socket.io來實現。 簡介一個利用Nodejs和socket.io實現的即時通信的例子,親測可用。 原文地址:http://blog.sina.com.cn/s/blog_68693f9801010xck.html 嘿嘿,費話就不多說了,先來說一個WebSocket的環境配置,用的是node.js和Socket.IO 首先需要安裝node.js,很簡單 nodejs下載地址 下載完成后雙擊安裝 CMD打開命令窗口,指定到nodejs的安裝目錄。 安裝Socket.IO也很容易,一條語包搞定, npm install socket.io,等待安裝完成就可以 WebSocket實例-nodejs和socket.io 在nodejs安裝目錄下,新建http.js(文件名任取),代碼如下: var fs = require('fs') , http = require('http') , socketio = require('socket.io'); var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html'}); res.end(fs.readFileSync(__dirname + '/index.html')); }).listen(8888, function() { console.log('Listening at: http://localhost:8888'); }); socketio.listen(server).on('connection', function (socket) { socket.on('message', function (msg) { console.log('Message Received: ', msg); socket.broadcast.emit('message', msg); }); }); 再新建一個index.html,代碼如下: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> $(function(){ var iosocket = io.connect(); iosocket.on('connect', function () { $('#incomingChatMessages').append($('<li>Connected</li>')); iosocket.on('message', function(message) { $('#incomingChatMessages').append($('<li></li>').text(message)); }); iosocket.on('disconnect', function() { $('#incomingChatMessages').append('<li>Disconnected</li>'); }); }); $('#outgoingChatMessage').keypress(function(event) { if(event.which == 13) { event.preventDefault(); iosocket.send($('#outgoingChatMessage').val()); //$('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
原文鏈接:https://blog.csdn.net/lycjiayou/article/details/25284205
