前言

HTTP 協議有一個缺陷：通訊只能由客戶端發起，做不到伺服器主動向客戶端推送資訊。

WebSocket 協議它的最大特點就是，伺服器可以主動向客戶端推送資訊，客戶端也可以主動向伺服器傳送資訊，是真正的雙向平等對話，屬於伺服器推送技術的一種。

websocket簡介

隨著網際網路的發展，傳統的HTTP協議已經很難滿足Web應用日益複雜的需求了。近年來，隨著HTML5的誕生，WebSocket協議被提出，它實現了瀏覽器與伺服器的全雙工通訊，擴充套件了瀏覽器與服務端的通訊功能，使服務端也能主動向客戶端傳送資料。

我們知道，傳統的HTTP協議是無狀態的，每次請求(request)都要由客戶端(如瀏覽器)主動發起，服務端進行處理後返回response結果，而服務端很難主動向客戶端傳送資料;這種客戶端是主動方，服務端是被動方的傳統Web模式對於資訊變化不頻繁的Web應用來說造成的麻煩較小，而對於涉及實時資訊的Web應用卻帶來了很大的不便，如帶有即時通訊、實時資料、訂閱推送等功能的應用。在WebSocket規範提出之前，開發人員若要實現這些實時性較強的功能，經常會使用折衷的解決方法：輪詢(polling)和Comet技術。其實後者本質上也是一種輪詢，只不過有所改進。

輪詢是最原始的實現實時Web應用的解決方案。輪詢技術要求客戶端以設定的時間間隔週期性地向服務端傳送請求，頻繁地查詢是否有新的資料改動。明顯地，這種方法會導致過多不必要的請求，浪費流量和伺服器資源。

Comet技術又可以分為長輪詢和流技術。長輪詢改進了上述的輪詢技術，減小了無用的請求。它會為某些資料設定過期時間，當資料過期後才會向服務端傳送請求;這種機制適合資料的改動不是特別頻繁的情況。流技術通常是指客戶端使用一個隱藏的視窗與服務端建立一個HTTP長連線，服務端會不斷更新連線狀態以保持HTTP長連線存活;這樣的話，服務端就可以透過這條長連線主動將資料傳送給客戶端;流技術在大併發環境下，可能會考驗到服務端的效能。

這兩種技術都是基於請求-應答模式，都不算是真正意義上的實時技術;它們的每一次請求、應答，都浪費了一定流量在相同的頭部資訊上，並且開發複雜度也較大。

伴隨著HTML5推出的WebSocket，真正實現了Web的實時通訊，使B/S模式具備了C/S模式的實時通訊能力。WebSocket的工作流程是這樣的：瀏覽器透過JavaScript向服務端發出建立 WebSocket 連線的請求，在 WebSocket 連線建立成功後，客戶端和服務端就可以透過 TCP連線傳輸資料。因為WebSocket連線本質上是TCP連線，不需要每次傳輸都帶上重複的頭部資料，所以它的資料傳輸量比輪詢和Comet技術小了很多.

環境安裝

相關環境：

Django 2.0.3

dwebsocket 0.5.11

使用 django 開發 websocket 服務端，先安裝 dwebsocket

pip install dwebdocket==0.5.11

dwebsocket 使用

在檢視函式里面使用 accept_websocket裝飾器可以接收http 請求和 websocket 請求。

使用require_websocke裝飾器只允許使用WebSocket連線，會拒絕正常的HTTP請求。

相關方法說明

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迭代器

使用案例

views.py 檢視函式

from django.shortcuts import renderimport jsonimport timefrom dwebsocket.decorators import accept_websocket, require_websocketimport re# Create your views here.# 上海-悠悠 https://www.cnblogs.com/yoyoketang@accept_websocketdef test_websocket(request):

'''服務端檢視'''

if request.is_websocket(): # 如果請求是websocket請求：

WebSocket = request.websocket while True: # 判斷是否透過websocket接收到資料

if WebSocket.has_messages(): # 接收Websocket客戶端傳送過來的訊息

client_msg = WebSocket.read().decode("utf-8") # 設定返回前端的資料

res = re.sub("嗎?([??])", "!", client_msg)

messages = { 'time': time.strftime('%Y.%m.%d %H:%M:%S', time.localtime(time.time())), 'server_msg': res, 'client_msg': client_msg

}

request.websocket.send(json.dumps(messages)) else: passdef test_websocket_client(request):

'''客戶端檢視'''

return render(request,'websocket_client.html')

在templates資料夾下新建 websocket_client.html 模板，編寫瀏覽器 websocket 的客戶端

<!DOCTYPE html><html lang="en"><head>

<title>django-websocket</title>

<script src="

$(function () {

$('#send_message').click(function () { var socket = new WebSocket("ws://" + window.location.host + "/test_websocket");

socket.() { console.log('WebSocket open');//成功連線上Websocket

socket.send($('#message').val());//傳送資料到服務端

};

socket.(e) { console.log('message: ' + e.data);//列印服務端返回的資料

$('#messagecontainer').append('<p><span style="padding-left:30em;"> </span>' + JSON.parse(e.data).client_msg + '</p>');

$('#messagecontainer').append('<p>' + JSON.parse(e.data).server_msg + '</p>');

};

});

}); </script></head><body>

<button type="button" id="send_message">send message</button>

<h1>Received Messages</h1>

</div></body></html>

urls.py 配置 websocket 客戶端訪問的url

from django.contrib import adminfrom django.urls import pathfrom hello import views

urlpatterns = [

path('admin/', admin.site.urls),

path('test_websocket', views.test_websocket, name='test_websocket'),

path('test_websocket_client', views.test_websocket_client , name='test_websocket_client'),

]

測試websocket

先啟動服務

python manage.py runserver 0.0.0.0:8000

瀏覽器開啟

輸入框，輸入內容，給服務端發資料過去，會收到回覆

開啟console可以看到服務端返回過來的json資料

python測試開發django-81.dwebsocket實現websocket

相關文章