引言：

在互聯(lián)網(wǎng)高速發(fā)展的時(shí)代里，web應(yīng)用大有取代桌面應(yīng)用的趨勢(shì)，不必再去繁瑣的安裝各種軟件，只需一款主流瀏覽器即可完成大部分常規(guī)操作，這些原因都在吸引著軟件廠商和消費(fèi)者。而隨著各大廠商瀏覽器版本的迭代，前端技術(shù)的不斷革新，消息推送用到的場(chǎng)景也越來(lái)越多了。

收發(fā)郵件提醒，在線IM聊天，自動(dòng)化辦公提示等等，web系統(tǒng)里總是能見(jiàn)到消息推送的應(yīng)用。消息推送用好了能增強(qiáng)用戶(hù)體驗(yàn)，用不好則會(huì)起相反的效果。在司空見(jiàn)慣的使用過(guò)程中，有沒(méi)有對(duì)其中的原理產(chǎn)生興趣呢？實(shí)現(xiàn)消息推送有N種解決方案，本文針對(duì)其中的幾種，進(jìn)行原理性的講解并附有簡(jiǎn)單的代碼實(shí)現(xiàn)。

目錄：

一、什么是消息推送

二、web端的消息推送

三、實(shí)現(xiàn)個(gè)性化的推送

一、什么是消息推送

經(jīng)典場(chǎng)景1

當(dāng)我在官網(wǎng)觀望猶豫時(shí)，突然看到了上面消息，一位神秘的徐老板竟然爆出了麻痹戒指?。∥业奶?，于是我果斷開(kāi)始了游戲！這消息很及時(shí)！

經(jīng)典場(chǎng)景2

當(dāng)我拿起手機(jī)不知干嘛時(shí)收到了這條招女婿的消息，瞬間來(lái)了精神

上述兩種場(chǎng)景，是生活中很常見(jiàn)的場(chǎng)景，通過(guò)圖文描述，應(yīng)該已經(jīng)清楚了推送的場(chǎng)景，也引出了兩大推送種類(lèi)，web端消息推送和移動(dòng)端消息推送。接下來(lái)對(duì)消息推送進(jìn)行具體的解釋。

概念：

消息推送（Push）指運(yùn)營(yíng)人員通過(guò)自己的產(chǎn)品或第三方工具對(duì)用戶(hù)當(dāng)前網(wǎng)頁(yè)或移動(dòng)設(shè)備進(jìn)行的主動(dòng)消息推送。用戶(hù)可以在網(wǎng)頁(yè)上或移動(dòng)設(shè)備鎖定屏幕和通知欄看到push消息通知。以此來(lái)實(shí)現(xiàn)用戶(hù)的多層次需求，使得用戶(hù)能夠自己設(shè)定所需要的信息頻道，得到即時(shí)消息，簡(jiǎn)單說(shuō)就是一種定制信息的實(shí)現(xiàn)方式。我們平時(shí)瀏覽郵箱時(shí)突然彈出消息提示收到新郵件就屬于web端消息推送，在手機(jī)鎖屏上看到的微信消息等等都屬于APP消息推送。

二、web端的消息推送

這一章節(jié)主要對(duì)幾種消息推送的方式進(jìn)行原理性的講解，并貼出簡(jiǎn)單實(shí)現(xiàn)的代碼。

主要介紹其中的五種實(shí)現(xiàn)方式：短輪詢(xún)、Comet、Flash XMLSocket、Server－sent、WebSocket。

1、短輪詢(xún)

指在特定的的時(shí)間間隔（如每10秒），由瀏覽器對(duì)服務(wù)器發(fā)出HTTP request，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶(hù)端的瀏覽器。瀏覽器做處理后進(jìn)行顯示。無(wú)論后端此時(shí)是否有新的消息產(chǎn)生，都會(huì)進(jìn)行響應(yīng)。字面上看，這種方式是最簡(jiǎn)單的。這種方式的優(yōu)點(diǎn)是，后端編寫(xiě)非常簡(jiǎn)單，邏輯不復(fù)雜。但是缺點(diǎn)是請(qǐng)求中大部分中是無(wú)用的，浪費(fèi)了帶寬和服務(wù)器資源。總結(jié)來(lái)說(shuō)，簡(jiǎn)單粗暴，適用于小型（偷懶）應(yīng)用。

基于Jquery的ajax前端代碼：

