教程 Redis+ flask+vue 線上聊天

pardon110發表於2019-06-29
RedisFlaskVue

知識點

  • 基於Server-Sent Event 工作方式，Web即時通訊
  • Redis 包 釋出訂閱功能的使用
  • flask快速入門，常用物件例項方法函式
  • Vuejs列表頁面自動渲染

效果圖

基於flask結合redis的簡單聊天室

程式碼段

  • app.py 主檔案
import datetime
from flask import Flask, session, redirect, Response, request, render_template, url_for, flash
from redis import StrictRedis

app = Flask(__name__)

# session cookie金鑰
app.secret_key = 'pardon110'

# 連線redis資料庫,預設是零號庫,可隨便更改
rds = StrictRedis(db=3)

# 訊息生成器
def event_stream():
    # 從資料庫連線上獲取釋出訂閱管理物件例項
    pub = rds.pubsub()
    # 在管理訂閱(建立通道)頻道
    pub.subscribe('chat')
    # 監聽頻道資訊
    for message in pub.listen():
        print(type(message['data']), type(message), message)
        # 只響應有訊息的（位元組），首次無訊息返回的為int狀態碼物件，直接忽略
        if isinstance(message['data'], bytes):
            # 轉為utf8字串，傳送 SSE（Server Send Event）協議格式的資料
            yield 'data: %s\n\n' % message['data'].decode()

# 首次訪問需要登入
@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form['user']
        # 重定向到home處理器
        flash('您已經成功登入！')
        return redirect(url_for('home'))
    return '<p><strong>登入</strong></p><form action="" method="post">使用者名稱: <input name="user">'

# 接收js傳送過來的訊息
@app.route('/post', methods=['POST'])
def post():
    # 獲取表單提交內容
    message = request.form['message']
    # 獲取當前請求物件的session例項
    user = session.get('username', 'anonymous')
    # 返回一個指定欄位的時間值
    now = datetime.datetime.now().replace(microsecond=0).time()
    # 透過頻道釋出訊息
    rds.publish('chat', u'[%s] %s: %s' % (now.isoformat(), user, message))
    # 響應物件
    return Response(status=204)

# 事件流介面
@app.route('/stream')
def stream():
    return Response(event_stream(), mimetype="text/event-stream")

@app.route('/')
@app.route('/<name>')
def home(name=None):
    # 透過路由引數或querystring動註冊為當前使用者
    if name or len(request.args) > 0:
        session['username'] = name if name else request.args.get(
            'user', '')
        # 訊息閃現（儲存在session內，模板頁用完即丟）
        flash(session['username']+'已經成功登入，加入聊天室！')
    # 否則強制使用者登入
    if 'username' not in session:
        return redirect('/login')

    # 模板渲染
    data = {
        "username": session['username'],
        "tip": "正在聊天中..."
    }
    # 關鍵字引數解包，返回元組（框架會自動解析為一個完整的response物件）
    return render_template('home.html', **data), 200

@app.route('/logout')
def logout():
    # 清空當前session資訊
    session.pop('username', None)
    return redirect(url_for('login'))

if __name__ == '__main__':
    # app.debug = True
    # falsk1.0.2預設多執行緒開啟，預設埠是5000
    app.run(host='0.0.0.0', debug=True)
  • sse.js 檔案
//  vue例項
var vm = new Vue({
    el: '#out',
    // 自定義定界符，避免vue定界符與jinja2衝突，改變vue起始定界
    delimiters: ['@{', '}}'],
    // 例項屬性
    data: {
        items: []
    },
    mounted() {
        // 監聽服務端訊息
        sse()
    }
})

// 透過EventSource物件與後端建立連線
function sse() {
    var source = new EventSource('/stream')
    // 監聽訊息事件（與nodejs用data事件sock流
    source.onmessage = function (e) {
        // XSS in chat is fun
        // 動態渲染頁面（代理vue例項資料操作）
        vm.$data.items.push(e.data)
    }
}

// ajax與後端互動，向服務端傳送訊息
$('#in').keyup(function (e) {
   // 回車keycode為13
    if (e.keyCode == 13) {
        $.post('/post', { 'message': $(this).val() })
        $(this).val('')
    }
})

// 自動消失閃現
$(document).ready(function () {
    setTimeout(() => {
        $(".flashes").fadeOut(3000);
    })
})
  • home.html 模板頁面
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基於redis簡單聊天室</title>
    <style>
        body {
            max-width: 500px;
            margin: auto;
            padding: 1em;
            background: black;
            color: #fff;
            font: 16px/1.6 menlo, monospace;
        }
    </style>
</head>
<body>
    <!-- jinja2模板渲染 -->
    <p><b>Hi! {{ username }} {{ tip }}</b></p>
    <hr>
     <!-- jinja2 渲染閃現訊息 -->
    {% with messages = get_flashed_messages() %}
        {% if messages %}
        <ul class=flashes>
            {% for message in messages %}
            <li>{{ message }}</li>
            {% endfor %}
        </ul>
        {% endif %}
    {% endwith %}

    <!-- 輸出聊天內容 -->
    <div id="out">
        <!-- vue元件渲染 -->
        <span v-for="(item,index) in items" :key="index">@{ item }}<br></span>
    </div>
    <!-- 輸入訊息框 -->
    <div>
        <p>Message: <input id="in" placeholder="回車傳送資訊" /></p>
    </div>

    <!-- cdn資源 -->
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

    <!-- vue及sse相關程式碼 -->
    <script src="/static/sse.js"></script>

</body>

</html>

前置條件

  1. 啟動redis資料庫服務 啟動flask 5000埠（需自行安裝redis客戶端）
  2. 選擇post登入，或路由或querystring方式自動註冊登入
  3. 在不同客戶端登入，比如多個不同瀏覽器進入聊天室
  4. 開始輸入訊息，回車傳送顯示開始聊天

小結

  • sse 協議格式，python生成器
  • vuejs 定界符變更，生命週期及vm例項屬性的使用
  • flask 基本入門，redis資料庫釋出訂閱應用
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章