flask-socketio实现前后端实时通信的功能的示例

yizhihongxing

下面是使用flask-socketio实现前后端实时通信的完整攻略,包含两个示例说明:

环境安装

  1. 安装Python和pip
  2. 使用pip安装Flask和Flask-SocketIO,命令为:

pip install flask flask-socketio

  1. 安装前端JavaScript库socket.io,可以通过以下命令,在项目根目录下建立一个新的static/js目录,然后下载socket.io.js文件到该目录下:

mkdir -p static/js && cd $_
curl -O https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.1.3/socket.io.js

示例1:简单的聊天室

  1. 在Flask应用程序的入口文件中,导入Flask和Flask-SocketIO,然后实例化Flask应用程序和SocketIO:

```python
from flask import Flask, render_template
from flask_socketio import SocketIO

app = Flask(name)
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
```

  1. 编写一个路由函数来渲染聊天室页面,并用@socketio.on()装饰器注册socket事件处理程序函数:

```python
@app.route('/')
def index():
return render_template('chat.html')

@socketio.on('message')
def handle_message(message):
print('received message: ' + message)
socketio.emit('message', message)
```

注意这里的handle_message()函数将接收到的消息广播到所有客户端,因为使用了socketio.emit()方法。

  1. 在聊天室页面chat.html中,引入socket.io.js文件,并编写JavaScript代码来处理socket事件:

