【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

  由于是比较新的东西,并不一定所有的浏览器都支持,所有可以用:

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

  这样的方式来判断是否支持,只有支持的情况下才开始websocket处理

  其实光实现双向通信是并没有什么用的,主要还是在通信过程中,让前后端发生一些动作,这就需要添加监听事件。在前端这里,我们可以给websocket这个对象的一些监听回调接口赋值,来规定在不同的场合下前端做些不同的事情。比如:

  1. wesocket.onopen = function(){
  2. alert('建立websocket连接');
  3. }
  4.  
  5. websocket.onerror = function(){
  6. alert('WebSocket连接发生错误');
  7. }
  8.  
  9. /****
  10. 等等,由于有封装程度更高的js模块,就不扩展写从较底层构建websocket的方法了
  11. ****/

  ●  socket.io.js

  如果觉得略显麻烦,那么可以用一些已经封装好的websocket的js库,比如socket.io.js。这个库似乎是专门为了node.js设计的,(主要因为网上随便一搜都是把它和node.js结合使用相关的信息。。)不过单独拿出来也能用。引用如果使用cdn方式,那么可以写

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

  应用了socket.io.js的一个简单socket对象的创建可以这么写:

  1. var websocket_url = 'http"//' + document.domain + ':' + location.port + '/testnamespace';
  2.  
  3. //没错是用http开头的url了,因为这个库会自动解析并帮我们创建websocket对象的
  4. //最后的namespace是websocket中的命名空间,后面再讲
  5.  
  6. var socket = io.connect(wesocket_url);

  得到了这个socket对象之后,我们可以用这个对象进行消息的收发。简答的消息收发如下:

  1. //发送消息
  2. socket.emit('request_for_response',{'param':'value'});
  3.  
  4. //监听回复的消息
  5. socket.on('response',function(data){
  6. if (data.code == '200'){
  7. alert(data.msg);
  8. }
  9. else{
  10. alert('ERROR:' + data.msg);
  11. }
  12. });

  其中request_for_response和response两个名字都是我自己取的,这两个名字应该和后端相关的名字协同一致才能保证通信的成功。另外刚才提到了namespace这个东西,因为namespace是在socket创建的时候就决定的,也就是说这些消息的收发都是在'testnamespace'这个空间中进行的。所以在后端上这个空间也要和前端一致。

