如何在flask-socketio中實現(xiàn)WebSocket

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

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

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

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

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

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

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

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

 socket.io.js

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

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

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

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

得到了這個socket對象之后，我們可以用這個對象進行消息的收發(fā)。簡答的消息收發(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兩個名字都是我自己取的，這兩個名字應(yīng)該和后端相關(guān)的名字協(xié)同一致才能保證通信的成功。另外剛才提到了namespace這個東西，因為namespace是在socket創(chuàng)建的時候就決定的，也就是說這些消息的收發(fā)都是在'testnamespace'這個空間中進行的。所以在后端上這個空間也要和前端一致。

后端socket編寫（flask-socketio）

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

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

from flask import Flask 
from flask_socketio import SocketIO,emit
app = Flask(__name__)
socketio = SocketIO()
socketio.init_app(app)
"""
對app進行一些路由設(shè)置
"""
"""
對socketio進行一些監(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也都差不多

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

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

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

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

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

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