django でログインユーザーだけの chat をしたい

Question

django でログインしたユーザーだけの chat をしたいと思っています。

django channels にあるチュートリアルは、1から4まで pipenv で実行し、きちんと動作することを確認しております。

ネット検索にて、「django-channels を使った websocket を用いたチャットアプリの作成」を見つけ、Github からダウンロードして動かしてみたのですが、どうしても web socket が繋がりません。

環境は
linux mint 20.2 cynnamon
です。

CHANNEL_LAYERS = {
    'default': {
        'BACKEND': 'channels_redis.core.RedisChannelLayer',
        'CONFIG': {
            "hosts": [('redis', 6379)],  # デフォルト：繋がらない
            "hosts": [('127.0.0.1', 6379)],  # 繋がるが無限ループ
        },
    },
}

デフォルトの"hosts": [('redis', 6379)]にすると以下のように繋がりません。

HTTP GET / 200 [0.16, 127.0.0.1:50358]
HTTP GET /room/b024fd92-41c4-421b-982b-53ef1c135314 200 [0.09, 127.0.0.1:50358]
WebSocket HANDSHAKING /ws/b024fd92-41c4-421b-982b-53ef1c135314 [127.0.0.1:50438]
WebSocket DISCONNECT /ws/b024fd92-41c4-421b-982b-53ef1c135314 [127.0.0.1:50438]

"hosts": [('127.0.0.1', 6379)]にすると、以下のように connect と disconnect が短時間で無限ループのようになります。

HTTP GET /static/debug_toolbar/js/utils.js 304 [0.00, 127.0.0.1:46070]
WebSocket CONNECT /ws/b024fd92-41c4-421b-982b-53ef1c135314 [127.0.0.1:46084]
WebSocket DISCONNECT /ws/b024fd92-41c4-421b-982b-53ef1c135314 [127.0.0.1:46084]
HTTP GET /room/b024fd92-41c4-421b-982b-53ef1c135314 200 [0.07, 127.0.0.1:46070]
HTTP GET /static/debug_toolbar/js/toolbar.js 304 [0.00, 127.0.0.1:46094]
WebSocket HANDSHAKING /ws/b024fd92-41c4-421b-982b-53ef1c135314 [127.0.0.1:46096]
HTTP GET /static/debug_toolbar/js/utils.js 304 [0.00, 127.0.0.1:46094]
WebSocket CONNECT /ws/b024fd92-41c4-421b-982b-53ef1c135314 [127.0.0.1:46096]
WebSocket DISCONNECT /ws/b024fd92-41c4-421b-982b-53ef1c135314 [127.0.0.1:46096]

参考サイトには「適当に redis サーバを用意したら ./manage.py runserver で起動します。」と書いてあるのですが、その具体的な設定方法がわかりません。

ちなみに「sudo systemctl status redis-server」で確認すると、redis server は active(running)となっています。

また、/etc/redis/redis.conf をいろいろと編集してみたのですが、やはり動きません。

参考サイトのプログラムがあまりにも素晴らしいので、できることなら導入したいのですがどのようにしたらいいのでしょうか？

Answer 1

完全解決したわけではないのですが動くようにはなりました。
room.htmlの例外処理で「location.reload();」をコメントアウトしたら、動くことは動きます。

でも、これはエラーが発生しているということで、そのエラーは
「TypeError: NetworkError when attempting to fetch resource.」
というものでした。
このエラーをキャッチして reload するので永久ループに入ったようです。

そしてこのエラーは、いろいろ検索した感じでは簡単に解決できそうにありませんでした。

とりあえずは動いているのでこれで解決とさせて頂きます。

    const api_url = 'http://localhost:55002/rooms/{{room.id}}/';
    const rendering_room_info = () => {
        fetch(api_url)
            .then(response => response.json())
            .then(response => {
                const members = response.members;
                const el_members = document.getElementById('members');
                el_members.innerHTML = '';
                members.map(member => {
                    const template = document.getElementById('room-member-template');
                    const clone = template.content.cloneNode(true);
                    if (member.is_online) {
                        console.log('online');
                        clone.querySelector('.is-online').classList.remove('d-none');
                    } else {
                        console.log('offline');
                        clone.querySelector('.is-offline').classList.remove('d-none');
                    }
                    clone.querySelector('.user-name').textContent = member.username;
                    el_members.appendChild(clone);
                });
            })
            .catch(e => {
                console.error(e);
                //location.reload();   ← ここをコメントアウトしたら動くようになりました。
            });
    }