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

标签：websocket socketio Flask SocketIO flask WebSocket

Flask：使用SocketIO实现WebSocket与前端Vue进行实时推送（gevent-websocket、flask-socketio、flask不出现running on 127..问题）

精选原创

程序员洲洲2023-04-30 06:55:59博主文章分类：Flask©著作权

文章标签websocket flask 前端 vue 封装文章分类jQuery 前端开发阅读数2169

前言

本文旨在记录使用Flask框架过程中与前端Vue对接过程中，存在WebSocket总是连接失败导致前端取不到数据的问题。以及在使用WebSocket相关功能的库包gevent-websocket之后，导致运行Flask项目之后，控制台没有显示running on 127.0.0.1:5000 问题、以及没有输出log日志记录的问题、以及总是报错Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed：Error during Websocket handshake：Unexpected response code：400’的问题！该篇文章花费了笔者和笔者同学较多精力和时间，转载请说明来源！

如下图所示：只有三行控制台输出的记录、总是报错（该错在网上没有解决方法）等。

Flask：使用SocketIO实现WebSocket与前端Vue进行实时推送（gevent-websocket、flask-socketio、flask不出现running on 127..问题）_websocket

Flask：使用SocketIO实现WebSocket与前端Vue进行实时推送（gevent-websocket、flask-socketio、flask不出现running on 127..问题）_vue_02

技术选型：前端Vue、后端Flask。

核心问题

需要着重注意的是，Flask框架中有原生的Websocket写法，也有对Websocket封装之后的依赖包SocketIO写法，所以在进行与前端对接的过程中，需要与前端对接好接口标准。在本次项目中，后端最开始用的是封装好WebSocket后的socketio进行编写，而前端使用了原生的websocket-vue写法，导致一直对接不上，获取不到数据。以及所有的报错或者各种bug问题，笔者都推测是跟gevent-websocket这个包有关。

在前端更改为vue-socketio之后，成功解决对接失败问题。（也可以后端改用原生写法，总之两边需要同时使用一个标准。）前端Vue可以参考Vue的文档去看使用哪种写法即可。

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

Flask-Sockets和Flask-SocketIO之间的主要区别在于前者仅仅将WebSocket协议（通过使用gevent-websocket项目）进行包装，因此它只适用于原生支持WebSocket协议的浏览器，对于那些不支持WebSocket协议的较老的浏览器，就无法使用它了。

Flask-SocketIO则不同，它不仅实现了WebSocket协议，并且对于那些不支持WebSocket协议的旧版浏览器，使用它也能够实现相同的效果。新版旧版的浏览器都能使用他。可以这么理解，flask把websocket功能封装在了socketio这个新的包里面。

另一个区别是Flask-SocketIO实现了SocketIO Javascript库公开的消息传递协议。
而Flask-Sockets只是实现通信通道，发送的是完全取决于应用程序。

1、Flask-SocketIO（封装写法）

使用SocketIO之前需要导入该包，即pip install flask-socketio。也可以直接在代码中import该包中的两个功能。
即：from flask_socketio import SocketIO, emit。

下面是服务端代码：（关于如何在实战中应用，可以看笔者上一篇关于flask博客中的代码实现，大致思路是使用线程）

from flask import Flask, render_template
from flask_socketio import SocketIO, emit

app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(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(){
    var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
    //注意如果使用var socket = io.connect(location.protocol + ‘//’ + document.domain.....的写法，这里的protocol是http协议，而不是走的是ws，笔者推测是对ws进行了封装，导致最终走的是http协议。
    //上面代码中的/test 就是namespace
    
    socket.on('my response', function(msg) {
        $('#log').append('<p>Received: ' + msg.data + '</p>');
    });.
    
    $('form#emit').submit(function(event) {
        socket.emit('my event', {data: $('#emit_data').val()});
        return false;
    });
    
    $('form#broadcast').submit(function(event) {
        socket.emit('my broadcast event', {data: $('#broadcast_data').val()});
        return false;
    });
});

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

服务端：

