使用flask-socketio实现WebSocket消息广播

最新推荐文章于 2024-08-06 21:46:18 发布

Pierre_

最新推荐文章于 2024-08-06 21:46:18 发布

阅读量3.8k

点赞数 2

分类专栏： Python # Flask app 文章标签： flask Flask-SocketIO WebSocket

本文链接：https://blog.csdn.net/pierre_/article/details/85264266

版权

Python 同时被 3 个专栏收录

20 篇文章 0 订阅

订阅专栏

Flask

4 篇文章 0 订阅

订阅专栏

app

4 篇文章 0 订阅

订阅专栏

目的

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