Django と React で websocket 通信を行う方法

動作環境

• OS==Windows11 wsl2 ubuntu22.04
• python==3.10.12
• Django==4.2.10
• channels==4.0.0
• channels-redis==4.2.0
• node==v18.16.0
• npm==9.5.1

mkdir django_react_websocket
cd django_react_websocket/
python -m venv .venv
source .venv/bin/activate

• django-cors-headers
  • 他のオリジンからの Django アプリケーションへのブラウザ内リクエストを可能にする
  • フロントエンドとバックエンドが異なるオリジン（ドメイン、スキーム、ポートが異なる URL）の場合、CORS ポリシーを適切に設定する必要がある
  • React アプリは localhost:3000 で動作し、Django API は localhost:8000 で動作する
  • django-cors-headers を追加すると、他のドメイン上のリソースにアクセスできるようになる
• channels
  • WebSocket を通じて、クライアントとサーバー間の双方向リアルタイム通信を行う
  • 非同期ビュー、非同期データベースアクセス、非同期ファイル I/O など、非同期処理をサポートする
  • channel_layer を使うことで、例えば、A さんが接続している WebSocket が受け取ったメッセージを、他のすべての関連する WebSocket 通信でつながっている人に対して共有する事ができる
• channels_redis
  • channel_layer のバックエンドとして Redis を使用するためのライブラリ
  • Redis についてはこの記事が参考になる
• daphne
  • ASGI（Asynchronous Server Gateway Interface）サーバーの一つで、非同期通信を扱うことができるウェブサーバー
  • WebSocket 通信を行うためには、通常のpython manage.py runserverで起動する WSGI（Web Server Gateway Interface）ではなく ASGI サーバーを使用する必要がある
  • settings.py を修正することでpython manage.py runserverでも ASGI を起動できる（公式ドキュメント）

settings.py

INSTALLED_APPS = [
    'daphne',  # add
    'django.contrib.admin',
    ...,
    'corsheaders',  # add
    'channels',  # add
    'chat',  # add
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # add
    ...,
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ASGI_APPLICATION = 'config.asgi.application'

# 自身以外のオリジンのHTTPリクエスト内にクッキーを含めることを許可する
CORS_ALLOW_CREDENTIALS = True

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000',
    'http://localhost:8000'
]

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [("127.0.0.1", 6379)],
        },
    },
}

from django.db import models


# Create your models here.
class Message(models.Model):
    content = models.TextField()
    timestamp = models.DateTimeField(auto_now_add=True)

ここでクライアントが WebSocket を通じてサーバーに接続するためのエンドポイント（URL パターン）を指定し、その接続がどのコンシューマ（Consumer）によって処理されるかをマッピングします。そのため、ws/chat/などは任意で指定することになります。

from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/', consumers.ChatConsumer.as_asgi()),
]

config 内の asgi.py を修正します。ここで ASGI 対応エントリーポイントを定義します。

import os

import chat.routing
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings')

application = ProtocolTypeRouter(
    {
        "http": get_asgi_application(),
        "websocket": AuthMiddlewareStack(
            URLRouter(
                chat.routing.websocket_urlpatterns
            )
        ),
    }

)

はじめに React プロジェクトを立ち上げます。ルートディレクトリに戻って以下のコマンドを実行します。（backend と同じ階層に frontend というフォルダを作成することになる）

npx create-react-app --template typescript frontend

App.tsx を以下のように修正します。

import React, { useEffect, useRef, useState } from "react";
import "./App.css";

interface MessagesProps {
  id: string;
  content: string;
  timestamp: string;
}

function App() {
  const [message, setMessage] = useState<string>("");
  const [messages, setMessages] = useState<MessagesProps[]>([]);
  const webSocketRef = useRef<WebSocket | null>(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setMessage(event.target.value);
  };

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault(); // フォームのデフォルト送信を防止

    if (message.trim() === "") return; // 空のメッセージは送信しない

    if (
      webSocketRef.current &&
      webSocketRef.current.readyState === WebSocket.OPEN
    ) {
      webSocketRef.current.send(
        JSON.stringify({
          type: "message",
          message: message,
        })
      );
    }
    setMessage("");
  };

  useEffect(() => {
    // WebSocket接続が既に開かれている場合は、新たに作成しない
    if (
      webSocketRef.current &&
      webSocketRef.current.readyState === WebSocket.OPEN
    ) {
      return;
    }

    webSocketRef.current = new WebSocket(`ws://127.0.0.1:8000/ws/chat/`);

    // 接続が開かれた時の処理
    const onOpen = () => {
      console.log("WebSocket Connected");
    };

    // メッセージ受信時の処理
    const onMessage = (e: MessageEvent) => {
      const data = JSON.parse(e.data);
      setMessages((messages) => [...messages, data.message]);
    };

    // エラー発生時の処理
    const onError = (e: Event) => {
      console.log("WebSocket Error: ", e);
    };

    // 接続が閉じられた時の処理
    const onClose = () => {
      console.log("WebSocket Disconnected");
    };

    // イベントリスナーの設定
    webSocketRef.current.addEventListener("open", onOpen);
    webSocketRef.current.addEventListener("message", onMessage);
    webSocketRef.current.addEventListener("error", onError);
    webSocketRef.current.addEventListener("close", onClose);

    return () => {
      if (webSocketRef.current?.readyState === 1) {
        // イベントリスナーを削除
        webSocketRef.current.removeEventListener("open", onOpen);
        webSocketRef.current.removeEventListener("message", onMessage);
        webSocketRef.current.removeEventListener("error", onError);
        webSocketRef.current.removeEventListener("close", onClose);
        webSocketRef.current?.close();
      }
    };
  }, []);

  return (
    <div className="App">
      <div className="p-2">
        <input
          placeholder="Type something..."
          onChange={handleChange}
          value={message}
        />
        <button
          type="submit"
          onClick={handleSubmit}
        >
          send
        </button>
      </div>
      <div>
        {messages.map((message) => (
          <li key={message.id}>
            {message.content} {message.timestamp}
          </li>
        ))}
      </div>
    </div>
  );
}

export default App;