【flask-socektio】

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

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

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

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

概述

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

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

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

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

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

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

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

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

wesocket.onopen = function(){
  alert('建立websocket連接');
}

websocket.onerror = function(){
  alert('WebSocket連接發(fā)生錯(cuò)誤');
}

/****
等等，由于有封裝程度更高的js模塊，就不擴(kuò)展寫從較底層構(gòu)建websocket的方法了
****/

 socket.io.js

如果覺得略顯麻煩，那么可以用一些已經(jīng)封裝好的websocket的js庫(kù)，比如socket.io.js。這個(gè)庫(kù)似乎是專門為了node.js設(shè)計(jì)的，（主要因?yàn)榫W(wǎng)上隨便一搜都是把它和node.js結(jié)合使用相關(guān)的信息。。）不過(guò)單獨(dú)拿出來(lái)也能用。引用如果使用cdn方式，那么可以寫

<script src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>

應(yīng)用了socket.io.js的一個(gè)簡(jiǎn)單socket對(duì)象的創(chuàng)建可以這么寫：

var websocket_url = 'http"http://' + document.domain + ':' + location.port + '/testnamespace';
//沒錯(cuò)是用http開頭的url了，因?yàn)檫@個(gè)庫(kù)會(huì)自動(dòng)解析并幫我們創(chuàng)建websocket對(duì)象的
//最后的namespace是websocket中的命名空間，后面再講
var socket = io.connect(wesocket_url);

得到了這個(gè)socket對(duì)象之后，我們可以用這個(gè)對(duì)象進(jìn)行消息的收發(fā)。簡(jiǎn)答的消息收發(fā)如下：

//發(fā)送消息
socket.emit('request_for_response',{'param':'value'});
//監(jiān)聽回復(fù)的消息
socket.on('response',function(data){
  if (data.code == '200'){
    alert(data.msg);
  }
  else{
    alert('ERROR:' + data.msg);
  }
});

其中request_for_response和response兩個(gè)名字都是我自己取的，這兩個(gè)名字應(yīng)該和后端相關(guān)的名字協(xié)同一致才能保證通信的成功。另外剛才提到了namespace這個(gè)東西，因?yàn)閚amespace是在socket創(chuàng)建的時(shí)候就決定的，也就是說(shuō)這些消息的收發(fā)都是在'testnamespace'這個(gè)空間中進(jìn)行的。所以在后端上這個(gè)空間也要和前端一致。

后端socket編寫（flask-socketio）

這里用python的后端來(lái)說(shuō)明。python有socketio這個(gè)模塊，不過(guò)和前端時(shí)一樣，直接從較為底層的開始編寫比較僵硬。各類web框架應(yīng)該都對(duì)websocket有了較好的支持，這里選用了flask這個(gè)框架的flask-socketio的擴(kuò)展。

flask-socketio的創(chuàng)建和運(yùn)行方式如下：

from flask import Flask 
from flask_socketio import SocketIO,emit
app = Flask(__name__)
socketio = SocketIO()
socketio.init_app(app)
"""
對(duì)app進(jìn)行一些路由設(shè)置
"""
"""
對(duì)socketio進(jìn)行一些監(jiān)聽設(shè)置
"""
if __name__ == '__main__':
  socketio.run(app,debug=True,host='0.0.0.0',port=5000)
  #這里就不再用app.run而用socketio.run了。socketio.run的參數(shù)和app.run也都差不多

上面的，對(duì)app的路由設(shè)置就不再說(shuō)了，想說(shuō)的是對(duì)socketio的監(jiān)聽設(shè)置，這才是真正關(guān)系到前后端websocket通信過(guò)程的。結(jié)合前面的前端代碼，socketio的監(jiān)聽設(shè)置可以這樣做：

@socketio.on('request_for_response',namespace='/testnamespace')
def give_response(data):
  value = data.get('param')
  #進(jìn)行一些對(duì)value的處理或者其他操作,在此期間可以隨時(shí)會(huì)調(diào)用emit方法向前臺(tái)發(fā)送消息
  emit('response',{'code':'200','msg':'start to process...'})
  time.sleep(5)
  emit('response',{'code':'200','msg':'processed'})

socketio也用了和app.route類似的裝飾器的形式進(jìn)行監(jiān)聽設(shè)置。主要參數(shù)中有namespace這一項(xiàng)，也就是這項(xiàng)指定了這個(gè)監(jiān)聽的范圍。在前端，只有注冊(cè)在testnamespace上的socket，emit向request_for_response的消息才會(huì)被這個(gè)函數(shù)接受并處理。處理函數(shù)自帶一個(gè)參數(shù)用來(lái)接收前端emit來(lái)消息中的那個(gè)object，在處理函數(shù)中可以對(duì)其解析處理。隨后后端向前端發(fā)送了start to process的消息。也使用了emit這個(gè)方法，然后指明了監(jiān)聽是response。也就是說(shuō)前端on在response上的監(jiān)聽處理函數(shù)會(huì)處理這個(gè)消息（當(dāng)然還是在testnamespace的框架內(nèi)）。發(fā)出消息后后端不會(huì)被阻塞而是繼續(xù)向下執(zhí)行，在處理了5秒鐘之后發(fā)出了結(jié)束處理的消息，前端自然隔了五秒之后就得到了這個(gè)消息了。

socket監(jiān)聽響應(yīng)函數(shù)本身不需要返回什么值，只需要在處理過(guò)程中適當(dāng)?shù)奈恢胑mit出消息即可。

網(wǎng)上其他一些教程中會(huì)提到send方法來(lái)取代emit方法的位置（無(wú)論是前端還是后端），其實(shí)send方法就是把上文中的'request_for_response','response'這兩個(gè)標(biāo)識(shí)都默認(rèn)成'message'。如此在寫的時(shí)候就不用寫事件名，直接寫要傳遞的參數(shù)即可。反過(guò)來(lái)看，用emit方法實(shí)際上是做了一個(gè)自定義事件的工作，可以說(shuō)更加靈活多變一點(diǎn)。

略大項(xiàng)目中Manager的支持

一般而言，上面那樣的socketio.run總給人感覺是個(gè)玩具項(xiàng)目。如果要做一個(gè)大型的項(xiàng)目那肯定得用一些更加高端的啟動(dòng)方式才行，另外配置也應(yīng)該有獨(dú)立的config.py，通過(guò)app.config.form_object的方法來(lái)填充配置。

但是經(jīng)過(guò)我的實(shí)驗(yàn)，雖然用manager.run可以讓socketio工作，但是似乎會(huì)存在類似于緩存一樣的一種機(jī)制。也就是說(shuō)后臺(tái)emit出來(lái)的信息并不直接發(fā)送到前端，而是在整個(gè)響應(yīng)函數(shù)執(zhí)行結(jié)束之后一股腦兒的爆出來(lái)。不知道是后端發(fā)送時(shí)進(jìn)行了緩存還是前端接收時(shí)進(jìn)行了緩存。

所以如果要用websocket的話盡量還是用socketio.run這種方法啟動(dòng)把。至于配置可以在socketio.run中添加類似于debug=current_app.config['DEBUG'],host=current_app.config['HOST']這樣的方法。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論