1.websocket說明：
WebSocket是一種在單個TCP連接上進行全雙工通信的協議
WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。
2.安裝dwebsocket
pip3 install dwebsocket
3.修改django項目setting配置文件
INSTALLED_APPS = [ ... ... ... 'dwebsocket', ] WEBSOCKET_ACCEPT_ALL=True # 可以允許每一個單獨的視圖使用websockets
4.編寫views視圖代碼
from django.shortcuts import render from dwebsocket.decorators import accept_websocket def index(request): return render(request,"index.html") @accept_websocket def get_user_list(request): if request.is_websocket(): message = request.websocket.wait() #接收客戶端發來的信息，沒有收到信息則會導致阻塞 count = 0 while True: if message: count += 1 request.websocket.send(str(count)) #發送內容必須為str time.sleep(2)
【注釋】
dwebsocket有兩種裝飾器：require_websocket和accept_websocekt，使用require_websocket裝飾器會導致視圖函數無法接收導致正常的http請求，一般情況使用accept_websocket方式就可以了，
dwebsocket的一些內置方法：
request.is_websocket（）：判斷請求是否是websocket方式，是返回true，否則返回false
request.websocket： 當請求為websocket的時候，會在request中增加一個websocket屬性，
WebSocket.wait（） 返回客戶端發送的一條消息，沒有收到消息則會導致阻塞
WebSocket.read（） 和wait一樣可以接受返回的消息，只是這種是非阻塞的，沒有消息返回None
WebSocket.count_messages（）返回消息的數量
WebSocket.has_messages（）返回是否有新的消息過來
WebSocket.send（message）像客戶端發送消息，message為byte類型
5.編寫url代碼
from django.urls import path from course import views as course_views urlpatterns = [ path('index/', course_views.index), path('get_user_list/', course_views.get_user_list), ]
6.編寫前端代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>quick websocket</title> </head> <body> <div class="col-md-offset-1" style="display: inline-block;line-height: 48px;color:orange"> 當前在線人數： <span id="online_number">0</span> </div> <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script> // 實時獲取當前在線用戶人數 protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://'; socketURL = protocol + window.location.host + "/get_user_list/"; console.log(socketURL); // var socket = new WebSocket("ws:" + window.location.host + "/get_user_list/"); var socket = new WebSocket(socketURL); socket.onopen = function () { console.log('WebSocket open');//成功連接上Websocket socket.send('adasdasda。。。。');//發送數據到服務端 }; socket.onmessage = function (e) { $('#online_number').text(e.data) }; socket.onclose=function(e){ console.log(e); socket.close(); //關閉TCP連接 }; if (socket.readyState == WebSocket.OPEN) socket.onopen(); </script> </body> </html>
7.效果顯示
// 實時獲取當前在線用戶人數
protocol = (location.protocol === 'https:') ? 'wss://' : 'ws://';
socketURL = protocol + window.location.host + "/get_user_list/";
console.log(socketURL);
// var socket = new WebSocket("ws:" + window.location.host + "/get_user_list/");
var socket = new WebSocket(socketURL);