WebSocketプロトコルを達成するためにチャネルを使用

WebSocketプロトコルとHTTPプロトコル

HTTPプロトコルの概要

これは、HTTPプロトコル、ハイパーテキスト転送プロトコルを指す（H yper T EXT T ransfer P rotocol）を、ハイパーテキスト転送プロトコルにWebサーバから送信されたローカルブラウザ、アプリケーション層プロトコルはTCP / IPプロトコルに基づいています。

主な特長

1. 高速でシンプル：サーバーへの顧客サービス要求、代わりにリクエストメソッドとパス、すぐに通信速度を送信します。
2. 柔軟性：HTTPは、データオブジェクトの任意の型の伝送を可能にします。
3. コネクションレス：各接続制限処理のみ1要求。サーバがクライアントの要求を処理し、顧客の応答を受信した後、すなわち、切断。このようにして、送信時間を節約することができます。
4. ステートレス：HTTPプロトコルはステートレスなプロトコルです。いかなる状態は、トランザクション処理とメモリのためのプロトコルではありません。接続ごとに送信されるデータの量をもたらすことができる情報の前に必要なその後の処理は、それが再送信されなければならないことを状態手段の欠如は、増加された場合。一方、それはより速く、サーバーに応じて、以前の情報を必要としません。
5. サポートするクライアント/サーバモデル

ワークス

HTTPは、クライアント/サーバモデル、および接続指向に基づいています。典型的なHTTPトランザクションは、次のプロセスがあります。

1. お客様は、サーバーへの接続を確立します。

   2. サーバーへの顧客の要求。
   3. サーバは要求を受け入れ、応答として要求に従って対応するファイルを返します。
   4. クライアントとサーバーは接続を閉じます。

WebSocketのプロトコルの概要

さて、プッシュ技術を達成するために、多くのサイト、使用される技術は、Ajaxポーリングです。ポーリングは、特定の時間間隔（例えば、1秒毎）、問題ブラウザによってサーバにHTTPリクエストであり、サーバによってクライアントのブラウザに最新のデータを返します。この伝統的なモデルは、ブラウザがサーバに一定の要求を必要とするという明らかな欠点をもたらし、しかし、HTTPリクエストは明らかに、これは無駄になり、真に効果的なデータはごく一部であってもよい長いヘッドを含んでいてもよいです帯域幅リソースがたくさん。

HTML5のWebSocketプロトコルの定義、サーバーのリソースや帯域幅を節約するために、そしてより多くのリアルタイム通信することができ、より良いこと。

WebSocketは、単一のTCP接続を介して全二重通信を行うためのプロトコルです。WebSocketのは、より簡単にクライアントとサーバー間のデータ交換を可能にし、サーバーが積極的にクライアントにデータをプッシュすることが可能。WebSocket APIでは、ブラウザとサーバは2つだけを作成することができ、直接の間、ハンドシェイクを完了する必要が永続的な接続、および双方向のデータ伝送を。

Djangoのチャンネルは、リアルタイム通信を実現するのWebSocket

公式ドキュメント

チャネルは、ジャンゴを使用した機能であるとのWebSocketプロトコルを処理するために、HTTP以外にプロジェクトを展開します。それが呼び出さに基づいてASGI Pythonのビルド仕様。

次に、公式Tutorial1-2の簡単なチャンネルの使用に基づきます。

まず、あなたはジャンゴとチャンネルをインストールする必要があります

pip install django
pip install channels

Djangoプロジェクトを作成し、プロジェクトのルートディレクトリを入力します。

django-admin startproject mysite
cd mysite

次は、チャンネルのルーティングのルートを作成しrouting.py、サーバーが時にHTTPリクエストを実行するためにどのようなコードを受信すると、チャンネルはDjangoのURLconfのと同様の構成をルーティング、それはチャネルチャネルを伝えます。

まず、最初から空のルーティング設定、ファイルの作成mysite/routing.py次のコードが含まれています。

# mysite/routing.py
from channels.routing import ProtocolTypeRouter

application = ProtocolTypeRouter({
    # (http->django views is added by default)
})

アプリリストに登録する次に、チャンネルライブラリー：

# mysite/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 新添加
    'channels',
]

編集を続行しmtsite/settings.py、次のコードを追加し、ルートのルーティング設定にチャンネルを：

# mysite/settings.py
# Channels
ASGI_APPLICATION = 'mysite.routing.application'

チャネルは、この時間に制御することができるrunserver代わりに、チャンネルサーバーDjangoの開発サーバによって開発された標準のコマンド。

Djangoプロジェクトを実行します。

py manage.py runserver

あなたは、次の出力が表示されます。

Performing system checks...

System check identified no issues (0 silenced).

You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
March 07, 2020 - 22:45:04
Django version 3.0.2, using settings 'mysite.settings'
Starting ASGI/Channels version 2.4.0 development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.
HTTP GET / 200 [0.04, 127.0.0.1:54871]

