Flask使用SocketIO实现WebSocket与Vue进行实时推送
作者:洲的学习笔记 发布时间:2023-02-19 05:05:45
前言
本文旨在记录使用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’的问题!
如下图所示:只有三行控制台输出的记录、总是报错(该错在网上没有解决方法)等。
技术选型:前端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这个包来替代这两个包完成功能开发。
解决之后,控制台可以正常显示了。
4、Bug 2:显示连接错误。
在连接错误之后,推测这种报4的错误(网上全是3的错误),应该是没有安装gevent-websocket这个包,但是安装了之后又会造成第一类bug,所以可以直接安装simple-websocket这个依赖包。
参考文章:https://www.jb51.net/article/250776.htm
来源:https://blog.csdn.net/weixin_51484460/article/details/124538365
猜你喜欢
- phpqrcode类库官网下载地址: https://sourceforge.net/projects/phpqrcode/1.我们先看看p
- 在 Python 中,列表是一种非常常见且强大的数据类型。但有时候,我们需要从一个列表中删除特定元素,尤其是当这个元素出现多次时。本文将介绍
- 免费手机号码归属地API查询接口和PHP使用实例分享最近在做全国性的行业分类信息网站,需要用到手机号归属地显示功能,于是就穿梭于各大权威站点
- 本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容:一、我们首先从经典的
- 目录什么是 assert 断言断言和异常的使用场景使用断言的几个原则建议不使用断言的情况:总结什么是 assert 断言Assert sta
- 如下所示:import itchat, timefrom itchat.content import TEXT#name = ' &
- 1. 直接打印错误try:# your codeexcept KeyboardInterrupt:print("quit"
- 本文实例讲述了Python中pygame的mouse鼠标事件用法。分享给大家供大家参考,具体如下:pygame.mouse提供了一些方法获取
- ASP开发中有用的函数(function)集合,挺有用的,请大家保留!'******************************
- 这篇文章主要介绍了python线程定时器Timer实现原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- 感谢大家对《 CSS Sprites 样式生成工具 》的喜爱,综合了1.x版本时大家所提出来的意见和建议,2.0版本主要的改变有下面几点:修
- Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解,他是这个领域杰出的专家,曾写过不少 CSS 方面的书
- 1、安装PyInstallerPyInstaller的作用如标题所说,首先需要下载PyInstaller和UPX,UPX是用来压缩exe的,
- 目录准备读取数据写入数据修改数据进阶用法最后准备首先,我们需要安装依赖包# 安装依赖包pip3 install 
- 一 前言pandas学到分组迭代,那么基础的pandas系列就学的差不多了,自我感觉不错,知识追寻者用pandas处理过一些数据,蛮好用的;
- 在使用Python处理数据时,经常需要对数据筛选。这是在对时间筛选时,判断两列时间是否相差一年,如果是,则返回符合条件的所有列。data原始
- 如何将123456789转化成123,456,789这样的形式呢?很多流量大的站比如优酷都有这样的格式。也是设计程序最常用的算
- 装饰器基本概念大家都知道装饰器是一个很著名的设计模式,经常被用于 AOP (面向切面编程)的场景,较为经典的有插入日志,性能测试,事务处理,
- 如下所示:#coding=utf-8#布局自定义尺寸from tkinter import *class App:def __init__(
- Python中包含了许多内建的语言特性,它们使得代码简洁且易于理解。这些特性包括列表/集合/字典推导式,属性(property)、以及装饰器