基于Python實現(xiàn)從頭搭建一個在線聊天室框架

更新時間：2022年11月14日 09:51:25 作者：蘿卜大雜燴

這篇文章主要為大家詳細介紹了如何基于Python實現(xiàn)從頭搭建一個在線聊天室框架，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下

整體技術棧

flask 框架
flask_login 的使用
jquery 簡單應用

搭建權限框架

還是使用 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')

一個簡單的登陸表單，不做過多解釋

接下來定義數(shù)據(jù)庫結構

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)

這里定義了，只檢查用戶名是否存在，如果存在，就執(zhí)行 login_user() 函數(shù)，登陸。用戶密碼的使用，也留到后面再做處理。

其中 load_user，是回調函數(shù)，將獲取到的 user 對象存儲到瀏覽器的 session 中，然后在調用 login_user 函數(shù)時，就會調用 load_user 來把真正需要登陸的用戶設置到 session 中。當?shù)顷懗晒?，就會跳轉到 chat 函數(shù)所對應的頁面。

chat 函數(shù)比較簡單，只是展示一個網(wǎng)頁

@app.route('/chat',?methods=['GET',?'POST'])
@login_required
def?chat():
????return?render_template('chat.html')

使用 login_required 裝飾器，保證該函數(shù)只允許登陸的用戶訪問。

增加些初始化函數(shù)

@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"

增加了初始化數(shù)據(jù)庫和新增用戶的函數(shù)。

構建前端頁面

首先處理登陸頁面，在 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="/" rel="external nofollow"  rel="external nofollow" >Flasky</a>
????????</div>
????????<div?class="navbar-collapse?collapse">
????????????<ul?class="nav?navbar-nav">
????????????????<li><a?href="/" rel="external nofollow"  rel="external nofollow" >Home</a></li>
????????????</ul>
????????????<ul?class="nav?navbar-nav?navbar-right">
????????????????{%?if?current_user.is_authenticated?%}
????????????????<li><a?href="{{?url_for('logout')?}}" rel="external nofollow"  rel="external nofollow" >Logout</a></li>
????????????????{%?else?%}
????????????????<li><a?href="{{?url_for('login')?}}" rel="external nofollow"  rel="external nofollow" >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 頁面，主要使用了 Ajax 來處理文字交互。

首先來看看主體頁面，在 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')}}" rel="external nofollow"  rel="external nofollow" >
<link?rel="icon"?href="{{?url_for('static',filename='chat/images/hihi.jpg')}}" rel="external nofollow"  rel="external nofollow" ?type="image/x-icon">
<link?type="text/css"?rel="stylesheet"?href="/static/chat/css/style.css" rel="external nofollow" >
<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')?}}" rel="external nofollow"  rel="external nofollow" ><i?class="fontico?lock"></i>退出登陸</a></li>
????????????{%?else?%}
??????????<li><a?href="{{?url_for('logout')?}}" rel="external nofollow"  rel="external nofollow" ><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="hidden"?name="to_uid"?id="to_uid"?value="0">
????????<div?class="facebox?fn-clear">
??????????<div?class="expression"></div>
??????????<div?class="chat_type"?id="chat_type">群聊</div>
????????????{%?if?current_user.is_authenticated?%}
??????????<button?name="login"?class="sub_but"?id="sub_but_login">提?交</button>
????????????{%?else?%}
??????????<button?name="logout"?class="sub_but"?id="sub_but">提?交</button>
????????????{%?endif?%}
????????</div>
??????</div>
????</div>
??</div>
</div>

整體效果如下，是不是挺少女系的。

當用戶在點擊“提交”按鈕后，調用 JS 函數(shù)

????/*用戶登陸的用戶點擊提交按鈕發(fā)送消息按鈕*/
????$('#sub_but_login').click(function(event){
????????sendMessageLogin(event,?fromname,?to_uid,?to_uname);
????});

為了后面便于擴展，將未登錄的用戶特別區(qū)分開來，后面也許同樣允許未登陸用戶訪問該頁面，但是只能同機器人小黃鴨聊天

????/*用戶未登陸的用戶點擊提交按鈕發(fā)送消息按鈕*/
????$('#sub_but').click(function(event){
????????sendMessage(event,?fromname,?to_uid,?to_uname);
????});

再來看函數(shù) sendMessageLogin

