flask上使用websocket的方法示例

目录
  • Flask-SocketIO服务器端程序
  • SocketIO客户端程序
  • 使用Flask-Sockets

Flask-Sockets和Flask-SocketIO之间的主要区别在于前者仅仅将WebSocket协议(通过使用gevent-websocket项目)进行包装,因此它只适用于原生支持WebSocket协议的浏览器,对于那些不支持WebSocket协议的较老的浏览器,就无法使用它了。 Flask-SocketIO则不同,通过前面的介绍,读者应该已经知道了它不仅实现了WebSocket协议,并且对于那些不支持WebSocket协议的旧版浏览器,使用它也能够实现相同的效果。新版旧版的浏览器都能使用他

另一个区别是Flask-SocketIO实现了SocketIO Javascript库公开的消息传递协议。 Flask-Sockets只是实现通信通道,发送的是完全取决于应用程序。 
Flask-SocketIO还为事件处理程序创建了一个类似flask的常规视图函数的环境,包括创建应用程序和请求上下文。 然而,在文档中会介绍一些重要的例外情形。

Flask-SocketIO服务器端程序

如下是一个使用了Flask-SocketIO的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)

SocketIO客户端程序

$(document).ready(function(){
    var socket = io.connect('http://' + document.domain + ':' + location.port + '/test');
    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;
    });
});

使用Flask-Sockets

sever端:

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()

client端:

<!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

            ws.onmessage = function (event) {
                content = document.createTextNode(event.data); # 接收数据
                $("#time").html(content);

            };

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

到此这篇关于flask上使用websocket的方法示例的文章就介绍到这了,更多相关flask使用websocket内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • flask-socketio实现WebSocket的方法

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

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

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

  • 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相关功能

  • flask上使用websocket的方法示例

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

  • SpringBoot如何添加WebSocket的方法示例

    一.WebSocket介绍 网站上的即时通讯是很常见的,比如网页的QQ,聊天系统等.按照以往的技术能力通常是采用轮询.Comet技术解决. HTTP协议是非持久化的,单向的网络协议,在建立连接后只允许浏览器向服务器发出请求后,服务器才能返回相应的数据.当需要即时通讯时,通过轮询在特定的时间间隔(如1秒),由浏览器向服务器发送Request请求,然后将最新的数据返回给浏览器.这样的方法最明显的缺点就是需要不断的发送请求,而且通常HTTP request的Header是非常长的,为了传输一个很小的数

  • 从零开始学习Node.js系列教程三:图片上传和显示方法示例

    本文实例讲述了Node.js图片上传和显示方法.分享给大家供大家参考,具体如下: index.js var server = require("./server"); var router = require("./router"); var requestHandlers = require("./requestHandlers"); var handle = {} handle["/"] = requestHandlers

  • Laravel框架文件上传功能实现方法示例

    本文实例讲述了Laravel框架文件上传功能实现方法.分享给大家供大家参考,具体如下: 以Laravel 5.2.45 框架为主,进行文件上传功能的实现如下: 实现步骤: (1). 配置文件修改 打开 config/filesystems.php 文件 在 'disks' 数组中添加如下代码 //自定义 'uploads' => [ 'driver' => 'local', //'root' => storage_path('app/uploads'), 'root' => pub

  • Go 实现百万WebSocket连接的方法示例

    大家好!我是 Sergey Kamardin,是 Mail.Ru 的一名工程师. 本文主要介绍如何使用 Go 开发高负载的 WebSocket 服务. 如果你熟悉 WebSockets,但对 Go 了解不多,仍希望你对这篇文章的想法和性能优化方面感兴趣. 1. 简介 为了定义本文的讨论范围,有必要说明我们为什么需要这个服务. Mail.Ru 有很多有状态系统.用户的电子邮件存储就是其中之一.我们有几种方法可以跟踪该系统的状态变化以及系统事件,主要是通过定期系统轮询或者状态变化时的系统通知来实现.

  • 在koa中简单使用Websocket连接的方法示例

    目录 前言 ws模块安装 websocket初始化 websocket下发数据 总结 前言 在一次项目需求会上,有个新需求是要让用户从管理后台主动下发数据到app前端,从而让前端那边对这主动下发的数据做一些用户交互.实现思路很清晰,用Websocket的方式.Websocket 是一种自然的全双工.双向.单套接字连接,是建立在 TCP 协议上的. 相比于 HTTP 协议,Websocket 链接一旦建立,即可进行双向的实时通信: ws模块安装 由于后台是基于node+koa2+mongo进行开发

  • Python Flask实现图片上传与下载的示例详解

    目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html 介绍 5.1 upload Jinja 模板介绍 5.2 upload css 介绍(虚线框) 5.3 upload js 介绍(拖拽) 1.效果预览 我们基于 Flask 官方指导工程,增加一个图片拖拽上传功能,效果如下: 2.新增逻辑概览 我们在官方指导工程上进行增加代码,改动如下: 由于 fl

  • springboot整合阿里云oss上传的方法示例

    OSS申请和配置 1. 注册登录 输入网址:https://www.aliyun.com/product/oss 如果没有账号点击免费注册,然后登录. 2.开通以及配置 点击立即开通 进入管理控制台 第一次使用会出现引导,按引导点击"我知道了",然后点击创建Bucket. 如果没有存储包或流量包点击购买. 点击确定,返回主页面,出现该页面,点击我知道了 将EndPoint记录下来,方便后期添加到我们项目的配置文件中 创建 AccessKeyID 和 AccessKeySecret 点击

  • 如何将pytorch模型部署到安卓上的方法示例

    目录 模型转化 安卓部署 新建项目 导入包 页面文件 模型推理 这篇文章演示如何将训练好的pytorch模型部署到安卓设备上.我也是刚开始学安卓,代码写的简单. 环境: pytorch版本:1.10.0 模型转化 pytorch_android支持的模型是.pt模型,我们训练出来的模型是.pth.所以需要转化才可以用.先看官网上给的转化方式: import torch import torchvision from torch.utils.mobile_optimizer import opti

  • Python Flask 上传文件测试示例

    目录 Flask file upload代码 上传测试 上传临时文件 使用 tempfile 使用 StringIO 其他 Flask file upload代码 import os from flask import Flask, request, redirect, url_for, send_from_directory from werkzeug.utils import secure_filename UPLOAD_FOLDER = '/tmp/flask-upload-test/'

随机推荐