【flask-socektio】

之前不知道在哪個(gè)場合下提到過如何從web后臺向前臺推送消息。聽聞了反向ajax技術(shù)這種模式之后，大呼神奇，試了一下之后發(fā)現(xiàn)也確實(shí)可以用。不過，反向ajax的代價(jià)也很明顯，只要客戶端還和服務(wù)端要有信息交互，服務(wù)端就必須還維持客戶端的這個(gè)請求，然后在合適的時(shí)候返回。當(dāng)客戶端一多，這么做的成本會比較大。

其他的后端推前端的技術(shù)還有類似于隱藏frame，Comet、長輪詢等等，沒有詳細(xì)了解過，總之也是各有千秋但也各有利弊。

前不久在開發(fā)中碰到了這樣一個(gè)場景，就是在后臺執(zhí)行一些代碼，然后會根據(jù)執(zhí)行的最新情況推送一些提示信息到前臺讓用戶可以知道目前執(zhí)行到哪一步了。典型就是一個(gè)后臺向前端推送消息的，而且是比較簡單的一個(gè)場景。用反向ajax的話好像略顯累贅，因?yàn)橄⒌念l度還是蠻高的，應(yīng)該會消費(fèi)不少網(wǎng)絡(luò)資源，而且ajax請求的url后執(zhí)行的程序肯定和后臺的工作程序是并行的，如果要獲得工作程序的進(jìn)度信息可能還會涉及到進(jìn)程間通信問題，總之各種麻煩。最好能找到一種解決方案，可以在后臺隨時(shí)推送數(shù)據(jù)后在前臺實(shí)時(shí)展示并且允許后臺程序繼續(xù)跑的。

然后找了下就找到了websocket這種html5之后才有的技術(shù)。另外再找了下發(fā)現(xiàn)了flask-socketio這個(gè)拓展模塊添加了flask對websocket的支持。

概述

websocket是html5中實(shí)現(xiàn)了服務(wù)端和客戶端進(jìn)行雙向文本或二進(jìn)制數(shù)據(jù)通信的一種新協(xié)議，其實(shí)已經(jīng)低于HTTP協(xié)議本身和HTTP本質(zhì)上沒有什么關(guān)系了。不過形式上兩者還是有想象之處。因此websocket的連接地址是長這樣的：ws://localhost:8080。可以看到，協(xié)議修飾符不是http了。

另外，websocket在連接建立階段是通過HTTP的握手方式進(jìn)行的，這可以看做是為了兼容瀏覽器或者使用一些現(xiàn)成的功能來實(shí)現(xiàn)，這樣一種捷徑。當(dāng)連接建立之后，客戶端和服務(wù)端之間就不再進(jìn)行HTTP通信了，所有信息交互都由websocket接管。

從資源占用的角度上來說，其實(shí)websocket比ajax占用的資源更多，但它真正實(shí)現(xiàn)了全雙工通信這一點(diǎn)還是很理想的，意味著無論是前端還是后臺的信息交互程序編寫都會變得更加方便。由于采用了新的協(xié)議，所以我們也需要適當(dāng)?shù)馗脑煜虑昂笈_的程序。

前端ws編寫以及socket.io.js

由于是比較新的東西，并不一定所有的瀏覽器都支持，所有可以用:

if ('WebSocket' in window){ websocket = new WebSocket('ws://localhost:8080');}

這樣的方式來判斷是否支持，只有支持的情況下才開始websocket處理

其實(shí)光實(shí)現(xiàn)雙向通信是并沒有什么用的，主要還是在通信過程中，讓前后端發(fā)生一些動作，這就需要添加監(jiān)聽事件。在前端這里，我們可以給websocket這個(gè)對象的一些監(jiān)聽回調(diào)接口賦值，來規(guī)定在不同的場合下前端做些不同的事情。比如：