教程 Redis+ flask+vue 線上聊天
阿新 • • 發佈：2020-06-24
知識點
- 基於 Server-Sent Event 工作方式，Web 即時通訊
- Redis 包 釋出訂閱功能的使用
- flask 快速入門，常用物件例項方法函式
- Vuejs 列表頁面自動渲染
效果圖
程式碼段
-
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金鑰 -
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/[email protected]/dist/vue.js"></script>
<!-- vue及sse相關程式碼 -->
<script src="/static/sse.js"></script>
</body>
</html>複製程式碼前置條件
- 啟動 redis 資料庫服務 啟動 flask 5000 埠（需自行安裝 redis 客戶端）
- 選擇 post 登入，或路由或 querystring 方式自動註冊登入
- 在不同客戶端登入，比如多個不同瀏覽器進入聊天室
- 開始輸入訊息，回車傳送顯示開始聊天
小結
- sse 協議格式，python 生成器
- vuejs 定界符變更，生命週期及 vm 例項屬性的使用
- flask 基本入門，redis 資料庫釋出訂閱應用
- 學習交流群887934385
- 免費領取flask及python資料