from flask import Flask
from flask_sockets import Sockets
import datetime
import time
import random

app = Flask(__name__)
sockets = Sockets(app)

@sockets.route('/echo')
def echo_socket(ws):
    while not ws.closed:
        now = datetime.datetime.now().isoformat() + 'Z'
        ws.send(now)  #发送数据
        time.sleep(1)

@app.route('/')
def hello():
    return 'Hello World!'

if __name__ == "__main__":
    from gevent import pywsgi
    from geventwebsocket.handler import WebSocketHandler
    server = pywsgi.WSGIServer(('', 5000), app, handler_class=WebSocketHandler)
    print('server start')
    server.serve_forever()

客户端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
</head>
<body>
    <div id="time" style="width: 300px;height: 50px;background-color: #0C0C0C;
    color: white;text-align: center;line-height: 50px;margin-left: 40%;font-size: 20px"></div>

    <script>
            var ws = new WebSocket("ws://127.0.0.1:5000/echo");  #连接server
			//这是websocket的前端原生写法，直接连接ws。
            ws.onmessage = function (event) {
                content = document.createTextNode(event.data); # 接收数据
                $("#time").html(content);

            };

    </script>
    </body>
</html>

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这个包来替代这两个包完成功能开发。

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

Flask：使用SocketIO实现WebSocket与前端Vue进行实时推送（gevent-websocket、flask-socketio、flask不出现running on 127..问题）_vue_03

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

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

上一篇：【企业云端全栈开发实践-1】项目介绍及环境准备、Spring Boot快速上手

下一篇：Flask学习与项目实战3：简单入手模板及高阶使用

相关文章