function?sendMessageLogin(event,?from_name,?to_uid,?to_uname){
????var?msg?=?$("#message").val();
????var?myDate?=?new?Date();
????var?myTime?=?myDate.toLocaleTimeString();
????var?itTime?=?myDate.toLocaleString();
????//var?iTime?=?myDate.toDateString();
????var?htmlData?=???'<div?class="msg_item?fn-clear">'
???????????????????+?'???<div?class="uface">{%?if?current_user.is_authenticated?%}<img?src="{{?url_for('static',?filename='chat/images/hi.jpg')?}}"?width="40"?height="40"??alt=""/>{%?endif?%}</div>'
???????????????????+?'???<div?class="item_right">'
???????????????????+?'?????<div?class="msg?own">'?+?msg?+?'</div>'
???????????????????+?'?????<div?class="name_time">'?+?from_name?+?'?·?'?+?itTime?+'</div>'
???????????????????+?'???</div>'
???????????????????+?'</div>';
????$("#message_box").append(htmlData);
????$('#message_box').scrollTop($("#message_box")[0].scrollHeight?+?20);
????$("#message").val('');
????setTimeout(function(){sendToServer(from_name,?msg)},?1000);?//延時調用
}

接收幾個參數(shù)，然后將當前會話消息追加到 HTML 頁面中，并且調用真正的后臺 API 函數(shù) sendToServer

function?sendToServer(name,?msg){
????var?xmlhttp?=?new?XMLHttpRequest();
????var?myDate?=?new?Date();
????//var?myTime?=?myDate.toLocaleTimeString();
????var?myTime?=?myDate.toLocaleString();
????xmlhttp.onreadystatechange=function()?{
????????if?(xmlhttp.readyState?==?4?&&?xmlhttp.status?==?200)?{
????????????myObj?=?xmlhttp.responseText;
????????????var?htmlData2?=???'<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">'?+?myObj?+?'</div>'
???????????????????+?'?????<div?class="name_time">'?+?'小黃鴨'?+?'?·?'?+?myTime?+'</div>'
???????????????????+?'???</div>'
???????????????????+?'</div>';
????????????$("#message_box").append(htmlData2);
????????????$('#message_box').scrollTop($("#message_box")[0].scrollHeight?+?20);
????????}
????}
????xmlhttp.open("GET",?"/api/sendchat/"?+?msg,?true);
????xmlhttp.send();

};

sendToServer 函數(shù)調用后臺 API，并把接收到的消息回寫到 HTML 頁面中。

而目前的后臺 API 也比較簡單，直接返回用戶輸入的消息

@app.route('/api/sendchat/<info>',?methods=['GET',?'POST'])
@login_required
def?send_chat(info):
????return?info

這樣，一個整體的聊天室架子就搭建好了，后面我們再接入 redis 和自己訓練的聊天機器人，來實現(xiàn)真正的在線聊天室。

到此這篇關于基于Python實現(xiàn)從頭搭建一個在線聊天室的文章就介紹到這了,更多相關Python在線聊天室內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Python開發(fā)的單詞頻率統(tǒng)計工具wordsworth使用方法
wordsworth是字母，單詞和n元組頻率分析，用來分析文件中的單詞出現(xiàn)頻率的工具。
2014-06-06
Python異常對代碼運行性能的影響實例解析
這篇文章主要介紹了Python異常對代碼運行性能的影響實例解析，分享了相關代碼示例，小編覺得還是挺不錯的，具有一定借鑒價值，需要的朋友可以參考下
2018-02-02
Python連接Mysql進行增刪改查的示例代碼
這篇文章主要介紹了Python連接Mysql進行增刪改查的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-08-08
親測解決tensorflow和keras版本不匹配的問題
這篇文章主要介紹了親測解決tensorflow和keras版本不匹配問題,完美解決：ImportError: No module named 'tensorflow.python.eager'問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
python獲得文件創(chuàng)建時間和修改時間的方法
這篇文章主要介紹了python獲得文件創(chuàng)建時間和修改時間的方法,涉及Python針對文件屬性的相關操作技巧,需要的朋友可以參考下
2015-06-06
python批量處理txt文件的實例代碼
這篇文章主要介紹了python批量處理txt文件的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01
關于pandas-profiling的降級之旅
這篇文章主要介紹了關于pandas-profiling的降級之旅,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-11-11
Python K-means實現(xiàn)簡單圖像聚類的示例代碼
本文主要介紹了Python K-means實現(xiàn)簡單圖像聚類的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
python編寫Logistic邏輯回歸
這篇文章主要介紹了python編寫Logistic邏輯回歸的相關代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-12-12
Python面向對象之類的封裝操作示例
這篇文章主要介紹了Python面向對象之類的封裝操作,結合具體實例形式分析了Python面向對象程序設計中類方法的定義與使用相關操作技巧,需要的朋友可以參考下
2019-06-06