欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flask使用SocketIO實(shí)現(xiàn)WebSocket與Vue進(jìn)行實(shí)時(shí)推送

 更新時(shí)間：2022年06月08日 10:11:58   作者：洲的學(xué)習(xí)筆記  
本文主要介紹了Flask使用SocketIO實(shí)現(xiàn)WebSocket與Vue進(jìn)行實(shí)時(shí)推送，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

本文旨在記錄使用Flask框架過程中與前端Vue對接過程中，存在WebSocket總是連接失敗導(dǎo)致前端取不到數(shù)據(jù)的問題。以及在使用WebSocket相關(guān)功能的庫包gevent-websocket之后，導(dǎo)致運(yùn)行Flask項(xiàng)目之后，控制臺(tái)沒有顯示running on 127.0.0.1:5000 問題、以及沒有輸出log日志記錄的問題、以及總是報(bào)錯(cuò)Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’failed：Error during Websocket handshake：Unexpected response code：400’的問題！

如下圖所示：只有三行控制臺(tái)輸出的記錄、總是報(bào)錯(cuò)（該錯(cuò)在網(wǎng)上沒有解決方法）等。

技術(shù)選型：前端Vue、后端Flask。

核心問題

需要著重注意的是，F(xiàn)lask框架中有原生的Websocket寫法，也有對Websocket封裝之后的依賴包SocketIO寫法，所以在進(jìn)行與前端對接的過程中，需要與前端對接好接口標(biāo)準(zhǔn)。在本次項(xiàng)目中，后端最開始用的是封裝好WebSocket后的socketio進(jìn)行編寫，而前端使用了原生的websocket-vue寫法，導(dǎo)致一直對接不上，獲取不到數(shù)據(jù)。以及所有的報(bào)錯(cuò)或者各種bug問題，筆者都推測是跟gevent-websocket這個(gè)包有關(guān)。

在前端更改為vue-socketio之后，成功解決對接失敗問題。（也可以后端改用原生寫法，總之兩邊需要同時(shí)使用一個(gè)標(biāo)準(zhǔn)。）前端Vue可以參考Vue的文檔去看使用哪種寫法即可。

Flask的原生WebSocket（flask-sockets）與封裝SocketIO

Flask-Sockets和Flask-SocketIO之間的主要區(qū)別在于前者僅僅將WebSocket協(xié)議（通過使用gevent-websocket項(xiàng)目）進(jìn)行包裝，因此它只適用于原生支持WebSocket協(xié)議的瀏覽器，對于那些不支持WebSocket協(xié)議的較老的瀏覽器，就無法使用它了。

Flask-SocketIO則不同，它不僅實(shí)現(xiàn)了WebSocket協(xié)議，并且對于那些不支持WebSocket協(xié)議的舊版瀏覽器，使用它也能夠?qū)崿F(xiàn)相同的效果。新版舊版的瀏覽器都能使用他?？梢赃@么理解，flask把websocket功能封裝在了socketio這個(gè)新的包里面。

另一個(gè)區(qū)別是Flask-SocketIO實(shí)現(xiàn)了SocketIO Javascript庫公開的消息傳遞協(xié)議。
而Flask-Sockets只是實(shí)現(xiàn)通信通道，發(fā)送的是完全取決于應(yīng)用程序。

1、Flask-SocketIO（封裝寫法）

使用SocketIO之前需要導(dǎo)入該包，即pip install flask-socketio。也可以直接在代碼中import該包中的兩個(gè)功能。
即：from flask_socketio import SocketIO, emit。

下面是服務(wù)端代碼：（關(guān)于如何在實(shí)戰(zhàn)中應(yīng)用，可以看筆者上一篇關(guān)于flask博客中的代碼實(shí)現(xiàn)，大致思路是使用線程）

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的標(biāo)準(zhǔn)）

