django使用dwebsocket快速實現WebSocket

阿新 • • 發佈：2020-09-21

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>
            // 實時獲取當前線上使用者人數
            var socket = new WebSocket("ws:" + window.location.host + "/get_user_list/");
            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>