DjangoとChannelsで簡単なチャットサーバーを構築(2)
前回からの続きです。 ルームビューを作成 chat > templates > chat > room.htmlを作成します。 ルームビューを表示するためのviewを作成します。 ルームビューへのurl […]
Filter by Category
前回からの続きです。 ルームビューを作成 chat > templates > chat > room.htmlを作成します。 ルームビューを表示するためのviewを作成します。 ルームビューへのurl […]
こちらのチュートリアルと同じ内容です。https://channels.readthedocs.io/en/latest/tutorial/index.html 環境 Python 3.7.0Django 2.2.2ch […]
Beautiful Soupで以下のようなHTMLのoptionタグのvalueを取得する方法です。 optionタグのvalueの値を取得する方法 soup = soup.find_all('option')optio […]
Dockerを使ってシンプルなDjangoとPostgreSQLの開発環境を構築する方法です。GitHubリポジトリをクローンして以下のコマンドを入力します。 1. Dockerイメージを作成 2. Djangoプロジェ […]
以下のような、attachmentをつけて即ダウンロードが始まるシステムで、文字コードをShift-JISにする為にto_csv()の引数にencodingをShift-JISに設定しても、ダウンロードするとUTF-8で […]
Djangoでrunserverコマンドを使って開発用サーバーを起動した時にError: That port is already in use.が表示された時の対処法です。 Error: That port is al […]
Pillowを使って画像を合成する方法です。GitHubリポジトリ 上の2つの画像を合成して、下の画像を生成します。 Pillowのインストール バージョン確認 ディレクトリ構造 画像をリサイズ base_image = […]
Pillowを使って画像をリサイズする方法です。GitHubリポジトリ Pillowのインストール バージョン確認 ディレクトリ構造 画像をリサイズ files = glob.glob('./images/*')imag […]
Pillowを使って画像をクロッピングする方法です。ソースコードはGitHubにあげています。 Pillowのインストール バージョン確認 ディレクトリ構造 画像をクロッピング files = glob.glob('./ […]
Djangoで開発をする際にvenvを使って仮想環境を構築する方法です。pyenvがインストールされていてバージョンを切り替えできる状態を前提に進めます。 仮想環境について Pythonで開発していると開発環境では最新の […]
Pythonistaには多くのモジュールがプリインストールされていて、スクレイピングに必要なBeautifulSoupも初めから使える様になっています。そこで、今回はiOSアプリのPythonistaを使ってiPhone […]
DjangoのWEBプリケーションでCSVをpandasで読み込んでforで一行ずつループ処理をしたところ、毎回決まったところで決まったエラーが出たのでPyCharmのデバッグ機能を使って原因を調べた内容です。 プログラ […]
Pythonであるフォルダ内のファイルを別のフォルダにコピーする方法です。 ディレクトリ構造(ファイルのコピー後) directory = (os.getcwd())現在のディレクトリを取得します。 image_path […]
globモジュールを使いディレクトリ内にあるファイルを取得する方法です。 ディレクトリ構造 まずはディレクトリ内のjpgを全て取得します。 directory = (os.getcwd())で現在のディレクトリのパスを取 […]
Djangoのモデル上でDateTimeField型のデータが今日の日付のデータを取得する方法です。 1つ目00:00:00から23:59:59までの範囲を条件に取得します。 2つ目今日の日付が含まれるものを条件に取得し […]
テキストファイルやCSVファイルに書き出す時に文字コードをShift-JISに指定して書き出すとエラーになる場合があります。よく見るのが、-や を変換した時に出るエラーで\uff0dや\xa0と表示されます。 […]
DjangoでWEBアプリケーションを開発していてデータベースの集計などをバッチ処理したいときに、カスタムコマンドを作り実行する方法です。 今回はサンプルとしてmycommandアプリケーションを作成するので以下のコマン […]
DjangoのWEBアプリケーションでQuerySetの表示順を五十音順にしたら、開発環境では五十音順で表示されているのに本番環境では五十音順になっていないときの対処法です。(中途半端に五十音順になっていて、4、5件毎に […]
iPhoneとiPadから使えるPythonistaというアプリを使ってFlaskからHello World!する方法です。 Pythonistaはプリインストールされたモジュールが充実していて、バージョンも2.7か3. […]
Djangoでモジュールを作りviews.pyからimportして呼び出す方法です。 同じ処理を何度も書いたり、同じ処理を複数回呼び出したりするときは、その処理をモジュール化してviews.pyからimportして呼び出 […]
前回からの続きです。
chat > templates > chat > room.htmlを作成します。
chat
├── __init__.py
├── templates
│ └── chat
│ ├── index.html
│ └── room.html
├── urls.py
└── views.py
<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Chat Room</title>
</head>
<body>
<textarea id="chat-log" cols="100" rows="20"></textarea><br/>
<input id="chat-message-input" type="text" size="100"/><br/>
<input id="chat-message-submit" type="button" value="Send"/>
</body>
<script>
var roomName = {{ room_name_json }};
var chatSocket = new WebSocket(
'ws://' + window.location.host +
'/ws/chat/' + roomName + '/');
chatSocket.onmessage = function(e) {
var data = JSON.parse(e.data);
var message = data['message'];
document.querySelector('#chat-log').value += (message + '\n');
};
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
document.querySelector('#chat-message-input').focus();
document.querySelector('#chat-message-input').onkeyup = function(e) {
if (e.keyCode === 13) { // enter, return
document.querySelector('#chat-message-submit').click();
}
};
document.querySelector('#chat-message-submit').onclick = function(e) {
var messageInputDom = document.querySelector('#chat-message-input');
var message = messageInputDom.value;
chatSocket.send(JSON.stringify({
'message': message
}));
messageInputDom.value = '';
};
</script>
</html>
ルームビューを表示するためのviewを作成します。
# chat/views.py
from django.shortcuts import render
from django.utils.safestring import mark_safe
import json
def index(request):
return render(request, 'chat/index.html', {})
def room(request, room_name):
return render(request, 'chat/room.html', {
'room_name_json': mark_safe(json.dumps(room_name))
})
ルームビューへのurlを設定します。
# chat/urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^(?P<room_name>[^/]+)/$', views.room, name='room'),
]
一旦、ここでテストサーバーを起動して動作確認をします。
$ python manage.py runserver
フォームに入力された任意のルーム名でルームが作成されます。試しにフォームに”room”を入力してエンターを押して、http://127.0.0.1:8000/chat/room/へリダイレクトされれば成功です。
WebSocket接続を受け入れる基本的なconsumerを作成します。このconsumerはWebSocketで受信したメッセージを受け取り、同じWebSocketに返します。
chat > consumers.pyを作成します。
chat
├── __init__.py
├── consumers.py
├── templates
│ └── chat
│ ├── index.html
│ └── room.html
├── urls.py
└── views.py
# chat/consumers.py
from channels.generic.websocket import WebsocketConsumer
import json
class ChatConsumer(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({
'message': message
}))
チャットアプリのルーティング設定を作成します。
chat / routing.pyを作成します。
chat
├── __init__.py
├── consumers.py
├── routing.py
├── templates
│ └── chat
│ ├── index.html
│ └── room.html
├── urls.py
└── views.py
# chat/routing.py
from django.conf.urls import url
from . import consumers
websocket_urlpatterns = [
url(r'^ws/chat/(?P<room_name>[^/]+)/$', consumers.ChatConsumer),
]
django_channels/routing.pyを以下の様に変更します。
# django_channels/routing.py
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
import chat.routing
application = ProtocolTypeRouter({
# (http->django views is added by default)
'websocket': AuthMiddlewareStack(
URLRouter(
chat.routing.websocket_urlpatterns
)
),
})
ここでマイグレートします。
$ python manager.py migrate
群馬県でPythonを使ったAIやソフトウェアを開発している株式会社ファントムが運営しています。
メーリングリストに登録するとファントムの最新情報をお届けします
お客様のメールアドレスを共有することはありません
Comments
[…] DjangoとChannelsで簡単なチャットサーバーを構築(2) […]