【flask-socektio】

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

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

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

然后找了下就找到了websocket這種html5之后才有的技術。另外再找了下發現了flask-socketio這個拓展模塊添加了flask對websocket的支持。

概述

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

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

從資源占用的角度上來說，其實websocket比ajax占用的資源更多，但它真正實現了全雙工通信這一點還是很理想的，意味著無論是前端還是后臺的信息交互程序編寫都會變得更加方便。由于采用了新的協議，所以我們也需要適當地改造下前后臺的程序。

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

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

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

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

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

wesocket.onopen = function(){  alert('建立websocket連接');}websocket.onerror = function(){  alert('WebSocket連接發生錯誤');}/****等等，由于有封裝程度更高的js模塊，就不擴展寫從較底層構建websocket的方法了****/

 socket.io.js

如果覺得略顯麻煩，那么可以用一些已經封裝好的websocket的js庫，比如socket.io.js。這個庫似乎是專門為了node.js設計的，（主要因為網上隨便一搜都是把它和node.js結合使用相關的信息。。）不過單獨拿出來也能用。引用如果使用cdn方式，那么可以寫

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

應用了socket.io.js的一個簡單socket對象的創建可以這么寫：

var websocket_url = 'http"//' + document.domain + ':' + location.port + '/testnamespace';//沒錯是用http開頭的url了，因為這個庫會自動解析并幫我們創建websocket對象的//最后的namespace是websocket中的命名空間，后面再講var socket = io.connect(wesocket_url);

得到了這個socket對象之后，我們可以用這個對象進行消息的收發。簡答的消息收發如下：

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

其中request_for_response和response兩個名字都是我自己取的，這兩個名字應該和后端相關的名字協同一致才能保證通信的成功。另外剛才提到了namespace這個東西，因為namespace是在socket創建的時候就決定的，也就是說這些消息的收發都是在'testnamespace'這個空間中進行的。所以在后端上這個空間也要和前端一致。

后端socket編寫（flask-socketio）

這里用python的后端來說明。python有socketio這個模塊，不過和前端時一樣，直接從較為底層的開始編寫比較僵硬。各類web框架應該都對websocket有了較好的支持，這里選用了flask這個框架的flask-socketio的擴展。

flask-socketio的創建和運行方式如下：

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

上面的，對app的路由設置就不再說了，想說的是對socketio的監聽設置，這才是真正關系到前后端websocket通信過程的。結合前面的前端代碼，socketio的監聽設置可以這樣做：

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

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

socket監聽響應函數本身不需要返回什么值，只需要在處理過程中適當的位置emit出消息即可。

網上其他一些教程中會提到send方法來取代emit方法的位置（無論是前端還是后端），其實send方法就是把上文中的'request_for_response','response'這兩個標識都默認成'message'。如此在寫的時候就不用寫事件名，直接寫要傳遞的參數即可。反過來看，用emit方法實際上是做了一個自定義事件的工作，可以說更加靈活多變一點。

略大項目中Manager的支持

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

但是經過我的實驗，雖然用manager.run可以讓socketio工作，但是似乎會存在類似于緩存一樣的一種機制。也就是說后臺emit出來的信息并不直接發送到前端，而是在整個響應函數執行結束之后一股腦兒的爆出來。不知道是后端發送時進行了緩存還是前端接收時進行了緩存。

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。