最新文章專題視頻專題問答1問答10問答100問答1000問答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

node.jschat程序如何實(shí)現(xiàn)Ajaxlong-polling長(zhǎng)鏈接刷新模式_javascript技巧

來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 21:02:38
文檔

node.jschat程序如何實(shí)現(xiàn)Ajaxlong-polling長(zhǎng)鏈接刷新模式_javascript技巧

node.jschat程序如何實(shí)現(xiàn)Ajaxlong-polling長(zhǎng)鏈接刷新模式_javascript技巧:廢話不多說,開始今天的主題??v觀這個(gè)程序,感覺它的最可貴之處,在于展示了,如何用nodejs實(shí)現(xiàn)長(zhǎng)鏈接模式的刷新技術(shù)。 (這個(gè)程序不詳細(xì)介紹,重點(diǎn)講解這個(gè)功能) Client.js 首先看一段核心代碼: 代碼如下: function longPoll (data) {
推薦度:
導(dǎo)讀node.jschat程序如何實(shí)現(xiàn)Ajaxlong-polling長(zhǎng)鏈接刷新模式_javascript技巧:廢話不多說,開始今天的主題??v觀這個(gè)程序,感覺它的最可貴之處,在于展示了,如何用nodejs實(shí)現(xiàn)長(zhǎng)鏈接模式的刷新技術(shù)。 (這個(gè)程序不詳細(xì)介紹,重點(diǎn)講解這個(gè)功能) Client.js 首先看一段核心代碼: 代碼如下: function longPoll (data) {

廢話不多說,開始今天的主題??v觀這個(gè)程序,感覺它的最可貴之處,在于展示了,如何用nodejs實(shí)現(xiàn)長(zhǎng)鏈接模式的刷新技術(shù)。
  (這個(gè)程序不詳細(xì)介紹,重點(diǎn)講解這個(gè)功能)
Client.js  
首先看一段核心代碼:
代碼如下:
function longPoll (data) {
//....此處省略**行
$.ajax({ cache: false
, type: "GET"
, url: "/recv"
, dataType: "json"
, data: { since: CONFIG.last_message_time, id: CONFIG.id }
, error: function () {
addMessage("", "long poll error. trying again...", new Date(), "error");
transmission_errors += 1;
//don't flood the servers on error, wait 10 seconds before retrying
setTimeout(longPoll, 10*1000);
}
, success: function (data) {
transmission_errors = 0;
//if everything went well, begin another request immediately
//the server will take a long time to respond
//how long? well, it will wait until there is another message
//and then it will return it to us and close the connection.
//since the connection is closed when we get data, we longPoll again
longPoll(data);
}
});
}

這是client.js中的一段代碼,一看這段代碼,大家應(yīng)該立馬想到兩個(gè)字——“遞歸”。在longPoll方法中,再次調(diào)用longPoll方法,典型的遞歸調(diào)用。
  根據(jù)這段代碼的語(yǔ)義,可以看出,第一次加載時(shí),會(huì)調(diào)用longPoll方法,異步向"/resv"獲取值,如果成功了, 執(zhí)行success的方法,立即再次調(diào)用longPoll方法。如果失敗了,執(zhí)行error函數(shù),隔10秒中再次調(diào)用longPoll方法。當(dāng)然,執(zhí)行error方法有一定的次數(shù)限制,由變量transmission_errorsx控制。
  大家可能會(huì)有一個(gè)疑問,這樣一直遞歸循環(huán)獲取數(shù)據(jù),服務(wù)器會(huì)不會(huì)有很大的負(fù)擔(dān)?在沒有數(shù)據(jù)可獲取的時(shí)候,也會(huì)一直這樣循環(huán)嗎?當(dāng)然,答案時(shí)否定的!并且,nodejs利用自身的特點(diǎn),很好的處理了這個(gè)問題。接著往下看:
Server.js
現(xiàn)看server中如何回應(yīng)上面client的調(diào)用,核心代碼:
代碼如下:
fu.get("/recv", function (req, res) {
//對(duì)session的驗(yàn)證和更新......
channel.query(since, function (messages) {
if (session) session.poke();
res.simpleJSON(200, { messages: messages, rss: mem.rss });
});
});

先不要管這個(gè)fu.get()是什么意思,它和本次教程無(wú)關(guān)??傊浪芑貞?yīng)client的調(diào)用就行了。上面的代碼,除了對(duì)session的一些操作之外,只是調(diào)用了channel的query方法。注意傳遞的參數(shù):
since,它紀(jì)錄了一個(gè)時(shí)間;
匿名方法,它接受一個(gè)messages參數(shù),兩個(gè)動(dòng)作:1 更新session時(shí)間,2 返回一個(gè)json,即把messages返回給客戶端。
  有人可能會(huì)有疑問:在這里直接返回messages不行嗎,干嘛還得在一個(gè)channel中定義一個(gè)方法才操作?答案:如果是那樣,就成了一個(gè)死循環(huán),server和client每時(shí)每刻都進(jìn)行著數(shù)據(jù)交互,即使沒有信息可返回。
  還是接著往下看吧!
  看channel是怎么定義的:
代碼如下:
var MESSAGE_BACKLOG = 200,
SESSION_TIMEOUT = 60 * 1000;
var channel = new function () {
var messages = [],
callbacks = [];
this.appendMessage = function (nick, type, text) {
var m = { nick: nick
, type: type // "msg", "join", "part"
, text: text
, timestamp: (new Date()).getTime()
};
switch (type) {
case "msg":
sys.puts("<" + nick + "> " + text);
break;
case "join":
sys.puts(nick + " join");
break;
case "part":
sys.puts(nick + " part");
break;
}
messages.push( m );
while (callbacks.length > 0) {
//shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除,并返回第一個(gè)元素的值
callbacks.shift().callback([m]);
}
while (messages.length > MESSAGE_BACKLOG)
messages.shift();
};
this.query = function (since, callback) {
var matching = [];
for (var i = 0; i < messages.length; i++) {
var message = messages[i];
if (message.timestamp > since)
matching.push(message)
}
if (matching.length != 0) {
callback(matching);
} else {
callbacks.push({ timestamp: new Date(), callback: callback });
}
};
// clear old callbacks
// they can hang around for at most 30 seconds.
setInterval(function () {
var now = new Date();
while (callbacks.length > 0 && now - callbacks[0].timestamp > 30*1000) {
callbacks.shift().callback([]);
}
}, 3000);
};

channel中定義了兩個(gè)變量,兩個(gè)方法,還有一個(gè)每隔3秒執(zhí)行一次的setInterval函數(shù)。
  首先看query方法,
  query方法接收兩個(gè)參數(shù):
since:紀(jì)錄一個(gè)時(shí)間
callback:即上面講調(diào)用channel.query方法時(shí)傳入的那個(gè)匿名函數(shù)(JS中,函數(shù)可以當(dāng)參數(shù)傳遞,接收之后可直接調(diào)用。不會(huì)趕快補(bǔ)課啊。。)
  messages里存的時(shí)當(dāng)前的聊天紀(jì)錄隊(duì)列,query方法會(huì)查找符合條件的聊天紀(jì)錄,把他們放在matching隊(duì)列中。如果matching.length>0,則調(diào)用callback接收的函數(shù),即把matching以json格式返回client。但是。。接下來(lái)是重點(diǎn)?。?!
代碼如下:
if (matching.length != 0) {
callback(matching);
} else {
callbacks.push({ timestamp: new Date(), callback: callback });
}

如果matching.length<=0,程序會(huì)把callback和當(dāng)前時(shí)間,以json格式,存入一個(gè)callbacks隊(duì)列中。對(duì)!不執(zhí)行了,因?yàn)闆]有符合條件的聊天消息,不需要在client顯示,所以先把這個(gè)函數(shù)存起來(lái),先不執(zhí)行。
  那也不能這樣一直存著啊,萬(wàn)一下一秒有人發(fā)聊天消息怎么辦?
  接著看appendMessage(添加聊天消息)方法:
  該方法中,前段部分很好理解,無(wú)非是接收傳入的參數(shù),組合成一個(gè)m集合,然后用sys.puts在終端顯示一下,再把m插入到messages聊天消息隊(duì)列中。接下來(lái)又是重點(diǎn):
