redis主動向頁面push數據

時間 2019-11-24

標籤 redis 動向頁面 push 數據欄目 Redis 简体版

原文原文鏈接

對於頁面上定時刷新顯示的數據，以前一直都是比較「傳統」的思想——那就是「頁面經過ajax請求後臺，後臺響應後把數據返回給前臺展現，如此反覆……」，而本身也歷來沒有過「服務端主動向頁面推送數據」的概念。 javascript

如今須要用到redis的發佈/訂閱，頁面「訂閱」某一channel，服務端在某一channel「發佈」內容。服務端發佈後，客戶端能夠經過訂閱實時將剛剛發佈的內容展現出來。 html

說說我探索的解決過程吧。。從用tomcat的WebSocketServlet，但發現已經不推薦使用（廢棄）了，加上它必須依賴tomcat，而且前臺訂閱的邏輯也難以表達，因此不行；後來又想到用javax.websocket-api.jar的@ServerEndpoint，可是，仍是卡住了。。由於也是難以體現redis的發佈/訂閱功能。 java

後來一直苦於用何種解決方案，這時，socket.io+redis+node.js實時聊天的例子讓我眼前一亮。。 node

好了，說說我對nodejs的理解——Node是一個Javascript運行環境(runtime)，就是Js的服務器，相似tomcat或weblogic是java代碼的運行服務器同樣。。安裝nodejs以後，最新版已經帶了npm，而npm是用於安裝各類支持nodejs擴展的客戶端的。好比你想要用到redis，就必須安裝redis的nodejs客戶端。把nodejs配好環境變量後，使用以下命令便可安裝redis： jquery

npm install redis web

安裝好後，它默認是在C:\Users\xxx\node_modules多一個redis的文件夾的，但若是你安裝的nodejs不在C盤，最好是把剛剛安裝的module拷貝至你安裝包下的node_modules目錄下。安裝好後，就能夠在Js中使用require('redis')了。 ajax

socket.io鏈接於browser和nodejs的http服務器之間,可用於兩者之間同步數據。一樣，它也須要經過npm命令安裝。 redis

解決過程以下： npm

編寫pubsub.js做爲前臺頁面訂閱某一渠道的服務端（便與測試，我這裏是把渠道寫死的： var c = 'testchannel';）： api

Js代碼

var server = require('http').createServer(function (request, response) {
response.writeHead(200, {'Content-Type': 'text/plain'});
response.end('Hello World\n');
}).listen(1379);
var redis = require('redis');
var redisclient = redis.createClient();
var sub = function(c) {
var c = 'testchannel';
redisclient.subscribe(c, function(e) {
console.log('subscribe channel : ' + c);
});
}
sub();
console.log('Server running at http://127.0.0.1:1379/');
var io = require('socket.io')(server);
io.on('connection', function(socket) {
redisclient.on('message', function(error, msg) {
console.log('connection');
console.log(msg);
socket.emit('msgReceived', msg);
});
})

而後，定義用來顯示訂閱消息的前臺頁面：

Html代碼

<html>
<head>
<script src="F:\nodejs\node_modules\socket.io\node_modules\socket.io-client\socket.io.js"></script>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div style="width:100px; height:200px; border:1px solid red" id="show"></div>
</script>hello world <script type="text/javascript">
var div = $("#show");
console.log("hello");
var socket = io('http://localhost:1379');
socket.on('connection', function() {
console.log('connection setup for socket.io') });
socket.on('msgReceived', function(msg) {
//alert(div.html());
div.append(msg + "<br/>");
//alert(msg);
})
</script>
</body>
</html>

頁面中var socket = io('http://localhost:1379');一行是關鍵，它和pubsub.js中 listen(1379)裏對應。代表位於本地的Nodejs服務器的1379端口，在pubsub.js裏listen(1379)被監聽了。

用任一瀏覽器（我這裏是谷歌的），打開剛定義的前臺頁面。

頁面此時沒內容，由於還未開啓pubsub.js發起訂閱請求。

OK，咱們開始運行pubsub.js發起請求

接下來要用redis發佈請求咯：

打開redis服務：

再打開一客戶端，向testchannel發佈消息：

運行pubsub.js： node pubsub.js

能夠看到：

開啓一redis客戶端，可看到訂閱內容：

重點來了，頁面也可顯示訂閱的內容：

同理，你在java中寫發佈到渠道testchannel的的代碼，前臺頁面同樣能夠顯示。

而你開啓另一個瀏覽器（好比搜狗），也是能夠看到實時訂閱的消息的：

這說明，已經作到了redis主動向頁面push數據，實時推送的效果。

總結：nodejs做爲頁面訂閱的pubsub.js的運行服務端，socket.io則是相似websocket的功能，實現nodejs和瀏覽器之間交流的橋樑，是redis向頁面推送數據的關鍵。另外注意nodejs用到redis和socket.io這2個module，必需要先用npm命令安裝擴展。注意redis發佈訂閱思想在實時推送中的模型——前臺頁面訂閱某一渠道的消息，而發佈的話則是由redis來發布的。