1. 程式人生 > >django中實現websocket

django中實現websocket

sock 連接 才會 exce htm 新建 receive src 技術分享

一、Websockets介紹

隨著互聯網的發展,傳統的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技術小了很多.

關於websocket的優點可以看:http://www.tuicool.com/articles/7zyMvy6

二、安裝dwebsocket

作者的github地址:https://github.com/duanhongyi/dwebsocket

安裝方法:

1.通過pip

pip install  dwebsocket2

2.通過下載到本地

解壓》執行 python setup.py install

附:如果安裝失敗提示關於ASCII碼直接刪掉readme裏面內容即可

三、使用方法

如果你想為一個單獨的視圖處理一個websocklet連接可以使用accept_websocket裝飾器,它會將標準的HTTP請求路由到視圖中。使用require_websocke裝飾器只允許使用WebSocket連接,會拒絕正常的HTTP請求。

在設置中添加設置MIDDLEWARE_CLASSES=dwebsocket.middleware.WebSocketMiddleware這樣會拒絕單獨的視圖實用websocket,必須加上accept_websocket 裝飾器。

設置WEBSOCKET_ACCEPT_ALL=True可以允許每一個單獨的視圖實用websockets

一些方法和屬性

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.新建一個django項目

技術分享圖片

2.新建index.html在templates文件夾下,編寫我們的客戶端

<!DOCTYPE html>
<html>
<head>
    <title>django-websocket</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">//<![CDATA[
    $(function () {
        $(#send_message).click(function () {
            var socket = new WebSocket("ws://" + window.location.host + "/echo_once/");
            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>
<br>
<input type="text" id="message" value="Hello, World!"/>
<button type="button" id="send_message">發送 message</button>
<h1>Received Messages</h1>
<div id="messagecontainer">

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

3.app的views.py編寫我們的服務端

from dwebsocket import require_websocket

@require_websocket
def echo_once(request):
    message = request.websocket.wait()
    request.websocket.send(message)

4.url路由設置

from demo import views as v

urlpatterns = [

    url(r^index/, v.index),
    url(r^echo_once, v.echo_once),
]

5.runserver運行,效果展示

技術分享圖片

可以看到,當我們點擊按鈕之後,服務端發送消息到客戶端之後,就自動關閉了連接。

當然,我們也可以讓服務端不自動關閉連接,接下來利用websocket和http Get寫一個一樣的功能的函數,

6.新建一個html,寫一個新的客戶端

<!DOCTYPE html>
<html>
<head>
    <title>django-websocket</title>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">//<![CDATA[
    $(function () {
        $(#connect_websocket).click(function () {
            if (window.s) {
                window.s.close()
            }
            /*創建socket連接*/
            var socket = new WebSocket("ws://" + window.location.host + "/echo");
            socket.onopen = function () {
                console.log(WebSocket open);//成功連接上Websocket
            };
            socket.onmessage = function (e) {
                console.log(message:  + e.data);//打印出服務端返回過來的數據
                $(#messagecontainer).prepend(<p> + e.data + </p>);
            };
            // Call onopen directly if socket is already open
            if (socket.readyState == WebSocket.OPEN) socket.onopen();
            window.s = socket;
        });
        $(#send_message).click(function () {
            //如果未連接到websocket
            if (!window.s) {
                alert("websocket未連接.");
            } else {
                window.s.send($(#message).val());//通過websocket發送數據
            }
        });
        $(#close_websocket).click(function () {
            if (window.s) {
                window.s.close();//關閉websocket
                console.log(websocket已關閉);
            }
        });

    });
    //]]></script>
</head>
<body>
<br>
<input type="text" id="message" value="Hello, World!"/>
<button type="button" id="connect_websocket">連接 websocket</button>
<button type="button" id="send_message">發送 message</button>
<button type="button" id="close_websocket">關閉 websocket</button>
<h1>Received Messages</h1>
<div id="messagecontainer">

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

7.在viws.py中加入新的方法

from django.shortcuts import render
from dwebsocket.decorators import accept_websocket,require_websocket
from django.http import HttpResponse


@accept_websocket
def echo(request):
    if not request.is_websocket():#判斷是不是websocket連接
        try:#如果是普通的http方法
            message = request.GET[‘message‘]
            return HttpResponse(message)
        except:
            return render(request,‘index.html‘)
    else:
        for message in request.websocket:
            request.websocket.send(message)#發送消息到客戶端

8.url.py

from demo import views as v

urlpatterns = [
    url(r‘^index2/‘, v.index2),
    url(r‘^echo$‘, v.echo),
]

9.runserver運行,看看效果

技術分享圖片

可以看到,只有當我們手動關閉連接時候,websocket才會關閉。

附上demo地址:

https://github.com/huguodong/dj_dwebsocket

django中實現websocket