＜body＞ ＜div id＝＂push＂＞＜／div＞ ＜script＞ ＄（function （） ｛ setInterval（function （） ｛ getMsg（function （res） ｛ ＄（＂＃push＂）．a(chǎn)ppend（＂＜p＞＂ ＋ res ＋＂＜／p＞＂）； ｝） ｝，10000）； ｝）；
function getMsg（handler）｛ ＄．a(chǎn)jax（｛ url：＂／ShortPollingServlet＂， type：＂post＂， success：function （res） ｛ handler（res） ｝ ｝）； ｝＜／script＞＜／body＞

servlet簡(jiǎn)單實(shí)現(xiàn)后端代碼：

public class ShortPollingServlet extends HttpServlet ｛
public static int count ＝ 0；
protected void doPost（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException ｛ ／／模擬業(yè)務(wù)代碼 count＋＋； response．getWriter（）．print（＂msg：＂ ＋ count ）； ｝
protected void doGet（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException ｛ doPost（request，response）； ｝｝

（左右滑動(dòng)查看全部代碼）

2、Comet

包括了長(zhǎng)輪詢(xún)和長(zhǎng)連接，長(zhǎng)輪詢(xún)是客戶(hù)端向服務(wù)器發(fā)送Ajax請(qǐng)求，服務(wù)器接到請(qǐng)求后hold住連接，直到有新消息才返回響應(yīng)信息并關(guān)閉連接，客戶(hù)端處理完響應(yīng)信息后再向服務(wù)器發(fā)送新的請(qǐng)求；長(zhǎng)連接是在頁(yè)面中的iframe發(fā)送請(qǐng)求到服務(wù)端，服務(wù)端hold住請(qǐng)求并不斷將需要返回前端的數(shù)據(jù)封裝成調(diào)用javascript函數(shù)的形式響應(yīng)到前端，前端不斷收到響應(yīng)并處理。Comet的實(shí)現(xiàn)原理和短輪詢(xún)相比，很明顯少了很多無(wú)用請(qǐng)求，減少了帶寬壓力，實(shí)現(xiàn)起來(lái)比短輪詢(xún)復(fù)雜一丟丟。比用短輪詢(xún)的同學(xué)有夢(mèng)想時(shí)，就可以用Comet來(lái)實(shí)現(xiàn)自己的推送。

長(zhǎng)輪詢(xún)的優(yōu)點(diǎn)很明顯，在無(wú)消息的情況下不會(huì)頻繁的請(qǐng)求，耗費(fèi)資小并且實(shí)現(xiàn)了服務(wù)端主動(dòng)向前端推送的功能，但是服務(wù)器hold連接會(huì)消耗資源，返回?cái)?shù)據(jù)順序無(wú)保證，難于管理維護(hù)。WebQQ（好像掛了）就是這樣實(shí)現(xiàn)的。

基于Jquery的ajax前端代碼：

＜body＞ ＜div id＝＂push＂＞＜／div＞ ＜script＞ ＄（function （） ｛ getMsg（）； ｝）；
function getMsg（） ｛ ＄．a(chǎn)jax（｛ url：＂／LongPollingServlet＂， type：＂post＂， success：function （res） ｛ ＄（＂＃push＂）．a(chǎn)ppend（＂＜p＞＂ ＋ res ＋＂＜／p＞＂）； getMsg（）； ｝ ｝）； ｝＜／script＞＜／body＞

（左右滑動(dòng)查看全部代碼）

servlet簡(jiǎn)單實(shí)現(xiàn)后端代碼：

public class LongPollingServlet extends HttpServlet ｛
public static int count ＝ 0；
protected void doPost（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException ｛ count＋＋； ／／睡眠時(shí)間模擬業(yè)務(wù)操作等待時(shí)間 double random ＝ Math．round（Math．random（）＊10）； long sleepTime ＝ new Double（random）．longValue（）； try｛ Thread．sleep（sleepTime＊1000）； response．getWriter（）．print（＂msg：＂ ＋ count ＋ ＂ after ＂ ＋ sleepTime ＋ ＂seconds servicing＂）； ｝catch （Exception e）｛ e．printStackTrace（）； ｝
｝
protected void doGet（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException ｛ doPost（request，response）； ｝｝

（左右滑動(dòng)查看全部代碼）

長(zhǎng)連接優(yōu)點(diǎn)是消息即是到達(dá)，不發(fā)無(wú)用請(qǐng)求，管理起來(lái)也相對(duì)方便。缺點(diǎn)是服務(wù)端維護(hù)一個(gè)長(zhǎng)連接會(huì)增加開(kāi)銷(xiāo)。比如Gmail聊天（沒(méi)用過(guò)）就是這樣實(shí)現(xiàn)的。