$(document).ready(function(){
    var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
    //注意如果使用var socket = io.connect(location.protocol + ‘//' + document.domain.....的寫法，這里的protocol是http協(xié)議，而不是走的是ws，筆者推測是對ws進(jìn)行了封裝，導(dǎo)致最終走的是http協(xié)議。
    //上面代碼中的/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寫法）

服務(wù)端：

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)  #發(fā)送數(shù)據(jù)
        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); # 接收數(shù)據(jù)
                $("#time").html(content);

            };

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

3、Bug 1：控制臺(tái)輸出沒有Running on 127.0.0.1以及沒有輸出日志

在安裝了gevent-websocket的這個(gè)包之后，會(huì)順帶安裝gevent這個(gè)包，需要注意的是，gevent這個(gè)包會(huì)導(dǎo)致項(xiàng)目運(yùn)行之后，控制臺(tái)不會(huì)輸出running on這個(gè)bug和 沒有Log輸出日志的bug。

經(jīng)過筆者查證之后，發(fā)現(xiàn)是gevent-websocket這個(gè)包太老了，2017年的就已經(jīng)停止更新了。所以這個(gè)包如果使用的話，會(huì)順帶導(dǎo)致一些對于新版本的Flask兼容性問題，所以導(dǎo)致了控制臺(tái)的上述兩個(gè)Bug存在。

解決方案：刪掉gevent、gevent-websocket這兩個(gè)包，可以下載 simple-websocket這個(gè)包來替代這兩個(gè)包完成功能開發(fā)。

解決之后，控制臺(tái)可以正常顯示了。

4、Bug 2：顯示連接錯(cuò)誤。

在連接錯(cuò)誤之后，推測這種報(bào)4的錯(cuò)誤（網(wǎng)上全是3的錯(cuò)誤），應(yīng)該是沒有安裝gevent-websocket這個(gè)包，但是安裝了之后又會(huì)造成第一類bug，所以可以直接安裝simple-websocket這個(gè)依賴包。

參考文章：http://www.dbjr.com.cn/article/250776.htm

到此這篇關(guān)于Flask使用SocketIO實(shí)現(xiàn)WebSocket與Vue進(jìn)行實(shí)時(shí)推送的文章就介紹到這了,更多相關(guān)Flask Vue 實(shí)時(shí)推送內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 詳解Python實(shí)現(xiàn)圖像分割增強(qiáng)的兩種方法

    詳解Python實(shí)現(xiàn)圖像分割增強(qiáng)的兩種方法

    圖像分割就是把圖像分成若干個(gè)特定的、具有獨(dú)特性質(zhì)的區(qū)域并提出感興趣目標(biāo)的技術(shù)和過程。本文將為大家分享兩個(gè)用Python實(shí)現(xiàn)像分割增強(qiáng)的方法，需要的可以參考一下
    2022-03-03
  • python中os和sys模塊的區(qū)別與常用方法總結(jié)

    python中os和sys模塊的區(qū)別與常用方法總結(jié)

    這篇文章主要給大家介紹了關(guān)于python中os和sys模塊的區(qū)別與常用方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • Flask接口簽名sign原理與實(shí)例代碼淺析

    Flask接口簽名sign原理與實(shí)例代碼淺析

    這篇文章主要介紹了Flask接口簽名sign原理與實(shí)例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-02-02
  • 深入理解Python中命名空間的查找規(guī)則LEGB

    深入理解Python中命名空間的查找規(guī)則LEGB

    這篇文章主要介紹了深入理解Python中命名空間的查找規(guī)則LEGB,作者根據(jù)Python3.x版本進(jìn)行講解,需要的朋友可以參考下
    2015-08-08
  • 如何用Python獲取計(jì)算機(jī)名,ip地址,mac地址

    如何用Python獲取計(jì)算機(jī)名,ip地址,mac地址

    這篇文章主要介紹了如何用Python獲取計(jì)算機(jī)名,ip地址,mac地址，幫助大家更好的理解和學(xué)習(xí)使用python，感興趣的朋友可以了解下
    2021-03-03

    • 最新評論