それは見ることができStarting ASGI/Channels development server at http://127.0.0.1:8000/、プロジェクトを引き継ぐためにDjangoの開発サーバからチャンネルの開発サーバを示します。開いて初期画面を、あなたはおなじみの小さなロケットが表示されます。

サーバーをシャットダウンし、アプリケーションを作成しますevent：

py manage.py startapp event

アプリ登録：

# mysite/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'channels',
    # 新添加
    'event',
]

では、ルートディレクトリに新しいフォルダを作成するtemplatesとtemplates/event、場所のhtmlファイルにフォルダをmysite/settings.pyパスを追加します。

# mysite/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 修改
        'DIRS': [os.path.join(BASE_DIR, 'templates').replace('\\', '/')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

でtemplatesビューファイル追加event/list.html次のように、前記要求された部分用WebSocketテンプレート：

<script type="text/javascript">
	function Filter() {
        if ("WebSocket" in window) {
            //alert("您的浏览器支持WebSocket!");
            // 重定向URL
            let ws = new WebSocket("ws://"+ window.location.host + "/ws/event/list/");
            ws.onopen = function () {
                ws.send(JSON.stringify({
                    'message': "测试",
                    // 需要传输的数据
                }));
            }
            ws.onmessage = function (evt) {
                let received_msg = JSON.parse(evt.data);
                let feed_back = received_msg['feedback'];
                alert(feedback);
                // 处理接受数据
            }
            ws.onclose = function () {
                //alert("WebSocket连接已关闭...");
            }
        }
        else {
            alert("你的浏览器不支持WebSocket!");
        }
    }
</script>

ビュー機能を作成しますevent/views.py：

# event/views.py
from django.shortcuts import render

def list(request):
    return render(request, 'event/list.html', {})

ルートを作成しますevent/urls.py：

# event/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('list/', views.list, name='list'),
]

ウィルevent appルートルートプロジェクトにルートを追加します。

# mysite/urls.py
from django.conf.urls import include
from django.urls import path
from django.contrib import admin

urlpatterns = [
    path('admin/', admin.site.urls),
    path('event/', include('event.urls', namespace='event')),
]

要求の処理チャンネル：

1. Channels接受HTTP请求
2. 查询根URLconf查找**消费者(consumer)**
3. 在**消费者(consumer)**中调用各种功能来处理连接的事件

作成し、消費者（消費者）のファイルをevent/consumers.py：

event/
    __init__.py
    ……
    consumers.py
    ……
    urls.py
    views.py

次のようにコードテンプレートは以下のとおりです。

# event/consumers.py
from channels.generic.websocket import WebsocketConsumer
import json

class ListDataConsumer(WebsocketConsumer):
    def connect(self):
        self.accept()

    def disconnect(self, close_code):
        pass

    def receive(self, text_data):
    	# 字典化接收数据
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        # 数据处理
        self.send(text_data=json.dumps({
        'feedback': "Accept",
        # 返回数据
    }))

されたconsumers.pyルート新しいように設定event/routing.py：

# event/routing.py
from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/event/list/$', consumers.ListDataConsumer),
]

続いて、ルートルートポイントevent/routing.pyファイル：

# mysite/routing.py
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter

import event.routing

application = ProtocolTypeRouter({
    # (http->django views is added by default)
    'websocket': AuthMiddlewareStack(
        URLRouter(
            event.routing.websocket_urlpatterns
        )
    ),
})

このルーティングの設定ルートは、サーバーのチャンネルの開発への接続を確立するときに、指定したProtocolTypeRouter最初の接続のタイプをチェックします。それはWebSocketの接続（ある場合：// WSまたはWSS：//が）、接続に割り当てられましたAuthMiddlewareStack。

中AuthMiddlewareStackの充填接続範囲現在のユーザ認証をカバーした後に接続しますURLRouter。これは、URLRouter特定の消費者ベースのルートHTTPパスへの接続を提供するために、研究に基づいて説明するurlモデル。

データベースモデルを移行した後：

py manage.py makemigrations
py manage.py migrate

プロジェクトを実行します。

py manage.py runserver

接続が確立されている場合は、背景には、以下のディスプレイを持っている必要があります。

HTTP GET /event/list/ 200 [0.06, 127.0.0.1:58855]
WebSocket HANDSHAKING /ws/event/list/ [127.0.0.1:58906]
WebSocket CONNECT /ws/event/list/ [127.0.0.1:58906]

概要

チャンネルは、上記の一般的な手順は、以下の構成ASGIを使用して、チャネルサーバは、元のDjangoのサーバーが要求を処理置き換えられます。

リアルタイム通信のために使用用WebSocketプロトコルのために必要な場合にのみ設定する必要routing.pyとconsumers.py、によってrouting.pyポイントconsumers.pyのWebSocket要求を処理する、使用前にのみ、残りのHTTPプロトコル要求を使用して違いはありません。

チャネルの使用中のプロジェクトに1つだけのアプリなので、あなたはを参照することができ、プロジェクトのコードのevent。