DjangoでChatアプリを作る2(What chat room would you like to enter?の画面が表示されるまで) | www.yoshiislandblog.net

DjangoでChatアプリを作る2(What chat room would you like to enter?の画面が表示されるまで)

DjangoでChatアプリを作る1(ASGI/Channelsで立ち上げるまで)の続き

こちら を参考に進める
https://channels.readthedocs.io/en/latest/tutorial/part_1.html

「Make sure you’re in the same directory」と書かれているので、manage.pyと同じディレクトリで
以下コマンドでアプリを作る(コンテナ内で)

% docker exec -it mysite_web_1 bash
# python manage.py startapp chat

chatというのはアプリの名前なのでなんでも良い

chatディレクトリの中を見ると色々ファイルができている

% ls chat
__init__.py  admin.py     apps.py      migrations/  models.py    tests.py     views.py

しかし「the purposes of this tutorial, we will only be working with chat/views.py and chat/init.py. So remove all other files from the chat directory.」とのことなので、不要なファイルは削除する

% rm -rf chat/admin.py chat/apps.py chat/migrations chat/models.py chat/tests.py
% ls chat
__init__.py  views.py

settings.pyにchatアプリを追加(★部分追記)

% vim mysite/settings.py
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'social_django',
    'mysite.login',
    'channels',
    'chat', ★
]

色々チュートリアルのテンプレをコピペしていく
新規作成

% mkdir -p chat/templates/chat/
% vim chat/templates/chat/index.html
% cat chat/templates/chat/index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Rooms</title>
</head>
<body>
    What chat room would you like to enter?<br/>
    <input id="room-name-input" type="text" size="100"/><br/>
    <input id="room-name-submit" type="button" value="Enter"/>

    <script>
        document.querySelector('#room-name-input').focus();
        document.querySelector('#room-name-input').onkeyup = function(e) {
            if (e.keyCode === 13) {  // enter, return
                document.querySelector('#room-name-submit').click();
            }
        };

        document.querySelector('#room-name-submit').onclick = function(e) {
            var roomName = document.querySelector('#room-name-input').value;
            window.location.pathname = '/chat/' + roomName + '/';
        };
    </script>
</body>
</html>

★部分追記

% vim chat/views.py
% cat chat/views.py
from django.shortcuts import render

def index(request): ★
    return render(request, 'chat/index.html', {}) ★

新規作成

% vim chat/urls.py
% cat chat/urls.py
from django.conf.urls import url

from . import views

urlpatterns = [
    url(r'^$', views.index, name='index'),
]

★部分追記

% cat mysite/urls.py
from django.conf.urls import url, include
from django.contrib import admin
from django.contrib.auth import views as auth_views
from django.views.generic import TemplateView

from mysite.login import views as login_views

urlpatterns = [
    url(r'^$', TemplateView.as_view(template_name='base.html') , name='base'),
    url(r'^home/$', login_views.home, name='home'),
    url(r'^login/$', auth_views.LoginView.as_view(), name='login'),
    url(r'^logout/$', auth_views.LogoutView.as_view(), name='logout'),
    url(r'^oauth/', include('social_django.urls', namespace='social')),
    url(r'^admin/', admin.site.urls),
    url(r'^chat/', include('chat.urls')), ★
]

templatesの場所が適切に指定されているか確認しておく
今回の場合は「chat/templates」(★部分追記)

% vim mysite/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'mysite/templates', 'chat/templates')], ★
        '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',
                'social_django.context_processors.backends',
                'social_django.context_processors.login_redirect',
            ],
        },
    },
]

指定されていないと以下のようなエラーが出る

web_1  | HTTP GET /chat/ 200 [0.01, ]
web_1  | Not Found: /chat//
web_1  | HTTP GET /chat// 404 [0.01, ]

うまくいけばこんな感じ

web_1  | Starting ASGI/Channels version 2.1.7 development server at http://0.0.0.0:8000/
web_1  | Quit the server with CONTROL-C.
web_1  | HTTP GET /chat/ 200 [0.02, ]

これで「What chat room would you like to enter?」の画面が表示される

DjangoでChatアプリを作る3(チャットの画面ができるまで)に続く

%d bloggers like this: