本文介绍如何在Flask应用中使用flask-socketio实现站内消息广播，通过WebSocket实时更新页面内容。演示了服务端和客户端的代码实现，并解释了WebSocket与HTTP连接的区别。
目的
在flask应用内，通过引入flask-socketio实现站内WebSocket消息广播。各网页接收广播消息并动态刷新页面。
为便于观察，我们通过向服务端发送"/push" http 请求，触发站内广播；并通过Flask-SocketIO的广播模式，将广播信息通过WebSocket接口发送到客户端浏览器打开的网页。网页根据接收到的信息动态展示内容。
实现
服务端搭建Flask应用
首先在服务端搭建Flask应用并引入flask-socketio，然后编写服务端代码：
# _*_ coding:utf-8 _*_
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
app = Flask(__name__)
app.config['SECRET_KEY'] = 'D20fndvfMK27^313787-AQl131'
socketio = SocketIO()
socketio.init_app(app)
name_space = '/abcd'
@app.route('/abc')
def get_abc():
"""demo page"""
return render_template('abc.html')
@app.route('/push')
def push_once():
"""broadcast event generator"""
event_name = 'abcde'
broadcasted_data = {'data': "pushed once!"}
socketio.emit(event_name, broadcasted_data, broadcast=True, namespace=name_space)
return 'done!'
@socketio.on('connect', namespace=name_space)
def connected_msg():
"""socket client event - connected"""
print('client connected!')
@socketio.on('disconnect', namespace=name_space)
def disconnect_msg():
"""socket client event - disconnected"""
print('client disconnected!')
if __name__ == '__main__':
socketio.run(app)
编写html网页SocketIO客户端代码
abc.html是我们的演示界面，包含了采用socket.io.js的WebSocket客户端代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Socket Demo</title>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script>
</head>
<body>
<h2>Demo of Socket BroadCast</h2>
<div id="t"></div>
<script>
$(document).ready(function () {
namespace = '/abcd';
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace);
socket.on('abcde', function (res) {
var t = res.data;
if (t) {
$("#t").append(t).append('<br/>');
}
});
});
</script>
</body>
</html>
演示push请求及各客户端的动态响应
当在浏览器端请求/push时，左侧两个打开的“/abc"网页会动态打印新的"pushed once!"行。
延伸阅读
关于 WebSocket
WebSocket是HTML5引入的新的通信协议，主要由Web客户端和服务端组成。与HTTP连接不同，WebSocket连接是客户端和服务器之间永久的双向通信通道，其中任何一个都可以启动交换。 一旦建立，连接一直有效，直到其中一方断开连接。
关于 Flask-SocketIO
flask框架提供了网页和网站的快速开发能力，一个重要的原因，就是flask相关扩展包非常丰富。而在WebSocket通信方面，flask-socketio扩展包，实现了flask应用内的socket通信能力。具体可参考Flask-SocketIO官方文档。
扫一扫
7608
到【灌水乐园】发言