基于Jquery的ajax前端代碼：

＜head＞ ＜title＞pushPage＜／title＞ ＜script type＝＂text／javascript＂＞ function loadData（msg） ｛ var newChild ＝ document．createElement（＂p＂）； newChild．innerHTML ＝ msg； document．getElementById（＂push＂）．a(chǎn)ppendChild（newChild）； ｝＜／script＞＜／head＞＜body＞＜div id＝＂push＂＞＜／div＞＜iframe src＝＂／LongConnServlet＂ frameborder＝＂0＂ name＝＂longConn＂＞＜／iframe＞＜／body＞

（左右滑動(dòng)查看全部代碼）

servlet簡(jiǎn)單實(shí)現(xiàn)后端代碼：

public class LongConnServlet extends HttpServlet ｛ protected void doPost（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException ｛ boolean flag ＝ true； int i ＝ 0； while （flag）｛ try ｛ ／／模擬每1秒查詢(xún)一次數(shù)據(jù)庫(kù)，看是否有新的消息可以推送 Thread．sleep（1＊1000）； ｝catch （Exception e）｛ e．printStackTrace（）； ｝
String pushMsg ＝ ＂push msg ： ＂ ＋ i； response．setContentType（＂text／html；charset＝GBK＂）； response．getWriter（）．write（＂＜script type＝＇text／javascript＇＞parent．loadData（＇＂ ＋ pushMsg ＋ ＂＇）＜／script＞＂）； response．flushBuffer（）； i＋＋； if（i＝＝5）｛ flag ＝ false； ｝ ｝ ｝
protected void doGet（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException ｛ doPost（request，response）； ｝｝

（左右滑動(dòng)查看全部代碼）

3、Flash XMLSocket

在 HTML 頁(yè)面中內(nèi)嵌入一個(gè)使用了 XMLSocket 類(lèi)的 Flash 程序。JavaScript 通過(guò)調(diào)用此 Flash 程序提供的socket接口與服務(wù)器端的socket進(jìn)行通信。JavaScript 在收到服務(wù)器端以 XML 格式傳送的信息后可以很容易地控制 HTML 頁(yè)面的內(nèi)容顯示。

原理示意圖

利用Flash XML Socket實(shí)現(xiàn)”服務(wù)器推”技術(shù)前提：

（1）Flash提供了XMLSocket類(lèi)，服務(wù)器利用Socket向Flash發(fā)送數(shù)據(jù)；

（2）JavaScript和Flash的緊密結(jié)合JavaScript和Flash可以相互調(diào)用。

優(yōu)點(diǎn)是實(shí)現(xiàn)了socket通信，不再利用無(wú)狀態(tài)的http進(jìn)行偽推送。但是缺點(diǎn)更明顯：

1．客戶(hù)端必須安裝 Flash 播放器；

2．因?yàn)?XMLSocket 沒(méi)有 HTTP 隧道功能，XMLSocket 類(lèi)不能自動(dòng)穿過(guò)防火墻；

3．因?yàn)槭鞘褂锰捉涌冢枰O(shè)置一個(gè)通信端口，防火墻、代理服務(wù)器也可能對(duì)非 HTTP 通道端口進(jìn)行限制。

這種方案在一些網(wǎng)絡(luò)聊天室，網(wǎng)絡(luò)互動(dòng)游戲中已得到廣泛使用。不進(jìn)行代碼示例。（可參考http：／／t．cn／aezSch）

4、Server－sent

服務(wù)器推指的是HTML5規(guī)范中提供的服務(wù)端事件EventSource，瀏覽器在實(shí)現(xiàn)了該規(guī)范的前提下創(chuàng)建一個(gè)EventSource連接后，便可收到服務(wù)端的發(fā)送的消息，實(shí)現(xiàn)一個(gè)單向通信?？蛻?hù)端進(jìn)行監(jiān)聽(tīng)，并對(duì)響應(yīng)的信息處理顯示。該種方式已經(jīng)實(shí)現(xiàn)了服務(wù)端主動(dòng)推送至前端的功能。優(yōu)點(diǎn)是在單項(xiàng)傳輸數(shù)據(jù)的場(chǎng)景中完全滿(mǎn)足需求，開(kāi)發(fā)人員擴(kuò)展起來(lái)基本不需要改后端代碼，直接用現(xiàn)有框架和技術(shù)就可以集成。

基于HTML5的Server－sent事件：

