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

下面是使用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

Send
```

在该页面的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，即可在页面实时展示三个股票的价格变化。