优化保存聊天信息
使用字典保存聊天信息，更方便后面的信息的整理和显示
def add_messages(username, message):
# 添加消息，保存在列表里面
now = datetime.now().strftime("%H:%M:%S") # 记录时间：格式：00:00:00
messages_dict = {"timestamp": now, "from": username, "message": message} # 之前是字符串，现在换成字典保存
messages.append(messages_dict)制作聊天信息展示页面
在template文件夹中chat.html文件，内容如下
<!DOCTYPE html>
<html lang="zh-CN">
<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>{{ username }}的聊天室</title>
</head>
<body>
<h1>欢迎, {{ username }}</h1>
{{ chat_messages }}
</body>
</html>这里{{ username }}和{{ chat_messages }}可以通过render_template函数传递参数，形式动态页面。
@app.route("/<username>")
def user(username):
"""Display chat messages"""
return render_template("chat.html", username=username,
chat_messages=messages)完整代码
from datetime import datetime
from flask import Flask, redirect, render_template, request, session
app = Flask(__name__)
app.secret_key = "randomstring12345" # 大家可以不一样的，用于生成随机ID的随机种子，类似random的seed
messages = []
def add_messages(username, message):
# 添加消息，保存在列表里面
now = datetime.now().strftime("%H:%M:%S") # 记录时间：格式：00:00:00
messages_dict = {"timestamp": now, "from": username, "message": message} # 之前是字符串，现在换成字典保存
messages.append(messages_dict)
def get_all_messages():
"""获取关于我的所有聊天信息`"""
return "<br>".join(messages)
@app.route("/", methods=["GET", "POST"]) # 允许的方法有POST和GET，其他不写methods默认就是GET
def index():
"""主页"""
if request.method == "POST":
# 如果是POST请求，进入这里，在请求中把username放到session里面
session["username"] = request.form["username"]
if "username" in session:
# 如果session中有username这个键值，就转跳到对应的用户页面
return redirect(session["username"])
# 如果没有，就展示首页网页。
return render_template("index2.html")
# @app.route("/tiger")
# def hu():
# return render_template("tiger.html")
@app.route("/<username>")
def user(username):
"""Display chat messages"""
return render_template("chat.html", username=username,
chat_messages=messages)
@app.route("/<username>/<message>")
def send_message(username, message):
"""
通过路由设置:/人名称/信息内容 来实现发送信息给某人
添加信息到列表里面，然后返回到用户页面
"""
add_messages(username, message)
return redirect("/" + username)
app.run(host="0.0.0.0") # 启动服务器优化信息显示
上面的聊天信息显示是直接把字典打印出来，如下
[{'timestamp': '23:48:35', 'from': '李娜', 'message': '大家好'}]可以说很丑，我们需要通过html优化。 当我们打开聊天页面，其他人再发新消息来的时候，我们的页面是没有马上更新内容的，需要手动刷新页面才能接受新的消息，因此我们也要增加一个自动刷新功能。 因此新的chat2.html改进如下：
<!DOCTYPE html>
<html lang="zh-CN">
<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>{{ username }}的聊天室</title>
</head>
<body>
<h1>欢迎, {{ username }}</h1>
{% for message in chat_messages %}
<p>({{ message.timestamp }}) {{ message.from }}: {{ message.message }}</p>
{% endfor %}
<script>
let timer=setTimeout(function() {
location.reload()
}, 5000)
</script>
</body>
</html>修改代码
把返回的文件改成新的chat2.html，然后查看效果。
@app.route("/<username>")
def user(username):
"""Display chat messages"""
return render_template("chat2.html", username=username,
chat_messages=messages)输入信息非常困难
我们需要优化信息输入，因此要做一个信息输入框，用于提交新的聊天内容。具体内容如chat3.html:
<!DOCTYPE html>
<html lang="zh-CN">
<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>{{ username }}的聊天室</title>
</head>
<body>
<h1>欢迎， {{ username }}</h1>
<form method = "POST">
<textarea cols="50" rows="4" name="message" id="message"></textarea>
<br>
<button>发送</button>
</form>
{% for message in chat_messages %}
<p>({{ message.timestamp }}) {{ message.from }}: {{ message.message }}</p>
{% endfor %}
<script>
let textbox = document.getElementById("message")
let timer = setTimeout(function() {
location.reload();
}, 5000)
textbox.onkeydown = function(e) {
clearTimeout(timer)
timer = setTimeout(function() {
location.reload();
}, 5000)
}
</script>
</body>
</html>然后对应的路由功能也要增加POST方法。
@app.route("/<username>", methods=["GET", "POST"])
def user(username):
"""Display chat messages"""
if request.method == "POST":
username = session["username"]
message = request.form["message"]
add_messages(username, message)
return redirect(session["username"])
return render_template("chat3.html", username=username,
chat_messages=messages)