wechat-admin：SSE

在上一篇项目设计中，我说到了SSE（Server-Sent Events）是为了实现单方向的消息推送，今天介绍下实际的使用。

我直接用了现成的Flask-SSE，其实SSE实现的原理比较简单：

1. 借用Redis的发布/订阅模式创建一个方法，方法内会调用pubsub.listen监听新的发布数据。

2. 使用Flask提供的stream_with_context，不断的从上面的方法中获取数据。

使用起来分2部分

前端

在前端页面添加一个函数：

function eventSourceListener() {
    let source = new EventSource(`${API_URL}/stream`);
    let self = this;
    source.addEventListener('login', function(event) {
        let data = JSON.parse(event.data);
        if (data.type == 'scan_qr_code') {
            self.uuid = data.uuid;
            self.qrCode = `data:image/png;base64,${data.extra}`;
        } else if (data.type == 'confirm_login') {
            self.sub_title = 'Scan successful';
            self.sub_desc = 'Confirm login on mobile WeChat';
            self.qrCode = data.extra;
        } else if (data.type == 'logged_in') {
            sessionStorage




    
.setItem('user', JSON.stringify(data.user));
            self.$router.push({ path: '/main' });
        } else if (data.type == 'logged_out') {
            sessionStorage.removeItem('user');
            self.$router.push('/login');
        }
    }, false);
    source.addEventListener('notification', function(event) {
        let data = JSON.parse(event.data);
        self.notificationCount = data.count;
    }, false);
    source.addEventListener('error', function(event) {
        console.log("Failed to connect to event stream");