Django版本 2.1.7 dwebsocket版本0.5.11
安裝
pip3 install dwebsocket==0.5.11
使用說明
上面已經安裝好了dwebsocket庫，那么如何使用呢？ 使用的方法有兩種情況，如下：
- 第一種則是利用修飾器的方式單獨對某個視圖進行增加websocket功能
- 另一種則是在配置文件中設置中間件，配置所有視圖都可以接收使用websocket功能。
相關方法函數說明
1.request.is_websocket()
如果是個websocket請求返回True，如果是個普通的http請求返回False,可以用這個方法區分它們。
2.request.websocket
在一個websocket請求建立之后，這個請求將會有一個websocket屬性，用來給客戶端提供一個簡單的api通訊，如果request.is_websocket()是False，這個屬性將是None。
3.WebSocket.wait()
返回一個客戶端發送的信息，在客戶端關閉連接之前他不會返回任何值，這種情況下，方法將返回None
4.WebSocket.read()
如果沒有從客戶端接收到新的消息，read方法會返回一個新的消息，如果沒有，就不返回。這是一個替代wait的非阻塞方法
5.WebSocket.count_messages()
返回消息隊列數量
6.WebSocket.has_messages()
如果有新消息返回True，否則返回False
7.WebSocket.send(message)
向客戶端發送消息
8.WebSocket.__iter__()
websocket迭代器
示例1 - 使用修飾器對單個視圖啟用websocket功能
- 在views.py文件中,將對應的視圖函數添加裝飾器
accept_websocket-—可以接受websocket請求和普通http請求
require_websocket----只接受websocket請求,拒絕普通http請求
- 編寫測試使用的websocket服務端視圖
import json
import time from dwebsocket.decorators import accept_websocket,require_websocket @accept_websocket def test_websocket(request): if request.is_websocket(): # 如果請求是websocket請求： i = 0 # 設置發送至前端的次數 while True: i += 1 # 遞增次數 i # 休眠1秒 time.sleep(1) # 設置發送前端的數據 messages = { 'time':time.strftime('%Y.%m.%d %H:%M:%S',time.localtime(time.time())), 'msg': 'send %d times!' % i, } # 設置發送數據為json格式 request.websocket.send(json.dumps(messages))
- 設置訪問視圖的url地址
from .views import * app_name = 'assetinfo' # 設置命名空間 urlpatterns = [ # ex:/assetinfo/test_websocket path('test_websocket', views.test_websocket , name='test_websocket'), ]
- 新建
websocket_client.html在templates文件夾下，編寫瀏覽器websocket的客戶端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="/static/js/jquery-3.0.0.min.js"></script> <script type="text/javascript"> $(function () { $('#send_message').click(function () { var socket = new WebSocket("ws://" + window.location.host + "/assetinfo/test_websocket"); socket.onopen = function () { console.log('WebSocket open');//成功連接上Websocket socket.send($('#message').val());//發送數據到服務端 }; socket.onmessage = function (e) { console.log('message: ' + e.data);//打印服務端返回的數據 $('#messagecontainer').prepend('<p>' + e.data + '</p>'); }; }); }); </script> </head> <body> <input type="text" id="message" value="Open websocket!" /> <button type="button" id="send_message">發送 message</button> <h1>Received Messages</h1> <div id="messagecontainer"></div> </body> </html>
- 編寫websocket客戶端的視圖
def test_websocket_client(request): return render(request,'websocket_client.html')
- 配置websocket客戶端訪問的url
urlpatterns = [ # ex:/assetinfo/test_websocket_client path('test_websocket_client', views.test_websocket_client , name='test_websocket_client'), ]
- 測試運行的效果
訪問客戶端：http://127.0.0.1:8000/assetinfo/test_websocket_client
可以看到，已經可以正常得不斷從websocket服務端接收到一直刷新的數據。
這里已經可以通過websocket的方式，瀏覽器作為客戶端不斷接收服務端發送過來的數據，並進行刷新。
但是在這里有個很明顯的缺點，就是沒有辦法在客戶端對websocket進行停止處理，以及重新連接websocket的操作，下面來看看。
示例2 - 使用修飾器方式，增加websocket停止以及重連功能
- 修改
websocket_client.html，增加websocket的停止以及重連js代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="/static/js/jquery-3.0.0.min.js"></script> <script type="text/javascript"> $(function () { // 點擊連接websocket按鈕，則啟動訪問websocket $('#connect_websocket').click(function () { if(window.s){ window.s.close() } // 設置websocket的服務端url var s = new WebSocket("ws://" + window.location.host + "/assetinfo/test_websocket"); // 打開連接websocket服務，連接成功則打印信息 s.onopen = function () { console.log('WebSocket open');//成功連接上Websocket }; // 接收服務端發送過來的數據，在瀏覽器上刷新 s.onmessage = function (e) { console.log('message: ' + e.data);//打印出服務端返回過來的數據 $('#messagecontainer').prepend('<p>' + e.data + '</p>'); }; window.s = s; }); // 點擊發送消息按鈕，則通過websocket發送數據至服務端 $('#send_message').click(function () { if (!window.s) { alert("Please connect server."); } else { window.s.send($('#message').val());//通過websocket發送數據 } }); // 點擊關閉websocket連接 $('#close_websocket').click(function () { if (window.s) { window.s.close();//關閉websocket console.log('websocket is closed!'); } }); }); </script> </head> <body> <input type="text" id="message" value="Open websocket!" /> <button type="button" id="connect_websocket">連接websocket</button> <button type="button" id="send_message">發送 message<