【Django元件】WebSocket的簡單實現
阿新 • • 發佈：2020-07-27
1：HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>線上客服系統</title>
</head>
<body>
{% comment %} 熱鍵 {% endcomment %}
<input type="text" id="message" value="" onkeydown="inpuKeyDown(event)"/>
<button type="button" id="send_message">傳送 message</button><button type="button" id="close">關閉連線</button>
<div id="messagecontainer"></div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var name = '{{username}}';
// 傳送到連線上去的後臺
var socket = new WebSocket("ws://" + window.location.host + "/websocket/" + name);
//傳送資料到服務端
socket.onopen = function () {
alert("您已經連線上客服")
};
// 傳送按鈕點選
$('#send_message').click(function () {
$('#messagecontainer').prepend('<p>' + $('#message').val() + '</p>');
if (!socket) {
alert("請重新連線")} else {
socket.send($('#message').val());
}
});
// 列印服務端返回的資料 接收訊息
socket.onmessage = function (e) {
$('#messagecontainer').prepend('<p>' + e.data + '</p>');
};
// 錯誤時
socket.onerror = function (event) {
console.log(" websocket.onerror ");
};
// 斷開連線時
$("#close").click(function () {
if (socket) {
socket.send("quit");
alert("已斷開連線，客服將收不到您傳送的資訊")
socket.close()
}
});
// 監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket連線，防止連線還沒斷開就關閉視窗，server端會拋異常。
window.onbeforeunload = function () {
socket.close();
}
// 傳送熱鍵設定
function inpuKeyDown(event) {
// console.log(event)
if (event.keyCode == 13) {
// 傳送訊息
socket.send($('#message').val());
}
}
// 心跳包
setInterval(() => {
socket.send('Hear_t#Beat');
}, 60000)
</script>
</html>
配置：
1：url.py urlpatterns = [ url(r'^admin/', admin.site.urls), url('websocket_client/(?P<username>\w+)', view.websocket_client), url('websocket/(?P<username>\w+)', view.websocket), ] 2:settings.py INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', "dwebsocket", ] EBSOCKET_ACCEPT_ALL=True # 可以允許每一個單獨的檢視實用websockets
3：view.py:
"""
1 心跳包問題：定時傳送標識到後端，返回一個標識，前端疊加變數，超過3次就斷開連線
2 一對一指定使用者聊天：使用資料庫記錄兩個ID對應的聊天記錄，使用者訪問sockt網頁後取出資料傳送到聊天框
3 聊天室 將所有使用者傳送的訊息，儲存在redis或者session裡面，每個使用者訪問網頁後將全部資訊遍歷傳送到對方的聊天框
"""
import json
import time
from dwebsocket.decorators import accept_websocket
from django.shortcuts import render,HttpResponse
# Create your views here.
def websocket_client(request, username):
return render(request,'index.html',{'username': username})
# 儲存連線websocket的使用者
clients = []
@accept_websocket
def websocket(request, username):
try:
if request.is_websocket():
print("request",request)
print("當前使用者",username)
# 是否是第一次連線
if username not in clients:
# 設定傳送資料為json格式 回覆對應的使用者
request.websocket.send(json.dumps({"first":"您好，很高興為您服務,請簡單簡述您需要提問的問題{}".format(time.strftime('%Y.%m.%d %H:%M:%S', time.localtime(time.time())))}, ensure_ascii=False).encode("utf-8"))
# 新增使用者到已經存在使用者
clients.append(username)
else:
request.websocket.send(json.dumps({"User":"歡迎回來~"}, ensure_ascii=False).encode("utf-8"))
print("當前諮詢所有使用者",clients)
# 設定傳送至前端的次數
while True:
# for message in request.websocket:
message = request.websocket.wait()
if not message:
break
else:
str_message = str(message, 'utf-8')
print('message',str_message)
# 如果收到是心跳標誌 就加1
if str_message == "Hear_t#Beat":
heart = heart + 1
if str_message == 'quit':
print("quit裡面")
clients.remove(username)
request.websocket.close() # 關閉服務
break
# 新增到資料庫 redis
# 取到兩個使用者的資料傳送給前臺
# 設定傳送前端的資料
messages = {
'time': time.strftime('%Y.%m.%d %H:%M:%S', time.localtime(time.time())),
'msg': str_message,
}
# 設定傳送資料為json格式 回覆對應的使用者
request.websocket.send(json.dumps(messages,ensure_ascii=False).encode("utf-8"))
except:
pass