網上有關“服務器推送”的介紹非常多,其中一種實現方式就是采用comet技術,在瀏覽器與服務端之間建立一個http協議的“長連接”,所謂“長連接”,就是指瀏覽器到服務端的http請求不會馬上得到服務端的應答,而是當滿足一定條件的時候,服務器端才“主動”將數據返回給瀏覽器,這時候一次http請求才完成,普通http連接與http長連接見下圖:
圖1
如上圖,左邊為一般http連接,服務端收到瀏覽器的http請求后會立即做出應答,右邊為http長連接,服務端收到瀏覽器的http請求后,如果有數據需要返回,則立即返回,否則,服務端會“維持住”這個http請求,也就是說,服務端凍結了該次http請求,直到服務端有數據需要返回給瀏覽器或者超時,服務端才“解凍”該次http請求,這時候,一次“瀏覽器->服務端”的http請求才完整結束。
“長連接”的作用很明顯,它能讓服務端“主動”(注意這里的主動加了雙引號)將數據發送給瀏覽器,是的,你沒聽錯,傳統的Web程序只能是瀏覽器主動請求服務端,服務端再作出應答,而現在,服務端居然可以“主動推送”數據給瀏覽器了。既然服務端現在可以“主動推送”數據給瀏覽器,那么我們可以完成許多之前不能做到的事情,比如“即時通訊”、“實時監控”等類似客戶端需要實時更新數據的應用程序了。這里插一句,如果不采用服務端“主動推送”的方式,我們確實可以按照傳統瀏覽器端使用Ajax主動循環請求服務端,來實現所謂的“實時”更新數據的效果,比如每秒ajax請求服務端,來刷新界面數據,但是這種方式的缺點可想而知,不管服務端有沒有需更新的數據,瀏覽器都必須不斷地循環去請求(有關ajax輪詢的缺點請參考網上其他文章)。
具體實現comet的關鍵有以下幾點:
1)服務端不會立即響應瀏覽器的http請求(除非當時有數據需要返回給瀏覽器);
2)瀏覽器處理完服務端返回的數據后,要立即重新建立一個“http長連接”,供下次使用;
3)瀏覽器在處理服務端返回的數據時(下一次長連接建立之前),如果服務端有新的數據需要發送給瀏覽器,那么服務端必須將這些新數據保存起來,等下次“長連接”建立后,再一起發送給瀏覽器;
4)要想服務端能夠實時地、不斷地“主動推送”數據到瀏覽器,瀏覽器與服務端之間必須無時無刻保持一條“http通道”(也就是http長連接),服務端能夠借助該通道將數據返回給瀏覽器;
5)瀏覽器一接收到服務端返回的數據,一次“http長連接”就結束了,需要重新建立下一個。
如果我們以socket編程的角度看“http長連接”,它會是這樣的:
圖2
如上圖,每個browser必須時刻存在一個http下行通道(服務端->瀏覽器,圖中(1)處),這樣任何時候服務端都能“主動推送”數據給browser,同時,每個瀏覽器均可以發起其他正常http請求(圖中(2)處),這樣一來,1號瀏覽器通過普通http請求發送數據(get/post方式)給服務端,服務端就可以立馬將數據“推送”給2號瀏覽器(使用http下行通道),沒錯,這不就是socket編程嗎?
asp.net中可以使用“異步編程模型”(APM)簡單地實現comet,具體涉及到IHttpAsyncHandler接口以及它的BeginPRocessRequest和EndProcessRequest兩個方法,當我們接收到來自瀏覽器發起的“http長連接”請求時,我們只調用IHttpAsyncHandler.BeginProcessRequest方法去異步處理,由于我們不立即調用IHttpAsyncHandler.EndProcessRequest方法,所以這個http請求不會立馬結束(也就是說,該請求被服務端凍結住了),等服務端有數據時,我們再通過類似Response.Write()方法將數據發送給瀏覽器,同時調用IHttpAsyncHandler.EndProcessRequest方法結束異步處理http請求,這時候,瀏覽器端會接收到服務端“主動推送”的數據,瀏覽器端一次完整的http請求到此時才結束,緊接著,瀏覽器端通過腳本再次發起一個“http長連接”的請求,依次循環。
文章最后上傳一個即時通訊的demo,每個登錄的用戶都可以發送消息,在線用戶均能及時收到服務端“推送”來的數據(包括上線、下線以及消息內容等),由于服務端發送的數據種類比較多,我簡單的指定了一個協議(protocol),類似如下:
1 協議類似socket通訊編程中的協議(類似): 2 [4bytes]+[16bytes]+[some]+[1byte] 3 消息類型+消息長度+消息內容+驗證位 4 5 (Web Server->Browser方向)json格式數據包 每個包類似C++中的結構體: 6 7 有用戶上線: 8 { 9 "type":"login",10 "login_name":"xiaozhi_5638",11 "login_time":"2014-04-15 12:34:19"12 }13 14 有用戶發送消息:15 {16 "type":"sendmsg",17 "msg":"hello world![emo:23]",18 "send_name":"xiaozhi_5638",19 "send_time":"2014-04-15 12:34:19"20 }21 22 有用戶下線:23 {24 "type":"logout",25 "logout_name":"xiaozhi_5638",26 "logout_time":"2014-04-15 12:34:19"27 }28 29 心跳包:30 {31 "type":"heartbeat",32 "time":"2014-04-15 12:34:19"33 }34 35 自己登錄結果:36 {37 "type":"login_result",38 "result":"true", //or false39 "online_users":["xiaozhi_5638","somebody","zhangsan"], //登錄成功 返回在線用戶40 "time":"2014-04-15 12:34:19"41 }42 43 自己發送消息結果44 {45 "type":"sendmsg_result",46 "result":"true", //or false47 "msg":"hello world![emo:23]",48 "time":"2014-04-15 12:34:19"49 }50 51 數據包集合(上面的都是單個數據包,data_list中包含多個數據包集合) 用于一次性將服務端緩存的數據包傳遞到browser52 {53 "type":"data_list",54 "list":[{"type":"login","login_name":"xiaozhi_5638","login_time":"2014-04-15 12:34:19"},{"type":"sendmsg","msg":"hello world!","send_name":"xiaozhi_5638","send_time":"2014-04-15 12:34:19"}] //數組類型 包含多個數據包55 }56 Browser->Web Server方向的數據 以普通get/post方式傳遞View Code
服務端到瀏覽器端的數據均以json格式傳遞,瀏覽器到服務端采用jquery寫好的ajax庫方式。瀏覽器端的腳本只需要解析服務端傳遞回來的json數據,然后更新界面,緊接著發起下一個“http長連接”請求。js腳本發起http長連接代碼如下:
1 function Open_Http_Channel() //開啟一個http通道(http長連接) 2 { 3 $.ajax( 4 { 5 url:"chat_aspx.ashx", //action處理頁面 6 type:"post", //數據傳遞方式 7 data:{"requestType":"a_long_connection","id":$("#input_user_name").val()}, //上傳參數 8 dataType:"json", //返回數據類型 9 success:function(data) //解析返回的json包10 {11 //接收web server端返回的數據 開始解析數據 參見protocol.txt12 if(data.type == "login") //有人上線13 {14 ShowLogin(data); //顯示登錄信息15 }16 if(data.type == "sendmsg") //有人發送消息17 {18 ShowMsg(data.msg,data.send_time,data.send_name); //顯示消息19 }20 if(data.type == "logout") //有人下線21 {22 Logout(data);23 }24 if(data.type == "data_list") //數據包集合25 {26 for(i in data.list) //遍歷數據包集合27 {28 if(data.list[i].type == "login")29 {30 ShowLogin(data.list[i]); //顯示登錄信息31 }32 if(data.list[i].type == "sendmsg")33 {34 ShowMsg(data.list[i].msg,data.list[i].send_time,data.list[i].send_name); //顯示消息35 }36 if(data.list[i].type == "logout") //下線37 {38 Logout(data.list[i]);39 }40 //...41 }42 }43 //...44 //...45 //...定義的其他協議 在此處解析46 Open_Http_Channel(); //馬上開啟第二次http通道47 },48 error:function(xhr,info,obj)49 {50 Open_Http_Channel(); //馬上開啟第二次http通道 51 }52 });53 }View Code
其他具體詳細的說明參見源代碼。效果圖一張圖3(gif表情沒有解析替換,直接顯示的文本)
圖3
源碼地址:http://files.VEVb.com/xiaozhi_5638/comet_in_aspnet.rar vs2008
用到了jquery以及跟它相關的幾個界面庫。注意不要在同一個瀏覽器上登錄太多用戶,因為瀏覽器會為每個用戶維持一個http連接,而瀏覽器對http請求數量有限制(筆者用的Chrome上限為6個),超過上限的話,之后所有http請求都會被阻塞。
新聞熱點
疑難解答