■  后端socket编写(flask-socketio)

  这里用python的后端来说明。python有socketio这个模块,不过和前端时一样,直接从较为底层的开始编写比较僵硬。各类web框架应该都对websocket有了较好的支持,这里选用了flask这个框架的flask-socketio的扩展。

  flask-socketio的创建和运行方式如下:

  1. from flask import Flask
  2. from flask_socketio import SocketIO,emit
  3.  
  4. app = Flask(__name__)
  5.  
  6. socketio = SocketIO()
  7. socketio.init_app(app)
  8.  
  9. """
  10. 对app进行一些路由设置
  11. """
  12.  
  13. """
  14. 对socketio进行一些监听设置
  15. """
  16.  
  17. if __name__ == '__main__':
  18. socketio.run(app,debug=True,host='0.0.0.0',port=5000)
  19. #这里就不再用app.run而用socketio.run了。socketio.run的参数和app.run也都差不多

  上面的,对app的路由设置就不再说了,想说的是对socketio的监听设置,这才是真正关系到前后端websocket通信过程的。结合前面的前端代码,socketio的监听设置可以这样做:

  1. @socketio.on('request_for_response',namespace='/testnamespace')
  2. def give_response(data):
  3. value = data.get('param')
  4.  
  5. #进行一些对value的处理或者其他操作,在此期间可以随时会调用emit方法向前台发送消息
  6. emit('response',{'code':'','msg':'start to process...'})
  7.  
  8. time.sleep(5)
  9. emit('response',{'code':'','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']这样的方法。

【Flask】 flask-socketio实现WebSocket的更多相关文章

  1. python三大web框架Django,Flask,Flask,Python几种主流框架,13个Python web框架比较,2018年Python web五大主流框架

    Python几种主流框架 从GitHub中整理出的15个最受欢迎的Python开源框架.这些框架包括事件I/O,OLAP,Web开发,高性能网络通信,测试,爬虫等. Django: Python We ...

  2. Inside Flask - flask 扩展加载过程

    Inside Flask - flask 扩展加载过程 flask 扩展(插件)通常是以 flask_<扩展名字> 为扩展的 python 包名,而使用时,可用 import flask. ...

  3. Inside Flask - flask.__init__.py 和核心组件

    Inside Flask - flask.__init__.py 和核心组件 简单的示例 首先看看一个简单的示例.使用 Flask ,通常是从 flask 模块导入 Flask . request 等 ...

  4. Inside Flask - Flask 简介

    Inside Flask - Flask 简介 前言 Flask 的设计目标是实现一个 wsgi 的微框架,其核心代码保持简单和可扩展性,很容易学习.对于有一定经验初学者而言,跟着例子和一些书的代码来 ...

  5. Flask - Flask的蓝图(BluePrint)

    目录 Flask - Flask的蓝图(BluePrint) 一. 初始Flask蓝图 进阶Flask蓝图 使用蓝图做一个增删改查 1.使用蓝图进行web应用搭建: 2.使用Flask蓝图,查看学生信 ...

  6. day92:flask:flask简介&基本运行&路由&HTTP请求和响应

    目录 1.Flask简介 2.关于使用flask之前的准备 3.flask的基本运行 4.flask加载配置 5.传递路由参数(没有限定类型) 6.传递路由参数(通过路由转换器限定路由参数的类型) 7 ...

  7. [python][flask] Flask 图片上传与下载例子(支持漂亮的拖拽上传)

    目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html ...

  8. 结合manage.py,在flask项目中使用websocket模块--- flask-socketio

    前言:       - 为什么我要使用 flask-socketio模块,而不是flask-sockets?       - 因为flask-socketio与前端流行的websocket库socke ...

  9. flask 第五章 WebSocket GeventWebsocket 单聊群聊 握手 解密 加密

    1.WebSocket 首先我们来回顾一下,我们之前用socket学习过的项目有: 1.django 2.flask 3.FTP - 文件服务 HTTP - TCP (特点): 1.一次请求,一次响应 ...

随机推荐

  1. find命令 参数

    记一下我遇到过的: 中 !表示否定 -a 表示并且 -o  或者   perm注意权限模式,有无 -,单表含义不同,有-是表示属主.组.其他组权限对应(即某位为0时,表示不指定要匹配的权限,而不是没有 ...

  2. 挖一挖不常用到而又很实用的重载-Trim

    这个我想没有那个开发人员说不知道,但是里面有一个重载,这个不知道有多少开发人员知道! 可以看到,我可以去掉字符串前后的指定字符,只要我在char[]中指定即可,而不是仅仅去掉空格,这次为什么要提它,是 ...

  3. AM335x(TQ335x)学习笔记——WM8960声卡驱动移植

    经过一段时间的调试,终于调好了TQ335x的声卡驱动.TQ335x采用的Codec是WM8960,本文来总结下WM8960驱动在AM335x平台上的移植方法.Linux声卡驱动架构有OSS和ALSA两 ...

  4. freemarker嵌入文件输出结果

    freemarker嵌入文件输出结果 1.嵌入的文件代码 inc.ftl: <#assign username="李思思"> 2.父文件代码 inner.ftl: &l ...

  5. Caused by: java.lang.ClassNotFoundException: org.springframework.orm.hibernate4.HibernateTemplate

    1.错误描述 严重: Context initialization failed org.springframework.beans.factory.CannotLoadBeanClassExcept ...

  6. C#扩展方法类库StringExtensions

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. 手机端仿ios的银行下拉脚本五

    代码 <script> $('#bankName').click(function(){ var $this = $(this); new Picker({ "title&quo ...

  8. 经典面试问题: Top K 之 ---- 海量数据找出现次数最多或,不重复的。

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  9. RobotFramework自动化测试框架的基础关键字(二)

    1.1.1        如何快速查询某一个关键字的API说明 鼠标选中我们关键字,同时按住Ctrl+Alt键,即可出来该关键字的帮助API以及使用示例 1.1.2        如何快速补全关键字 ...

  10. unity案例入门(一)(拾取游戏)

    1. 案例简述 这个案例实现一个非常简单的拾取宝物游戏,主角是一个小球,玩家通过键盘控制小球拾取全部宝物. 2. 键盘控制物体移动 private Rigidbody rd; public int f ...