flask web socket,flask-websocket

　　本文主要介绍Flask使用SocketIO实现WebSocket和Vue之间的实时推送。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友就跟着下面的边肖学习吧。

　　00-1010前言核心问题：Flask的原生WebSockets (FLASK-Sockets)和封装SocketIO1、Flask-Sockets(封装编写)2、Flask-Sockets(原生WebSockets编写)3、Bug 1:控制台输出在127.0.0.1上没有运行也没有输出日志4、Bug 2:显示连接错误。

　　本文的目的是记录WebSocket在使用Flask框架的过程中，总是无法连接前端Vue，前端无法获取数据的问题。并且在使用了带有websocket相关函数的库包gevent-websocket后，运行Flask项目后，控制台并没有出现在127.0.0.1:5000上运行的问题，以及没有输出日志记录的问题，并且一直报错WebSocket连接为 ws 3360//127 . 0 . 0 . 133605000/socket。“Ei=4 transport=WebSocket”失败：WebSocket握手期间出错：意外响应代码：400”问题！

　　如下图所示：控制台输出记录只有三行，总是报错(网上没有解决这个错误的方法)等。

　　工艺选择：前端Vue和后端烧瓶。

前言

　　需要注意的是，Flask框架中有原生的Websocket编写方法，Websocket封装后的依赖包也有SocketIO编写方法。所以在和前端对接的过程中，需要和前端有一个好的接口标准。在这个项目中，一开始后端使用封装WebSocket后的socketio进行写入，而前端使用native websocket-vue写入方式，导致对接和数据采集失败。以及所有的错误或bug，作者推测都与gevent-websocket包有关。

　　前端改为vue-socketio后，成功解决了对接失败问题。(后端也可以用原生写。总之，双方需要同时使用一个标准。)前端Vue可以参考Vue的文档，看看用哪种写法。

核心问题

　　Flask-Sockets和Flask-SocketIO的主要区别在于，前者只包装了WebSocket协议(通过使用gevent-websocket项目)，所以只适用于原生支持websocket协议的浏览器，那些不支持WebSocket协议的老款浏览器无法使用。

　　烧瓶浸泡是不同的。它不仅实现了WebSocket协议，对于不支持WebSocket协议的老款浏览器也能达到同样的效果。老版本的浏览器可以用他。可以理解为flask在新的包socketio中封装了websocket函数。

　　另一个区别是Flask-SocketIO实现了SocketIO Javascript库公开的消息传递协议。

　　Flask-Sockets只是一个通信通道，发送什么完全取决于应用程序。

Flask的原生WebSocket（flask-sockets）与封装SocketIO

　　在使用SocketIO之前，您需要导入这个包，即pip install flash-SocketIO。您也可以在代码中直接导入这个包中的两个函数。

　　也就是从flash _ socket io导入socket io，emit。

　　以下是服务器端代码：(关于如何在实战中应用，可以看我上一篇关于flask的博客中的代码实现。总的想法是使用线程。)

　　从烧瓶导入烧瓶，渲染模板

　　从flask_socketio导入socketio，发出

　　app=Flask(__name__)

　　app . config[ SECRET _ KEY ]= SECRET！

　　socketio=S

　　ocketIO(app)

　　@app.route(/)

　　def index():

　　 return render_template(index.html)

　　@socketio.on(my event, namespace=/test)

　　def test_message(message):

　　 emit(my response, {data: message[data]})

　　@socketio.on(my broadcast event, namespace=/test)

　　def test_message(message):

　　 emit(my response, {data: message[data]}, broadcast=True)

　　@socketio.on(connect, namespace=/test)

　　def test_connect():

　　 emit(my response, {data: Connected})

　　@socketio.on(disconnect, namespace=/test)

　　def test_disconnect():

　　 print(Client disconnected)

　　if __name__ == __main__:

　　 socketio.run(app)

　　而对于js来说，客户端代码十分简单，直接上代码：（注意是socketio的标准）

$(document).ready(function(){

2、Flask-Sockets（原生Websocket写法）

　　服务端：

from flask import Flask

　　客户端代码：

&lt;!DOCTYPE html&gt;

3、Bug 1：控制台输出没有Running on 127.0.0.1以及没有输出日志

　　在安装了gevent-websocket的这个包之后，会顺带安装gevent这个包，需要注意的是，gevent这个包会导致项目运行之后，控制台不会输出running on这个bug和没有Log输出日志的bug。

　　经过笔者查证之后，发现是gevent-websocket这个包太老了，2017年的就已经停止更新了。所以这个包如果使用的话，会顺带导致一些对于新版本的Flask兼容性问题，所以导致了控制台的上述两个Bug存在。

　　解决方案：删掉gevent、gevent-websocket这两个包，可以下载 simple-websocket这个包来替代这两个包完成功能开发。

　　解决之后，控制台可以正常显示了。

4、Bug 2：显示连接错误。

　　在连接错误之后，推测这种报4的错误（网上全是3的错误），应该是没有安装gevent-websocket这个包，但是安装了之后又会造成第一类bug，所以可以直接安装simple-websocket这个依赖包。

　　参考文章：https://www.jb51.net/article/250776.htm

　　到此这篇关于Flask使用SocketIO实现WebSocket与Vue进行实时推送的文章就介绍到这了,更多相关Flask Vue 实时推送内容请搜索盛行IT软件开发工作室以前的文章或继续浏览下面的相关文章希望大家以后多多支持盛行IT软件开发工作室！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。