回答編集履歴
7
test
CHANGED
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
【エラーの原因】
|
|
27
27
|
おそらく、main.jsの冒頭1行目以降が、chat.html内要素のレンダリング前に実行されているため、g_elementInputUserName などのグローバル変数は null を保持してしまっているのでしょう。
|
|
28
28
|
|
|
29
|
-
【
|
|
29
|
+
【修正の検討】
|
|
30
30
|
では、`window.onload =～`等に、グローバル変数（g_***）への値代入処理部分を入れてしまえばよいのでは、と思われるかもしれませんが、これでは解決しません。
|
|
31
31
|
|
|
32
32
|
なぜならば、たとえレンダリング後に document.getElementById を行い、entrance.html内の要素内の値や、webソケットオブジェクト（g_socket）を適切に取得できたとしても、chat.htmlにページが遷移したら、staticフォルダから同じ内容のmain.js が新規に読み込まれ、それまで保持していたグローバル変数にはアクセスできなくなるからです。
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
したがって、修正案として次のようなアプローチが考えられます。
|
|
37
37
|
・entrance.html で入力したusername と roomname は、フォームデータの形で サーバーに送信する。
|
|
38
38
|
・サーバーは、受け取った username と roomname を設定した chat.html を返す。
|
|
39
|
-
・クライアント側でのwebソケットの管理はchat.html内のjsだけで
|
|
39
|
+
・クライアント側でのwebソケットの管理はchat.html内のjsだけで行う。（entranceとchatの２ベージでmain.jsを使い回さない）
|
|
40
40
|
注：下記は元コードからの変更を少なくするため、最適化されていません。文字数の都合上、不要なログ表示やコメントを削除していますが、修正に影響のない部分のコードはそのまま残しています。
|
|
41
41
|
|
|
42
42
|
----
|
|
43
43
|
|
|
44
44
|
・**entrance.html**
|
|
45
|
-
-> フォームとしてusernameとroomnameをsubmitします。
|
|
45
|
+
-> フォームとして username と roomname を submit します。
|
|
46
46
|
```html
|
|
47
47
|
{% extends 'chat/base.html' %}
|
|
48
48
|
{% load static %}
|
|
@@ -70,8 +70,9 @@
|
|
|
70
70
|
```
|
|
71
71
|
|
|
72
72
|
・**chat.html**
|
|
73
|
-
->
|
|
73
|
+
-> views.py から受け取った username、room を input に表示するとともに、
|
|
74
|
-
|
|
74
|
+
main.jsの内容の大半をこちらの中のscriptに移行。
|
|
75
|
+
onopen() の中でチャット開始処理を行なっています。
|
|
75
76
|
```html
|
|
76
77
|
{% extends 'chat/base.html' %}
|
|
77
78
|
{% load static %}
|
|
@@ -97,7 +98,6 @@
|
|
|
97
98
|
<ul id="list_message"></ul>
|
|
98
99
|
</div>
|
|
99
100
|
</div>
|
|
100
|
-
|
|
101
101
|
</div>
|
|
102
102
|
<script>
|
|
103
103
|
|
|
@@ -114,13 +114,12 @@
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
function onsubmitButton_Send() {
|
|
117
|
-
console.log("Sendが実行されました")
|
|
118
117
|
let strMessage = document.getElementById("input_message").value;
|
|
119
118
|
if (!strMessage) {
|
|
120
119
|
return;
|
|
121
120
|
}
|
|
122
|
-
|
|
123
121
|
g_socket.send(JSON.stringify({ "message": strMessage }));
|
|
122
|
+
console.log("Sendが実行されました")
|
|
124
123
|
console.log(JSON.stringify({ "message": strMessage }))
|
|
125
124
|
document.getElementById("input_message").value = "";
|
|
126
125
|
return false;
|
|
@@ -150,8 +149,8 @@
|
|
|
150
149
|
{% endblock %}
|
|
151
150
|
```
|
|
152
151
|
・**base.html**
|
|
153
|
-
main.jsの内容はchat.html内に移したので読み込み部分を削除。main.js自体も不要なので削除
|
|
152
|
+
main.jsの内容はchat.html内に移したので、static ディレクトリからの読み込み部分を削除。（main.js自体も不要なので削除）
|
|
154
|
-
（main
|
|
153
|
+
（main.jsはstaticディレクトリ内に残しておき、上記chat.html内に書いたスクリプトに修正の上、下記main.jsの読み込み行をbase.htmlからchat.htmlに移してもよいと思います）
|
|
155
154
|
```diff
|
|
156
155
|
<body>
|
|
157
156
|
<!-- Optional JavaScript -->
|
6
test
CHANGED
|
@@ -193,6 +193,6 @@
|
|
|
193
193
|
django-channelsの公式チュートリアルには、URLでルームを分けるというアプローチでのコードが丁寧に解説されているので、そちらも参照されてはいかがでしょうか。
|
|
194
194
|
https://channels.readthedocs.io/en/stable/tutorial/index.html
|
|
195
195
|
|
|
196
|
-
|
|
196
|
+
検索すると、ログイン認証まで考慮した実践的なコードも見つかりました。
|
|
197
197
|
https://zenn.dev/y_k/articles/e8878460fff3d5aa1d1d
|
|
198
198
|
|
5
test
CHANGED
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
-------
|
|
191
191
|
元の記事のコードだと、１ページの中でentranceとチャットページを管理するようになっていましたが、それを無理やり２つに分けるとなると苦労しますね。
|
|
192
192
|
|
|
193
|
-
django-channelsの公式チュートリアルには、URLでルームを分けるコードが丁寧に解説されているので、そちらも参照されてはいかがでしょうか。
|
|
193
|
+
django-channelsの公式チュートリアルには、URLでルームを分けるというアプローチでのコードが丁寧に解説されているので、そちらも参照されてはいかがでしょうか。
|
|
194
194
|
https://channels.readthedocs.io/en/stable/tutorial/index.html
|
|
195
195
|
|
|
196
196
|
探せば、ログイン認証まで考慮した実践的なコードもありました。
|
4
test
CHANGED
|
@@ -172,7 +172,7 @@
|
|
|
172
172
|
```
|
|
173
173
|
|
|
174
174
|
・**views.py**
|
|
175
|
-
entranceからsubmitされたデータ（username, room）を、chat.htmlに
|
|
175
|
+
entranceからsubmitされたデータ（username, room）を、chat.htmlの各inputに設定します。
|
|
176
176
|
```py
|
|
177
177
|
(略)
|
|
178
178
|
def entrance(request):
|
3
test
CHANGED
|
@@ -70,8 +70,8 @@
|
|
|
70
70
|
```
|
|
71
71
|
|
|
72
72
|
・**chat.html**
|
|
73
|
-
entrance.html (view.py) から受け取った username、room を input に設定するとともに、
|
|
73
|
+
-> entrance.html (view.py) から受け取った username、room を input に設定するとともに、
|
|
74
|
-
onopen() の中でチャット開始処理を行なっています。
|
|
74
|
+
-> main.jsの内容の大半をこちらの中のscriptに移行。onopen() の中でチャット開始処理を行なっています。
|
|
75
75
|
```html
|
|
76
76
|
{% extends 'chat/base.html' %}
|
|
77
77
|
{% load static %}
|
|
@@ -150,7 +150,8 @@
|
|
|
150
150
|
{% endblock %}
|
|
151
151
|
```
|
|
152
152
|
・**base.html**
|
|
153
|
-
main.jsの内容はchat.html内に移したので読み込み部分を削除
|
|
153
|
+
main.jsの内容はchat.html内に移したので読み込み部分を削除。main.js自体も不要なので削除。
|
|
154
|
+
（main,jsはstaticディレクトリ内に残しておき、上記chat.html内に書いたスクリプトに修正の上、下記main.jsの読み込み行をbase.htmlからchat.htmlに移してもよいと思います）
|
|
154
155
|
```diff
|
|
155
156
|
<body>
|
|
156
157
|
<!-- Optional JavaScript -->
|
2
test
CHANGED
|
@@ -34,8 +34,9 @@
|
|
|
34
34
|
-----
|
|
35
35
|
|
|
36
36
|
したがって、修正案として次のようなアプローチが考えられます。
|
|
37
|
-
・entrance.html で入力したusername と roomname は、フォームデータの形で
|
|
37
|
+
・entrance.html で入力したusername と roomname は、フォームデータの形で サーバーに送信する。
|
|
38
|
-
・
|
|
38
|
+
・サーバーは、受け取った username と roomname を設定した chat.html を返す。
|
|
39
|
+
・クライアント側でのwebソケットの管理はchat.html内のjsだけで適切に行う。（entranceとchatの２ベージでmain.jsを使い回さない）
|
|
39
40
|
注：下記は元コードからの変更を少なくするため、最適化されていません。文字数の都合上、不要なログ表示やコメントを削除していますが、修正に影響のない部分のコードはそのまま残しています。
|
|
40
41
|
|
|
41
42
|
----
|
1
test
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
おそらく、main.jsの冒頭1行目以降が、chat.html内要素のレンダリング前に実行されているため、g_elementInputUserName などのグローバル変数は null を保持してしまっているのでしょう。
|
|
28
28
|
|
|
29
29
|
【解決案】
|
|
30
|
-
では、`window.onload =～`等に、
|
|
30
|
+
では、`window.onload =～`等に、グローバル変数（g_***）への値代入処理部分を入れてしまえばよいのでは、と思われるかもしれませんが、これでは解決しません。
|
|
31
31
|
|
|
32
32
|
なぜならば、たとえレンダリング後に document.getElementById を行い、entrance.html内の要素内の値や、webソケットオブジェクト（g_socket）を適切に取得できたとしても、chat.htmlにページが遷移したら、staticフォルダから同じ内容のmain.js が新規に読み込まれ、それまで保持していたグローバル変数にはアクセスできなくなるからです。
|
|
33
33
|
|