SpringBoot集成WebSocket实现消息推送
SpringBoot集成WebSocket实现消息推送
消息推送WebSocket
Python+Flask+MySQL 实现简单的购物车
介绍示如何使用 Python、Flask、MySQL 编写一个简单的购物车？这个购物车非常简单，它没有结帐选项，付款选项。这是关于在在线购物门户中显示产品，将商品添加到购物车，从购物车中删除商品并一次性从购物车中删除所有商品或清空购物车。先决条件Python 3.7.4 – 3.9.1， MySQL 8.0.17 – 8.0.22， Flask 1.1.1 – 1.1.2目录创建一个项目根目录，您
MySQLflaskmysql购物车代码模板
安装配置python后端Flask环境
安装配置python后端Flask环境
flaskpython环境变量后端
Python: flask-socketio使用Websocket协议进行通讯
文档：PyPI: https://pypi.org/project/Flask-SocketIO/Github: https://github.com/miguelgrinberg/Flask-SocketIOdoc: https://flask-socketio.readthedocs.iosocket.io: https://socket.io/安装pip install flask-socketio gevent-websocket代码实例from flask import Fl
Python
Flask使用flask_socketio实现websocket
下面是案例，是我自己用来测试使用的，可以直接运行的。详细的使用请看官网webs
pythonflask后端数据javascript
Flask-SocketIO
what's the Flask-SocketIO Flask 是一个同步的轻量级框架，主要提供最基本的 api 接口功能，表现形式主要是服务端被动接收客户端的请求后做出响应，然后客户端根据响应结果做出业务操作。但是业务领域繁杂，会遇到需要服务端主动发送消息，客户端被动接收的情形，这个时候第一反应会
flask客户端服务端
Flask-SocketIO 简单使用指南
欢迎关注我的微信公众号 AlwaysBeta，更多精彩内容等你来。 Flask-SocketIO 使 Flask 应用程序能够访问客户端和服务器之间的低延迟双向通信。客户端应用程序可以使用 Javascript，C ++，Java 和 Swift 中的任何 SocketIO 官…
FlaskPythonGeventWebSocket服务器
python flask SocketIO
# 实现Python Flask SocketIO## 引言在Web开发中，实时通信是一个非常重要的功能。而Python的Flask框架结合SocketIO可以实现实时通信的功能。在本文中，我将向你介绍如何使用Python Flask SocketIO来实现实时通信。作为一名经验丰富的开发者，我将带领你完成这个任务。## 整体流程首先，让我们来看一下整个实现Python Flask
Pythonpython事件处理
Flask 学习99-Flask-SocketIO 快速入门与使用
前言 flask-socketio 为flask应用提供了一个客户端与服务器之间低延迟的双向通讯官网地址：https://flask-socketio.readthedocs.io/en/latest/intro.html 环境准备先安装flask-socketio pip install fl
Flaskflaskhtmljavascript
在flask中使用websocket-实时消息推送
- flask默认使用wsgi支持http协议，如需使用websocket需要安装gevent-websocket模块，http，websocket协议都可以支持 Django应用：channel Tornado应用：自己有 app.py index.html login.html
flaskhtmljson
Python flask_socketio
## 实现 Python flask_socketio### 概述在本文中，我们将介绍如何使用 Python 的 Flask-SocketIO 扩展来构建一个基于 WebSocket 的实时通信应用程序。我们将从基本概念开始，然后逐步引导您完成整个过程。### 步骤下面是我们在实现 Python flask_socketio 过程中需要遵循的步骤。让我们逐一深入了解。```me
应用程序客户端python
Flask框架：运用SocketIO实现WebSSH
库该库可以直接通过pip仓库安装，如下内容将重点简述SocketIO库在Flask框架中是如何被
flaskpython后端javascripthtml
使用Flask-socketio完成Flask Websocket
flask-socketio 为了方便所以将代码以及注释放上面，在代码之后有对这个框架的解释（由于本人比较菜，只能解释一点皮毛）__ flask后端文件 flask_ws.py ： from flask import Flask, render_template, request from fl ...
flaskhtml客户端javascript初始化
【转】flask-socketio的版本问题
报错The client is using an unsupported version of the Socket.IO or Engine.IO protocols (further occurrences of this error will be logged with level INFO ...
pythonflask.net解决方案
flask接口的实现实例 python中 flask-socketio
介绍：flask-socketio模块实际上是封装了flask对websocket的支持，websocket在连接建立阶段是通过HTTP的握手方式进行的，这可以看做是为了兼容浏览器或者使用一些现成的功能来实现，这样一种捷径。当连接建立之后，客户端和服务端之间就不再进行HTTP通信了，所有信息交互都由websocket接管。Flask-SocketIO使Flask应用程序可以访问客户端和
Flask统计图socket和echartsocketiopython统计图数据
flask 使用 gevent-websocket + gunicorn 部署（python 实时日志开发+部署）
1 我的falsk websocket 环境 pip install -r ******.txt eventlet==0.24.1 flake8==3.8.4 Flask==0.11.1 Flask-Cors==3.0.10 Flask-Script==2.0.5 Flask-SocketIO==2 ...
flask数据iconginxhtml
flask 利用socketIO 实现在线消息推送
需求：在Flask应用中，如果用户A关注用户B后需要向用户B推送消息，通过消息队列告知IM服务为用户进行推送下面通过一张业务场景图给大家来说明：所以，要实现此过程，必须经过两个步骤： 1：flask服务向消息队列中添加消息 2：socketIO 获取消息，推送消息，而在这一步我们只需要给他指定 ...
flask客户端消息队列推送消息redis
python flask_socketio与flask版本匹配 python flask orm
1.Python 现阶段三大主流Web框架 Django Tornado Flask 对比Django 主要特点是大而全,集成了很多组件,例如: Models Admin Form 等等, 不管你用得到用不到,反正它全都有,属于全能型框架Django 通常用于大型Web应用由于内置组件足够强大所以使用Django开发可以一气呵成Django 优点是大而全,缺点也就暴露出来了,这么多的资源一次性全部
python flask 表单数据输出flaskhtmlform表单
python flask socket python flask socketio room
文章目录前言一、直接使用二、步骤1.需要的东西2.后端代码引入一些初始化视图函数首页聊天退出登录前段代码indexchat用户连接、断开连接发送信息总结前言我是一个大一的学生，参加学校工作室的考核，学习了一点flask的相关知识，这个聊天室只有两个页面，前段用的也是简单的js原生代码进行的一些dom操作一、直接使用想直接跑的可以自取https://github.com/cgynb/a-flas
python flask socketpythonflask后端重定向
flask上使用websocket
Flask-SocketIO服务端安装Flask-Sockets很容易： pip install flask-socketio 注意Flask-SocketIO依赖gevent库，目前它仅可以在python2上运行（译者注：python3.6测试也可以）。gevent很快也会对python3支持。
flaskhtmljquerypythonajax
刻录windows镜像大于4g 刻录win10镜像
解决win10系统刻录iso镜像系统光盘的技巧？很多朋友安装win10系统后，在使用的过程中会遇到对win10系统刻录iso镜像系统光盘进行设置的情况，可能有很多用户还是不能自己对win10系统刻录iso镜像系统光盘进行设置吧，其实简单的来说对win10系统刻录iso镜像系统光盘进行设置的话只需要按照 1、一张可读写的dVd刻录光盘； 2
win10光盘刻录linux镜像so文件64位操作系统Express其他
业务日志存储到es 日志储存是什么
MySQL三大日志知识点总结binlog 二进制日志redolog 重做日志undolog 回滚日志binlog什么是binlog？binlog是MySQL Server层的二进制日志，用于记录MySQL执行的所有写入性操作。无论MySQL使用什么存储引擎，写入性操作都会记录到binlog。binlog是逻辑日志，新来的写入性操作通过追加的方式进行写入。如果当前binlog文件过大，MySQL会创
业务日志存储到esmysql数据库databasesql
vivado address map vivado address map怎么调出来
目录一、创建Vivado工程二、创建Verilog HDL文件三、添加管脚约束四、时序约束五、生成BIT文件六、Vivido仿真七、上板再补充一、创建Vivado工程1、启动Vivado，在Vivado开发环境里点击“Create Project”，创建新工程。 2、弹出窗口点击“Next”，在弹出的窗口中输入工程名和存放的工程路径，工程名在这里
vivado address mapfpga开发时序约束Verilogsed
一条sql最多可以使用多少索引 sql有多少条语句
SQL:结构化查询语言,是一门ANS 的标准计算机语言，用来访问和操作数据库系统 SQL,主要是增加，删除，修改，查询，排序数据。关系型数据库中，数据存储在被称为表（tables）的数据库对象中，表是相关的数据项的集合，它由列和行组成。一个数据库通常包含一个或多个表。每个表由一个名字标识。表包含带有数据的记录（行）。 SQL 分为两个部分：数
一条sql最多可以使用多少索引SQL表名数据
回归性能度量指标回归评价指标
目录 1、概念1.1、前提2、评价指标（性能度量）2.1、分类评价指标2.1.1 值指标-Accuracy、Precision、Recall、F值2.1.2 相关曲线-P-R曲线、ROC曲线及AUC值 2.2、回归评价指标2.2.1 可释方差得分 2.2.2 平均绝对误差 MAE （Mean absolute error） 2.2.3 均方差 MSE （Me
回归性能度量指标深度学习笔记评价指标正例ci

文章目录

前言
核心问题
Flask的原生WebSocket（flask-sockets）与封装SocketIO
1、Flask-SocketIO（封装写法）
2、Flask-Sockets（原生Websocket写法）
3、Bug 1：控制台输出没有Running on 127.0.0.1以及没有输出日志
3、 Bug 2：显示连接错误。

标签：websocket,socketio,Flask,SocketIO,flask,WebSocket
From： https://www.cnblogs.com/xinxihua/p/18117182

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

Flask：使用SocketIO实现WebSocket与前端Vue进行实时推送（gevent-websocket、flask-socketio、flask不出现running on 127..问题）

Flask：使用SocketIO实现WebSocket与前端Vue进行实时推送（gevent-websocket、flask-socketio、flask不出现running on 127..问题）

前言

核心问题

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

1、Flask-SocketIO（封装写法）

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

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

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

相关文章

赞助商

阅读排行