＜head＞ ＜title＞Title＜／title＞ ＜script＞ var source ＝ new EventSource（＂／ServerSentServlet＂）；／／創(chuàng)建一個(gè)新的 EventSource對(duì)象， source．onmessage ＝ function （evt） ｛／／每接收到一次更新，就會(huì)發(fā)生 onmessage事件 var newChild ＝ document．createElement（＂p＂）； newChild．innerHTML ＝ evt．data； document．getElementById（＂push＂）．a(chǎn)ppendChild（newChild）； ｝＜／script＞＜／head＞＜body＞ ＜div id＝＂push＂＞＜／div＞＜／body＞

（左右滑動(dòng)查看全部代碼）

servlet簡(jiǎn)單實(shí)現(xiàn)后端代碼：

public class ServerSentServlet extends HttpServlet ｛
public static int count ＝ 0；
protected void doPost（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException ｛ count＋＋； response．setCharacterEncoding（＂UTF－8＂）； response．setHeader（＂Content－Type＂， ＂text／event－stream＂）；／／設(shè)置服務(wù)器端事件流 response．setHeader（＂Cache－Control＂，＂no－cache＂）；／／規(guī)定不對(duì)頁(yè)面進(jìn)行緩存 response．setHeader（＂Pragma＂，＂no－cache＂）； response．setDateHeader（＂Expires＂，0）； PrintWriter pw ＝ response．getWriter（）； pw．println（＂retry： 5000＂）； ／／設(shè)置請(qǐng)求間隔時(shí)間 pw．println（＂data： ＂ ＋ ＂msg：＂ ＋ count ＋＂＂）； ｝
protected void doGet（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException ｛ doPost（request，response）； ｝｝

（左右滑動(dòng)查看全部代碼）

5、WebSocket

WebSocket是HTML5下一種新的協(xié)議，是基于TCP的應(yīng)用層協(xié)議，只需要一次連接，便可以實(shí)現(xiàn)全雙工通信，客戶(hù)端和服務(wù)端可以相互主動(dòng)發(fā)送消息。客戶(hù)端進(jìn)行監(jiān)聽(tīng)，并對(duì)響應(yīng)的消息處理顯示。這個(gè)技術(shù)相信基本都聽(tīng)說(shuō)過(guò)，就算沒(méi)寫(xiě)過(guò)代碼，也大概知道干嘛的。通過(guò)名字就能知道，這是一個(gè)Socket連接，一個(gè)能在瀏覽器上用的Socket連接。是HTML5標(biāo)準(zhǔn)中的一個(gè)內(nèi)容，瀏覽器通過(guò)javascript腳本手動(dòng)創(chuàng)建一個(gè)TCP連接與服務(wù)端進(jìn)行通訊。優(yōu)點(diǎn)是雙向通信，都可以主動(dòng)發(fā)送消息，既可以滿(mǎn)足“問(wèn)”＋“答”的響應(yīng)機(jī)制，也可以實(shí)現(xiàn)主動(dòng)推送的功能。缺點(diǎn)就是編碼相對(duì)來(lái)說(shuō)會(huì)多點(diǎn)，服務(wù)端處理更復(fù)雜（我覺(jué)得當(dāng)一條有情懷的咸魚(yú)就應(yīng)該用這個(gè)！）。

前端代碼：

＜body＞ ＜div id＝＂push＂＞＜／div＞＜／body＞＜script＞ ＄（function （） ｛ var webSocket ＝ new WebSocket（＂ws：／／localhost：8080／ws＂）； webSocket．onmessage ＝ function （ev） ｛ ＄（＂＃push＂）．a(chǎn)ppend（＂＜p＞＂ ＋ ev．data ＋＂＜／p＞＂）； ｝ ｝）＜／script＞

（左右滑動(dòng)查看全部代碼）

基于注解簡(jiǎn)單實(shí)現(xiàn)后端代碼：

＠ServerEndpoint（＂／ws＂）public class MyWebSocket ｛
private Session session；
public MyWebSocket（） ｛
｝
＠OnOpen public void onOpen（Session session） ｛ this．session ＝ session； System．out．println（＂someone connect＂）； int count ＝ 1； while （count＜＝5）｛ ／／睡眠時(shí)間模擬業(yè)務(wù)操作等待時(shí)間 double random ＝ Math．round（Math．random（）＊10）； long sleepTime ＝ new Double（random）．longValue（）； try ｛ Thread．sleep（sleepTime＊1000）； session．getBasicRemote（）．sendText（＂msg：＂ ＋ count ＋＂ from server after＂ ＋ sleepTime ＋ ＂ seconds＂）； ｝catch （Exception e）｛ e．printStackTrace（）； ｝ count＋＋； ｝
｝
＠OnError public void onError（Throwable t）｛ System．out．println（＂something error＂）； ｝｝

