如何在flask-socketio中實現WebSocket

如何在flask-socketio中實現WebSocket？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

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

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,emit
app = 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方法實際上是做了一個自定義事件的工作，可以說更加靈活多變一點。

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。