Flask使用SocketIO实现WebSocket与Vue进行实时推送

2024-09-28 11:12:56

前言

本文旨在记录使用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

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

vue使用stompjs实现mqtt消息推送通知

最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt消息通知建立一个独立于业务服务系统的消息通知服务,这个服务还可以与开发的语言无关,客户端既可以是安卓也可以是ios,也可以是java或者c#,python等.闲话不多扯,这里只是实现了在vue中使用mqtt的js客户端,后台用.net WEB API用的是c#的mqtt客户端第一步:安装依赖 np
flask上使用websocket的方法示例

目录 Flask-SocketIO服务器端程序 SocketIO客户端程序使用Flask-Sockets Flask-Sockets和Flask-SocketIO之间的主要区别在于前者仅仅将WebSocket协议(通过使用gevent-websocket项目)进行包装,因此它只适用于原生支持WebSocket协议的浏览器,对于那些不支持WebSocket协议的较老的浏览器,就无法使用它了. Flask-SocketIO则不同,通过前面的介绍,读者应该已经知道了它不仅实现了WebSocket协议
flask-socketio实现WebSocket的方法

[flask-socektio] 之前不知道在哪个场合下提到过如何从web后台向前台推送消息.听闻了反向ajax技术这种模式之后,大呼神奇,试了一下之后发现也确实可以用.不过,反向ajax的代价也很明显,只要客户端还和服务端要有信息交互,服务端就必须还维持客户端的这个请求,然后在合适的时候返回.当客户端一多,这么做的成本会比较大. 其他的后端推前端的技术还有类似于隐藏frame,Comet.长轮询等等,没有详细了解过,总之也是各有千秋但也各有利弊. 前不久在开发中碰到了这样一个场景,就是在后台执
Flask使用SocketIO实现WebSocket与Vue进行实时推送

目录前言核心问题 Flask的原生WebSocket(flask-sockets)与封装SocketIO 1.Flask-SocketIO(封装写法) 2.Flask-Sockets(原生Websocket写法) 3.Bug 1:控制台输出没有Running on 127.0.0.1以及没有输出日志 4.Bug 2:显示连接错误. 前言本文旨在记录使用Flask框架过程中与前端Vue对接过程中,存在WebSocket总是连接失败导致前端取不到数据的问题.以及在使用WebSocket相关功能
SpringBoot2.0集成WebSocket实现后台向前端推送信息

什么是WebSocket? WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信--允许服务器主动发送信息给客户端. 为什么需要 WebSocket? 初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处? 答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起,HTTP 协议做不到服务器主动向客户端推送信息. 举例来说,我们想要查询当前的排队情况,只能是
基于spring实现websocket实时推送实例

基于spring框架来写的,websocket实时推送例子,具体内容如下第一步:自己搭建一个springmvc项目,很简单,网上百度都有:pom文件添加以下:  <dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>4.2.4.RELE
SpringBoot集成WebSocket实现后台向前端推送信息的示例

前言在一次项目开发中,使用到了Netty网络应用框架,以及MQTT进行消息数据的收发,这其中需要后台来将获取到的消息主动推送给前端,于是就使用到了MQTT,特此记录一下. 一.什么是websocket? WebSocket协议是基于TCP的一种新的网络协议.它实现了客户端与服务器全双工通信,学过计算机网络都知道,既然是全双工,就说明了服务器可以主动发送信息给客户端.这与我们的推送技术或者是多人在线聊天的功能不谋而合. 为什么不使用HTTP 协议呢?这是因为HTTP是单工通信,通信只能由客户端发
利用spring boot+WebSocket实现后台主动消息推送功能

目录前言: 有个需求: WebSocket 主要能实现的场景: 总结前言: 使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!使用此webscoket务必确保生产环境能兼容/支持!主要是tomcat的兼容与支持. 有个需求: APP用户产生某个操作,需要让后台管理系统部分人员感知(表现为一个页面消息). 最早版本是后台管理系统轮训,每隔一段时间轮训一次,由于消息重要,每隔几秒就查一次.这样做明显很不雅!会消耗大量资源,并且大部分请求是
spring中websocket定时任务实现实时推送

有时候业务要求websocket连接后,服务端实时每隔一段时间就将数据推送给客户端进行响应,这时就需要websocket+定时任务一起来实现实时推送数据给客户端了.使用的定时任务方式为spring的TaskScheduler对象实现任务调度. TaskScheduler定时任务实现 TaskScheduler接口提供了多种调度方法来实现运行任务的执行. public interface TaskScheduler { //通过触发器来决定task是否执行 ScheduledFuture sche
Spring和Websocket相结合实现消息的推送

本文主要有三个步骤 1.用户登录后建立websocket连接,默认选择websocket连接,如果浏览器不支持,则使用sockjs进行模拟连接 2.建立连接后,服务端返回该用户的未读消息 3.服务端进行相关操作后,推送给某一个用户或者所有用户新消息相关环境 Spring4.0.6(要选择4.0+),tomcat7.0.55 Websocet服务端实现 WebSocketConfig.java @Configuration @EnableWebMvc @EnableWebSocket publi
SpringBoot集成WebSocket【基于纯H5】进行点对点[一对一]和广播[一对多]实时推送

之前实现WebSocket基于STOMP的,觉得SpringBoot封装的太高,不怎么灵活,现在实现一个纯H5的,也大概了解webSocket在内部是怎么传输的. 1.环境搭建因为在上一篇基于STOMP协议实现的WebSocket里已经有大概介绍过Web的基本情况了,所以在这篇就不多说了,我们直接进入正题吧,在SpringBoot中,我们还是需要导入WebSocket的包. 在pox.xml加上对springBoot对WebSocket的支持:  <
基于Tomcat7、Java、WebSocket的服务器推送聊天室实例

前言 HTML5 WebSocket实现了服务器与浏览器的双向通讯,双向通讯使服务器消息推送开发更加简单,最常见的就是即时通讯和对信息实时性要求比较高的应用.以前的服务器消息推送大部分采用的都是"轮询"和"长连接"技术,这两中技术都会对服务器产生相当大的开销,而且实时性不是特别高.WebSocket技术对只会产生很小的开销,并且实时性特别高.下面就开始讲解如何利用WebSocket技术开发聊天室.在这个实例中,采用的是Tomcat7服务器,每个服务器对于WebSoc
php实现websocket实时消息推送

php实现websocket实时消息推送,供大家参考,具体内容如下 SocketService.php <?php /** * Created by xwx * Date: 2017/10/18 * Time: 14:33 */ class SocketService { private $address = '0.0.0.0'; private $port = 8083; private $_sockets; public function __construct($address = '',