python vuejs聊天室_教程 Redis+ flask+vue 在线聊天

知识点

基于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密钥

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 '

登录

用户名: '

# 接收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('/')

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 模板页面

基于redis简单聊天室

body {

max-width: 500px;

margin: auto;

padding: 1em;

background: black;

color: #fff;

font: 16px/1.6 menlo, monospace;

}

Hi! {{ username }} {{ tip }}

---

{% with messages = get_flashed_messages() %}

{% if messages %}

{% for message in messages %}

{{ message }}

{% endfor %}

{% endif %}

{% endwith %}

@{ item }}

Message:

前置条件

启动redis数据库服务 启动flask 5000端口(需自行安装redis客户端)

选择post登录，或路由或querystring方式自动注册登录

在不同客户端登录，比如多个不同浏览器进入聊天室

开始输入消息，回车发送显示开始聊天

小结

sse 协议格式，python生成器

vuejs 定界符变更，生命周期及vm实例属性的使用

flask 基本入门，redis数据库发布订阅应用

本作品采用《CC 协议》，转载必须注明作者和本文链接