# 从零搭建一个在线聊天室
### 整体技术栈
1. flask 框架
2. flask_login 的使用
3. WebSocket 简单应用
4. Redis 应用
5. flask_socketio 的使用
### 搭建权限框架
还是使用 Flask 来搭建后台应用，使用 flask-login 扩展来处理用户登陆鉴权逻辑。 首先定义登陆表单
```
class LoginForm(FlaskForm):
username = StringField('Username', validators=[DataRequired(), ])
password = PasswordField('Password', validators=[DataRequired()])
remember_me = BooleanField('Keep me logged in')
submit = SubmitField('Log in')
```
接下来定义数据库结构
```
class User(UserMixin, db.Model):
__tablename__ = 'users'
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(64), unique=True, index=True)
password = db.Column(db.String(64))
```
> 当前，我们只需要一个 user 用户表，只包含三个字段的简单表。用户密码也只是简单的保存了明文，后面再处理用户密码的 hash 问题。
下面就可以定义用户登陆表单
```
from flask_login import LoginManager
login_manager = LoginManager()
login_manager.session_protection = 'strong'
login_manager.login_view = 'login'
app = Flask(__name__)
login_manager.init_app(app)
app.config['SECRET_KEY'] = 'hardtohard'
@login_manager.user_loader
def load_user(user_id):
return User.query.get(int(user_id))
@app.route('/login', methods=['GET', 'POST'])
def login():
form = LoginForm()
if form.validate_on_submit():
user = User.query.filter_by(username=form.username.data).first()
if user:
login_user(user)
return redirect(url_for('chat'))
return render_template('login.html', form=form)
```
> 这里定义了，只检查用户名是否存在，如果存在，就执行 login_user() 函数，登陆。用户密码的使用，也留到后面再做处理。
其中 load_user，是回调函数，将获取到的 user 对象存储到浏览器的 session 中，然后在调用 login_user 函数时，就会调用 load_user 来把真正需要登陆的用户设置到 session 中。当登陆成功后，就会跳转到 chat 函数所对应的页面。
chat 函数比较简单，只是展示一个网页
```
@app.route('/chat', methods=['GET', 'POST'])
@login_required
def chat():
return render_template('chat.html')
```
> 使用 login_required 装饰器，保证该函数只允许登陆的用户访问。
增加些初始化函数
```
@app.route('/adddb', methods=['GET', 'POST'])
def addbd():
db.create_all()
return "OK"
@app.route('/deldb', methods=['GET', 'POST'])
def delbd():
db.drop_all()
return "OK"
@app.route('/adduser/<user>', methods=['GET', 'POST'])
def adduser(user):
user = User(username=user, password='admin')
db.session.add(user)
db.session.commit()
return "OK"
```
> 增加了初始化数据库和新增用户的函数。
### 构建前端页面
首先处理登陆页面，在 login.html 中添加
```
{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
{% if current_user.is_authenticated %}
<li><a href="{{ url_for('logout') }}">Logout</a></li>
{% else %}
<li><a href="{{ url_for('login') }}">Login</a></li>
{% endif %}
</ul>
</div>
</div>
</div> {% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, Welcome!</h1>
</div>
{{ wtf.quick_form(form) }}
</div>
{% endblock %}
```
> 使用扩展库 flask_bootstrap 来快速构建页面。
下面重点来看看 chat 页面。 首先来看看主体页面，在 chat.html 中填入代码
```
{% extends 'bootstrap/base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Kung Fu Realm{%endblock %}
{% block head %}
<head>
<meta charset="utf-8">
<title>Hi Hi 聊天室</title>
<link rel="shortcut icon" href="{{ url_for('static',filename='chat/images/hihi.jpg')}}">
<link rel="icon" href="{{ url_for('static',filename='chat/images/hihi.jpg')}}" type="image/x-icon">
<link type="text/css" rel="stylesheet" href="/static/chat/css/style.css">
<script type="text/javascript" src="{{ url_for('static', filename='chat/js/jquery.min.js') }}"></script>
</head>
{% endblock %}
{% block content %}
<body>
<div class="chatbox">
<div class="chat_top fn-clear">
<div class="uinfo fn-clear" style="float: left;"><div class="uface"><h1 style="color: #7777">ROOM: 聊天室123哈哈哈</h1></div></div>
<div class="uinfo fn-clear">
{% if current_user.is_authenticated %}
<div class="uface"><img src="{{ url_for('static', filename='chat/images/hi.jpg') }}" width="40" height="40" alt=""/></div>
{% else %}
<div class="uface"><img src="{{ url_for('static', filename='chat/images/hi.jpg')}}" width="40" height="40" alt=""/></div>
{% endif %}
<div class="uname">
小HI<i class="fontico down"></i>
<ul class="managerbox">
{% if current_user.is_authenticated %}
<li><a href="{{ url_for('login') }}"><i class="fontico lock"></i>退出登陆</a></li>
{% else %}
<li><a href="{{ url_for('logout') }}"><i class="fontico logout"></i>登录</a></li>
{% endif %}
</ul>
</div>
</div>
</div>
<div class="chat_message fn-clear">
<div class="chat_left">
<div class="message_box" id="message_box">
<div class="msg_item fn-clear">
<div class="uface"><img src="{{ url_for('static', filename='chat/images/duck.jpg')}}" width="40" height="40" alt=""/></div>
<div class="item_right">
<div class="msg own"><img src="{{ url_for('static', filename='chat/images/hihi.jpg')}}" width="400" height="400" alt=""/></div>
<div class="name_time">小黄鸭 </div>
</div>
</div>
{% if current_user.is_authenticated %}
<div class="msg_item fn-clear">
<div class="uface"><img src="{{ url_for('static', filename='chat/images/duck.jpg')}}" width="40" height="40" alt=""/></div>
<div class="item_right">
<div class="msg">Welcome to Hihi Chat Room. 欢迎来到 Hihi 聊天室。 </div>
<div class="name_time">小黄鸭 </div>
</div>
</div>
{% else %}
<div class="msg_item fn-clear">
<div class="uface"><img src="{{ url_for('static', filename='chat/images/duck.jpg')}}" width="40" height="40" alt=""/></div>
<div class="item_right">
<div class="msg">您还没有登陆，先和小黄鸭聊聊吧。 </div>
<div class="name_time">小黄鸭 </div>
</div>
</div>
{% endif %}
</div>
<div class="write_box">
{% if current_user.is_authenticated %}
<textarea id="message" name="message" class="write_area" placeholder="说点啥吧..."></textarea>
{% else %}
<textarea id="message_not" name="message" class="write_area" placeholder="说点啥吧..."></textarea>
{% endif %}
<input type="hidden" name="fromname" id="fromname" value="你" />
<input type="hidde
基于 Python + redis + flask 的在线聊天室.gz （54个子文件） 
onlinechatroom 
chat.sqlite3 36KB requertments 147B app __init__.py 1KB redis_conn.py 359B models.py 2KB templates 
privatechat.html 16KB edituser.html 217B adduser.html 209B login_old.html 199B listuser.html 354B roomuser_list.html 2KB login.html 3KB base.html 2KB addper.html 209B index.html 610B chat.html 18KB chatroomlist.html 1KB signup.html 2KB chatbot __init__.py 153B views.py 654B socket_conn.py 414B main __init__.py 155B views.py 11KB forms.py 2KB static js jquery.min.js 82KB chat font 
fontello.svg 2KB fontello.eot 5KB fontello.woff 3KB fontello.ttf 5KB js jquery.min.js 91KB css style.css 9KB style-contorl.css 8KB images 
53f44283a4347.jpg 16KB hi.jpg 13KB sucai1.jpeg 90KB hihi.jpg 49KB 53f442834079a.jpg 16KB duck.jpg 14KB auth js jquery-2.1.4.min.js 82KB css style.css 13KB font-awesome.min.css 34KB snow.css 2KB images 
3.png 3KB banner.jpg 484KB 1.png 956B 2.png 7KB fonts fontawesome-webfont.eot 75KB fontawesome-webfont.ttf 149KB tasks.py 1KB LICENSE 1KB manage.py 358B .gitignore 96B README.md 55KB config.py 684B资源评论
手把手教你学AI2023-05-04资源很受用，资源主总结的很全面，内容与描述一致，解决了我当下的问题。- m0_751014732024-05-17资源是宝藏资源，实用也是真的实用，感谢大佬分享~
计算机毕设论文
- 粉丝: 1w+
- 资源: 394
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减3.57元 开通VIP
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