（左右滑動(dòng)查看全部代碼）

以上是對(duì)五種推送方式原理的簡(jiǎn)單講解和代碼的實(shí)現(xiàn)。

三、實(shí)現(xiàn)個(gè)性化的推送

上面說(shuō)了很多原理，也給出了簡(jiǎn)單的代碼實(shí)現(xiàn)，但是在實(shí)際生產(chǎn)過(guò)程中，肯定不能用上面的代碼，針對(duì)自己系統(tǒng)的應(yīng)用場(chǎng)景選擇合適的推送方案才是合理的，因此最后簡(jiǎn)單說(shuō)一下實(shí)現(xiàn)個(gè)性化推送的兩種方式。第一種很簡(jiǎn)單，直接使用第三方實(shí)現(xiàn)的推送，無(wú)需復(fù)雜的開(kāi)發(fā)運(yùn)維，直接可以使用。第二種就是自己封裝，可以選擇如今較為火熱的WebSocket來(lái)實(shí)現(xiàn)系統(tǒng)的推送。

1、第三方

在這里推薦一個(gè)第三方推送平臺(tái)，GoEasy。

推薦理由是GoEasy的理念符合我們的選擇（可參考http：／／t．cn／Ex6jg3q）：

（1）更簡(jiǎn)單的方式將消息從服務(wù)器端推送至客戶(hù)端

（2）更簡(jiǎn)單的方式將消息從各種客戶(hù)端推送至客戶(hù)端

GoEasy具體的使用方式這里不再贅述，詳見(jiàn)官網(wǎng)。對(duì)于后端后端開(kāi)發(fā)者，可直接使用Rest方式調(diào)用推送，對(duì)于前端或web開(kāi)發(fā)者，可以從web客戶(hù)端用javascript腳本進(jìn)行調(diào)用推送。

2、封裝自己的推送服務(wù)

如果是一個(gè)老系統(tǒng)進(jìn)行擴(kuò)展，那么更推薦使用Server－sent，服務(wù)端改動(dòng)量不會(huì)很大。如果是新系統(tǒng)，更推薦websocket，實(shí)現(xiàn)的功能功能更全面。

我們以websocket為例，不再貼出具體的代碼實(shí)現(xiàn)。

我們?nèi)绻枰褂脀ebsocket技術(shù)實(shí)現(xiàn)自己的推送服務(wù)，需要注意哪些點(diǎn)，或者說(shuō)需要踩哪些坑呢，本文最后列出幾點(diǎn)供大家參考：

長(zhǎng)連接的心跳處理；

從WebSocket中獲取HttpSession進(jìn)行用戶(hù)相關(guān)操作；

服務(wù)端調(diào)優(yōu)實(shí)現(xiàn)高并發(fā)量client同時(shí)在線；

服務(wù)端維持多用戶(hù)的狀態(tài)；

群發(fā)消息；

等等等…．

最后貼出上述代碼的git庫(kù)地址，所有demo均可運(yùn)行。環(huán)境為jdk1．8＋tomcat8。

http：／／t．cn／Ex6TRVZ

精選提問(wèn)：

問(wèn)1：請(qǐng)問(wèn)，分布式下的信息推送適合用哪種，信息推送和訂閱有什么區(qū)別？

答：分布式下我覺(jué)得websocket。訂閱是索取消息，推送是主動(dòng)推送消息。

問(wèn)2：掃碼登錄是使用websocket實(shí)現(xiàn)的嗎？

答：實(shí)現(xiàn)掃碼登陸可以多種方式。輪詢(xún)可以，websocket也可以，看自己選擇。

推薦閱讀

RESTful API教程：學(xué)習(xí)關(guān)鍵的Web服務(wù)設(shè)計(jì)原則

React－native如何變?yōu)橐苿?dòng)端的弄潮兒

使用消息系統(tǒng)進(jìn)行微服務(wù)間通訊時(shí)，如何保證數(shù)據(jù)一致性

關(guān)于作者：徐曉明，普元開(kāi)發(fā)工程師，畢業(yè)于遼寧科技大學(xué)，專(zhuān)注于使用移動(dòng)開(kāi)發(fā)平臺(tái)開(kāi)發(fā)app，負(fù)責(zé)中國(guó)郵政集團(tuán)移動(dòng)平臺(tái)項(xiàng)目郵我行app開(kāi)發(fā)和后臺(tái)開(kāi)發(fā)運(yùn)維工作。