Django實現(xiàn)WebSocket在線聊天室功能(channels庫)
1.Django實現(xiàn)WebSocket在線聊天室
1.1 安裝
pip install channels==2.3
(saas) F:\Desktop\Python_Study\CHS-Tracer\saas>pip install channels==2.3
Looking in indexes: http://mirrors.aliyun.com/pypi/simple/
Collecting channels==2.3
Downloading
...
Successfully installed Automat-20.2.0 attrs-20.3.0 autobahn-21.3.1 channels-2.3.0
1.2 創(chuàng)建Django項目
1.3 http路由
url(r"^chat/$", chat_view.chat, name="chat"), # 聊天室
1.4 http視圖函數(shù)
def chat(request):
return render(request, "chat.html")
1.5 settings添加channels相關(guān)配置
INSTALLED_APPS = [ 'channels', # 項目中要使用channels做WebSocket了 ] ASGI_APPLICATION = "saas.routing.application" # 項目名.routing.application
1.6 創(chuàng)建routing.py（websocket的路由）和comsumers.py（websocket的視圖函數(shù)）
1.7 websocket路由
# -*- coding:utf-8 -*-
# 作者：IT小學(xué)生蔡坨坨
# 時間：2021/4/23 18:21
# 功能：channels相關(guān)路由
from channels.routing import ProtocolTypeRouter, URLRouter
from django.conf.urls import url
from web import consumers
application = ProtocolTypeRouter({
"websocket": URLRouter([
url(r'^chat/$', consumers.ChatConsumer),
])
})
1.8 websocket視圖函數(shù)
# -*- coding:utf-8 -*-
# 作者：IT小學(xué)生蔡坨坨
# 時間：2021/4/23 18:25
# 功能：channels相關(guān)視圖
from channels.exceptions import StopConsumer
from channels.generic.websocket import WebsocketConsumer
# 定義一個列表，用于存放當(dāng)前在線的用戶
CONSUMER_OBJECT_LIST = []
class ChatConsumer(WebsocketConsumer):
def websocket_connect(self, message):
"""
客戶端瀏覽器發(fā)來連接請求之后就會被觸發(fā)
:param message:
:return:
"""
# 服務(wù)端接收連接，向客戶端瀏覽器發(fā)送一個加密字符串
self.accept()
# 連接成功
CONSUMER_OBJECT_LIST.append(self)
def websocket_receive(self, message):
"""
客戶端瀏覽器向服務(wù)端發(fā)送消息，此方法自動觸發(fā)
:param message:
:return:
"""
print("接受到消息了。", message)
# 服務(wù)端給客戶端回一條消息
# self.send(text_data=message["text"])
for obj in CONSUMER_OBJECT_LIST:
obj.send(text_data=message["text"])
def websocket_disconnect(self, message):
"""
客戶端瀏覽器主動斷開連接
:param message:
:return:
"""
# 服務(wù)端斷開連接
CONSUMER_OBJECT_LIST.remove(self)
raise StopConsumer()
1.9 前端代碼
<!-- css樣式 -->
<style>
pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 18px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #00aaaa;
border-radius: 12px;
}
</style>
<!-- body內(nèi)容 -->
<div style="width: 600px;height: 574px;margin: auto;margin-top: 20px;">
<div class="panel panel-success">
<div class="panel-heading">在線實時聊天室</div>
<div class="panel-body">
<div style="border: #f5f5f5 2px solid;width: 570px;height: 400px;overflow:scroll">
<div id="content">
<!-- 聊天記錄 -->
</div>
</div>
<div style="border-color: white;margin-top: 10px">
<textarea type="text" id="txt" placeholder="請輸入消息內(nèi)容......" class="form-control"></textarea>
</div>
</div>
<div class="table">
<div>
<button class="btn btn-danger" onclick="closeLink();" style="margin-left: 74%">斷開連接</button>
<button class="btn btn-success" onclick="sendMsg();">發(fā)送</button>
</div>
</div>
</div>
</div>
<!-- 消息模板 -->
<div id="recordTemplate" class="hide">
<div class="right-info">
<!-- 用戶 -->
<p>匿名用戶：</p>
<!-- 消息內(nèi)容 -->
<pre>
</pre>
</div>
</div>
<!-- js代碼 -->
<script>
var STATUS; // 是否連接的標(biāo)志
var ws = new WebSocket("ws://127.0.0.1:8000/chat/");
ws.onopen = function () {
// 客戶端在握手環(huán)節(jié)驗證成功之后，自動執(zhí)行此方法
console.log("連接成功。")
};
ws.onmessage = function msg(event) {
var $item = $("#recordTemplate").find('.right-info').clone();
$item.find('pre').html(event.data);
$("#content").append($item);
};
function sendMsg() {
if (STATUS == false) {
swal({
title: "已斷開",
text: "當(dāng)前已斷開連接，刷新頁面重新連接。"
});
} else {
ws.send($("#txt").val());
$("#txt").val("");
}
}
function closeLink() {
ws.close();
STATUS = false;
console.log("斷開連接");
swal({
text: "成功斷開連接，刷新頁面重新連接。"
});
}
</script>
2.效果展示
3.總結(jié)
http協(xié)議
chat路由 --> chat視圖函數(shù)
訪問：瀏覽器發(fā)送請求即可
websocket協(xié)議
chat路由 --> ChatConsumer（3個方法）
訪問：new WebSocket對象
到此這篇關(guān)于Django實現(xiàn)WebSocket在線聊天室（channels庫）的文章就介紹到這了,更多相關(guān)Django實現(xiàn)WebSocket在線聊天室內(nèi)容請搜索本站以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持本站！
版權(quán)聲明：本站文章來源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有，歡迎引用、轉(zhuǎn)載，請保持原文完整并注明來源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站，禁止在非www.sddonglingsh.com所屬的服務(wù)器上建立鏡像，否則將依法追究法律責(zé)任。本站部分內(nèi)容來源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來，僅供學(xué)習(xí)參考，不代表本站立場，如有內(nèi)容涉嫌侵權(quán)，請聯(lián)系alex-e#qq.com處理。
關(guān)注官方微信