如何在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方法实际上是做了一个自定义事件的工作，可以说更加灵活多变一点。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。