代碼如下:
while (callbacks.length > 0) {
//shift() 方法用于把數(shù)組的第一個(gè)元素從其中刪除,并返回第一個(gè)元素的值
callbacks.shift().callback([m]);
}

現(xiàn)在要判斷callbacks有沒有儲(chǔ)存,如果有,就執(zhí)行一個(gè),刪除一個(gè),知道執(zhí)行完了為止。因?yàn)橹霸跊]有聊天消息可返回的時(shí)候,有人發(fā)出了請(qǐng)求,然后系統(tǒng)沒有執(zhí)行這些請(qǐng)求,都把他們放在callbacks列表中了。
  現(xiàn)在有人發(fā)送了聊天消息,執(zhí)行添加方法的時(shí)候,要再次把那些沒執(zhí)行的請(qǐng)求都執(zhí)行一遍。
  通俗理解可以是:你給我發(fā)送請(qǐng)求了,我現(xiàn)在還沒有新消息可以答復(fù)你,一旦有人發(fā)了新消息,我會(huì)立刻答復(fù)你。
  不知道大家理解了沒。。
  這一步完了,最后一步,是每隔3秒鐘,清空過期的callbacks,是一個(gè)setInterval函數(shù),這個(gè)不難理解。
總結(jié)
  nodejs用自身基于事件驅(qū)動(dòng)的語(yǔ)言特點(diǎn),實(shí)現(xiàn)了長(zhǎng)鏈接刷新功能,讓我們打開眼界。自我感覺受益匪淺。特此花時(shí)間寫個(gè)教程跟大家分享,同時(shí)也加深我自己的理解。

聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

node.jschat程序如何實(shí)現(xiàn)Ajaxlong-polling長(zhǎng)鏈接刷新模式_javascript技巧

node.jschat程序如何實(shí)現(xiàn)Ajaxlong-polling長(zhǎng)鏈接刷新模式_javascript技巧:廢話不多說,開始今天的主題??v觀這個(gè)程序,感覺它的最可貴之處,在于展示了,如何用nodejs實(shí)現(xiàn)長(zhǎng)鏈接模式的刷新技術(shù)。 (這個(gè)程序不詳細(xì)介紹,重點(diǎn)講解這個(gè)功能) Client.js 首先看一段核心代碼: 代碼如下: function longPoll (data) {
推薦度:
標(biāo)簽: js Chat Nodejs
  • 熱門焦點(diǎn)

最新推薦

猜你喜歡

熱門推薦

專題
Top