```html



    ```

    在该页面的JavaScript代码中,当socketio.on()函数接收到广播的消息时,通过getElementById()将接收到的消息显示在聊天室页面上,同时发送端可以通过socket.emit()方法将消息发送给其他客户端。

    1. 运行Flask应用程序,并使用浏览器访问http://localhost:5000,即可在聊天室页面实现实时通信。

    示例2:实时更新股票价格

    1. 在Flask应用程序的入口文件中,除了导入Flask和Flask-SocketIO,另外还需要导入事件驱动库eventlet:

    ```python
    from flask import Flask, render_template
    from flask_socketio import SocketIO
    import eventlet

    app = Flask(name)
    app.config['SECRET_KEY'] = 'secret!'
    socketio = SocketIO(app, async_mode='eventlet')
    ```

    注意需要指定使用的异步库为eventlet。

    1. 编写一个类来模拟股票价格变化的情况,并通过时间循环更新股票价格:

    ```python
    from threading import Thread
    import time
    import random

    class StockPriceGenerator:
    def init(self):
    self._prices = {'AAPL': 138.97, 'GOOG': 2,483.87, 'FB': 267.25}
    Thread(target=self._price_updater).start()

       def get_price(self, symbol):
           return self._prices[symbol]
    
       def _price_updater(self):
           while True:
               time.sleep(3)
               symbol = random.choice(['AAPL', 'GOOG', 'FB'])
               new_price = round(random.uniform(0.95, 1.05) * self._prices[symbol], 2)
               self._prices[symbol] = new_price
               socketio.emit('stock_price', {'symbol': symbol, 'price': new_price})
    

    ```

    在该类中,_prices字典表示三个股票的当前价格,_price_updater()方法是在一个死循环中每3秒随机选择一个股票,改变其价格并发送stock_price事件到所有客户端。由于_socketio.emit()方法是异步调用的,所以使用Thread来执行该方法。

    1. 在Flask应用程序的index视图函数中,使用模板引擎渲染页面,并使用socketio.on()函数注册stock_price事件处理程序:

    ```python
    @app.route('/')
    def index():
    return render_template('stocks.html')

    @socketio.on('connect')
    def handle_connect():
    print('a client connected')
    generator = StockPriceGenerator()

    @socketio.on('disconnect')
    def handle_disconnect():
    print('a client disconnected')

    @socketio.on('connect')
    def handle_connect():
    print('a client connected')
    generator = StockPriceGenerator()

    @socketio.on('disconnect')
    def handle_disconnect():
    print('a client disconnected')

    @socketio.on('stock_price')
    def handle_stock_price(data):
    print(f"Received stock price update: {data['symbol']} = ${data['price']}")
    ```

    1. 在stocks.html页面中,使用JavaScript代码订阅stock_price事件,并将股票价格显示在页面上:

    ```html

      ```

      注意该代码中每收到一个stock_price事件,就会检查是否有已经存在的股票价格该变化,如果有,则更新其余和价格;否则,插入新的股票价格并在页面上显示。

      1. 运行Flask应用程序,并使用浏览器访问http://localhost:5000,即可在页面实时展示三个股票的价格变化。

      本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:flask-socketio实现前后端实时通信的功能的示例 - Python技术站

      (0)
      上一篇 2023年5月16日
      下一篇 2023年5月16日

      相关文章

      • pyecharts结合flask框架的使用

        Pyecharts是一款基于Echarts的Python可视化库,可以快速地生成丰富、交互性强的数据可视化图表。Flask是一款使用Python编写的轻量级Web框架,可实现快速构建Web应用程序。结合Pyecharts和Flask,可以非常方便地搭建可视化Web应用程序,使得数据可视化和Web开发更加紧密地结合在一起。 下面介绍一下如何使用Pyechart…

        Flask 2023年5月15日
        00
      • Flask实现跨域请求的处理方法

        Flask实现跨域请求的处理方法可以通过设置HTTP响应头的方式来实现。以下是完整攻略: 1. 前置知识 了解跨域请求的概念和原理;掌握HTTP响应头的相关知识;掌握python Flask框架的基础知识。 2. 方法一:使用flask-cors扩展 首先需要安装flask-cors扩展,flask-cors是Flask中解决跨域访问问题的扩展库。使用以下命…

        Flask 2023年5月15日
        00
      • pycharm解决关闭flask后依旧可以访问服务的问题

        在默认的情况下,当我们启动flask应用后,如果在终端使用ctrl+c关闭了flask应用,则浏览器中再次访问会出现获取不到数据的情况,甚至报错。本文将介绍如何使用PyCharm解决这个问题。 PyCharm优雅地关闭Flask应用 作为广大Python开发者熟知并使用的IDE,PyCharm提供了非常方便的解决方案。 在PyCharm中打开Flask项目并…

        Flask 2023年5月15日
        00
      • Flask中特殊装饰器的使用

        下面我将给出一个完整的Flask中特殊装饰器的使用攻略。 一、介绍 在 Flask 中,我们可以使用特殊装饰器来扩展 Flask 的功能。Flask 提供了很多特殊装饰器,比如 @app.route、@app.before_request、@app.after_request 等等,这些装饰器可以把一些特定的函数绑定到 Flask 的请求处理过程中,实现对请…

        Flask 2023年5月16日
        00
      • 在Python的Flask框架下使用sqlalchemy库的简单教程

        如果你准备使用Python Flask框架来开发web应用程序,那么SQLAlchemy库可以帮助你轻松与数据库进行交互。下面是一个基于Python Flask框架和SQLAlchemy库的简单教程: 安装依赖 在开始之前,请确保已经安装了Python和pip工具。然后,你需要使用pip安装Flask和SQLAlchemy库,你可以在命令行中输入以下命令: …

        Flask 2023年5月15日
        00
      • 基于Python轻松制作一个股票K线图网站

        下面我将详细讲解“基于Python轻松制作一个股票K线图网站”的完整攻略,过程中包含两条示例说明。 背景 随着人们对股票市场的日益关注,股票K线图作为一种展示股票价格波动的常见方式,被广泛地应用于各种股票网站和APP中。本攻略旨在帮助Python爱好者基于Python技术,尤其是使用Matplotlib、Pandas等库,轻松快速地制作一个股票K线图网站。 …

        Flask 2023年5月16日
        00
      • 详解python开发环境搭建

        详解Python开发环境搭建 在开始Python开发之前,需要先搭建好Python的开发环境。本文将详细讲解Python开发环境的搭建过程。 安装Python 首先,需要安装Python。可以去Python官网下载安装包,选择对应的版本(Python2或Python3),然后按照安装向导完成安装。 安装代码编辑器 安装完Python之后,需要安装一个代码编辑…

        Flask 2023年5月16日
        00
      • python miniWeb框架搭建过程详解

        当我们要搭建自己的网站,动态web框架是不可或缺的。Python是一种非常流行的编程语言,它拥有丰富的web框架,比如Flask、Django等。而如果我们想要更深入了解web框架的原理,也可以尝试手动搭建一个miniWeb框架。下面,我们将分为以下几个步骤,详细讲解Python miniWeb框架的搭建过程: 搭建服务器 首先,我们需要一个能够运行Pyth…

        Flask 2023年5月16日
        00
      合作推广
      合作推广
      分享本页
      返回顶部