下載 pip install dwebsocket
WebSocket是一種在單個TCP連接上進行全雙工通信的協議
WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸
現在，很多網站為了實現推送技術，所用的技術都是輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
而比較新的技術去做輪詢的效果是Comet。這種技術雖然可以雙向通信，但依然需要反復發出請求。而且在Comet中，普遍采用的長鏈接，也會消耗服務器資源。
在這種情況下，HTML5定義了WebSocket協議，能更好的節省服務器資源和帶寬，並且能夠更實時地進行通訊
1. http協議是用在應用層的協議，他是基於tcp協議的，http協議建立鏈接也必須要有三次握手才能發送信息。
http鏈接分為短鏈接，長鏈接，短鏈接是每次請求都要三次握手才能發送自己的信息。即每一個request對應一個response。長鏈接是在一定的期限內保持鏈接。保持TCP連接不斷開。客戶端與服務器通信，必須要有客戶端發起然后服務器返回結果。客戶端是主動的，服務器是被動的。
2. WebSocket
WebSocket他是為了解決客戶端發起多個http請求到服務器資源瀏覽器必須要經過長時間的輪訓問題而生的，他實現了多路復用，他是全雙工通信。在webSocket協議下客服端和瀏覽器可以同時發送信息。
建立了WenSocket之后服務器不必在瀏覽器發送request請求之后才能發送信息到瀏覽器。這時的服務器已有主動權想什么時候發就可以發送信息到服務器。而且信息當中不必在帶有head的部分信息了與http的長鏈接通信來說，這種方式，不僅能降低服務器的壓力。而且信息當中也減少了部分多余的信息。
視圖文件 向前端發送數據
from dwebsocket.decorators import accept_websocket @accept_websocket def test_websocket(request): if request.is_websocket(): while 1: time.sleep(1) ## 向前端發送時間 dit = { 'time':time.strftime('%Y.%m.%d %H:%M:%S',time.localtime(time.time())) } request.websocket.send(json.dumps(dit))
視圖文件 接收前端發送過來的數據
#接受前端信息 @accept_websocket def test_socket(request): if request.is_websocket(): for message in request.websocket: print(message) request.websocket.send(message)
路由文件
from .views import test_socket,test_websocket urlpatterns = [ path('test_socket',test_socket), path('test_websocket',test_websocket), ]
前端連接 接收后端給予數據
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Chat Room</title> </head> <body> </body> <script> //生成socket對象 var socket = new WebSocket("ws:" + window.location.host + "/md_admin/test_websocket"); socket.onopen = function () { console.log('WebSocket open');//成功連接上Websocket }; socket.onmessage = function (e) { console.log('message: ' + e.data);//打印服務端返回的數據 }; socket.onclose=function(e){ console.log(e); socket.close(); //關閉TCP連接 }; if (socket.readyState == WebSocket.OPEN){ socket.onopen(); } </script> </html>
前端連接 向后端發送數據
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Chat Room</title>
</head>
<body>
<input id="chat-message-input" type="text" size="100"/><br/>
<input id="chat-message-submit" type="button" value="Send" onclick='sendmessage()'/>
</body>
<script>
//生成socket對象
var socket = new WebSocket("ws:" + window.location.host + "/md_admin/test_socket");
socket.onopen = function () {
console.log('WebSocket open');//成功連接上Websocket
};
socket.onmessage = function (e) {
console.log('message: ' + e.data);//打印服務端返回的數據
};
socket.onclose=function(e){
console.log(e);
socket.close(); //關閉TCP連接
};
if (socket.readyState == WebSocket.OPEN){
socket.onopen();
}
window.s = socket;
function sendmessage(){
window.s.send(document.getElementById("chat-message-input").value);
}
</script>
</html>