flask-socketio实现WebSocket的方法


Posted in Python onJuly 31, 2018

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

略大项目中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']这样的方法。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python中使用第三方库xlrd来写入Excel文件示例
Apr 05 Python
Python的Flask开发框架简单上手笔记
Nov 16 Python
Python Sqlite3以字典形式返回查询结果的实现方法
Oct 03 Python
Python中read()、readline()和readlines()三者间的区别和用法
Jul 30 Python
tensorflow TFRecords文件的生成和读取的方法
Feb 06 Python
查看django执行的sql语句及消耗时间的两种方法
May 29 Python
Python 输入一个数字判断成绩分数等级的方法
Nov 15 Python
Python OpenCV实现视频分帧
Jun 01 Python
解决Python在导入文件时的FileNotFoundError问题
Apr 10 Python
Python如何读写二进制数组数据
Aug 01 Python
搭建pypi私有仓库实现过程详解
Nov 25 Python
Python结合百度语音识别实现实时翻译软件的实现
Jan 18 Python
深入flask之异步非堵塞实现代码示例
Jul 31 #Python
Django框架使用富文本编辑器Uedit的方法分析
Jul 31 #Python
Windows下python3.6.4安装教程
Jul 31 #Python
windows下pycharm安装、创建文件、配置默认模板
Jul 31 #Python
win8下python3.4安装和环境配置图文教程
Jul 31 #Python
Win8.1下安装Python3.6提示0x80240017错误的解决方法
Jul 31 #Python
Win8下python3.5.1安装教程
Jul 29 #Python
You might like
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
浅谈PHP错误类型及屏蔽方法
2017/05/27 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
Smarty模板配置实例简析
2019/07/20 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
Node.js中package.json中库的版本号(~和^)
2019/04/02 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
详解Python当中的字符串和编码
2015/04/25 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
TensorFlow搭建神经网络最佳实践
2018/03/09 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
Python中six模块基础用法
2019/12/08 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
联想德国官网:Lenovo Germany
2018/07/04 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL