質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

Django, Channelsを使ったチャットアプリでのエラー"WebSocket is already in CLOSING or CLOSED state."

kota0525
kota0525

総合スコア0

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

0クリップ

20閲覧

投稿2019/11/13 02:16

djangoのchannelsを使ってチャットアプリを作っています。
こちらの動画を参考にして、データベースを使ったチャットを作ろうとしていた時にエラーが出ました。

【セットアップ】

OS: MacOSX 10.15.1
browser: Chrome 78.0.3904.87
Python: 3.74
Django: 2.2.6
channels: 2.3.1

【状況】

下記のコードで作ったアプリで、新しくメッセージを打つと、
入力したメッセージに続いて、空のメッセージが無限に出続けます。

【エラー】

ChromeのConsoleで確認したところ、下のエラーを無限に出していました。

WebSocket is already in CLOSING or CLOSED state.
【やったこと】

・FireFoxでも試しましたがダメでした。
・WebSocketをこちらのReconnectingWebSocketを使っていたので、一度ChannelsTutorial通りのWebSocketを使って試しましたがダメでした。

【コード】

tree

├── chat │ ├── __init__.py │ ├── __pycache__ │ ├── admin.py │ ├── apps.py │ ├── consumers.py │ ├── migrations │ ├── models.py │ ├── routing.py │ ├── static │ │ └── chat │ │ ├── main.js │ │ ├── reconnecting-websocket.js │ │ └── style.css │ ├── templates │ │ └── chat │ │ ├── index.html │ │ ├── room.html │ ├── tests.py │ ├── urls.py │ └── views.py

html

<!-- room.html --> <div class="messages"> <ul id="chat-log"> <li class="sent"> <img src="" alt="dummy" /> <p>dummy</p> </li> <li class="replies"> <img src="" alt="dummy" /> <p>dummy</p> </li> </ul> </div> <div class="message-input"> <div class="wrap"> <input id="chat-message-input" type="text" placeholder="Write your message..." /> <i class="fa fa-paperclip attachment" aria-hidden="true"></i> <button id="chat-message-submit" class="submit"> <i class="fa fa-paper-plane" aria-hidden="true"></i> </button> </div> </div>

javascript

// room.html <script> var roomName = {{ room_name_json }}; var username = {{ username }}; var chatSocket = new ReconnectingWebSocket( 'ws://' + window.location.host + '/ws/chat/' + roomName + '/'); chatSocket.onmessage = function(e) { var data = JSON.parse(e.data); var message = data['message']; var author = message['author']; var msgListTag = document.createElement('li'); var imgTag = document.createElement('img'); var pTag = document.createElement('p'); pTag.textContent = message.content; imgTag.src = 'https://emilcarlsson.se/assets/mikeross.png'; if (author === username) { msgListTag.className = 'sent'; } else { msgListTag.className = 'replies'; } msgListTag.appendChild(imgTag); msgListTag.appendChild(pTag); document.querySelector('#chat-log').appendChild(msgListTag); }; 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({ 'command': 'new_message', 'message': message, 'from': username })); messageInputDom.value = ''; }; </script>

python

# consumers.py class ChatConsumer(WebsocketConsumer): def fetch_messages(self, data): messages = Message.last_10_messages() content = { 'messages': self.messages_to_json(messages) } self.send_message(content) def new_message(self, data): author = data['from'] author_user = User.objects.filter(username=author)[0] message = Message.objects.create( author=author_user, content=data['message']) content = { 'command': 'new_message', 'message': self.message_to_json(message) } return self.send_chat_message(content) def messages_to_json(self, messages): result = [] for message in messages: result.append(self.messages_to_json(message)) return result def message_to_json(self, message): return { 'author': message.author.username, 'content': message.content, 'created_at': str(message.created_at) } commands = { 'fetch_messages': fetch_messages, 'new_message': new_message } def connect(self): self.room_name = self.scope['url_route']['kwargs']['room_name'] self.room_group_name = 'chat_%s' % self.room_name async_to_sync(self.channel_layer.group_add)( self.room_group_name, self.channel_name ) self.accept() def disconnect(self, close_code): async_to_sync(self.channel_layer.group_discard)( self.room_group_name, self.channel_name ) def receive(self, text_data): data = json.loads(text_data) self.commands[data['command']](self, data) def send_chat_message(self, message): async_to_sync(self.channel_layer.group_send)( self.room_group_name, { 'type': 'chat_message', 'message': message } ) def send_message(self, message): self.send(text_data=json.dumps(message)) def chat_message(self, event): message = event['message'] self.send(text_data=json.dumps(message))

WebSocket、Javascriptについての予備知識がなく、手出しが出来ないため困っております。
お力添えをお願いいたします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Python 3.x

Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。