こんにちは、
私はグエンです。
Djangoでシンプルなチャトサイトを作ってみます。
問題点がありました。解決方法がご存知でしたら、ご教示頂けないでしょうか。
詳細は以下に記載致します。
日本語のROOMを選択すると、ブラウザの上でURLがROOMのIDを表示したいです。
IIS 本番環境で日本語のROOMを選択すると、エラーが発生しました。
英語や数字のROOMは特に問題なし。
問題として、ブラウザの上にURLが日本語になってるので、エラーが発生しました。
ちなみに、ローカルのIIS 環境で日本語のROOMを選択しても、問題がなく、入れました。
https://www.flickr.com/photos/195350134@N06/shares/6LB04W
https://www.flickr.com/photos/195350134@N06/shares/126vv6
■urls.py
from django.urls import path
from . import views
app_name = 'chat'
urlpatterns = [
path('', views.home, name='home'),
path('<str:room>/', views.room, name='room'),
path('checkview', views.checkview, name='checkview'),
path('send', views.send, name='send'),
path('getMessages/<str:room>/', views.getMessages, name='getMessages'),
]
■models.py
from django.db import models
from datetime import datetime
from django.utils import timezone
# Room
class Room(models.Model):
name = models.CharField(max_length=100)
class Meta:
managed = False
db_table = 'Room'
# Message
class Message(models.Model):
value = models.CharField(max_length=4000)
date = models.DateTimeField(default=timezone.now, blank=True)
user = models.CharField(max_length=100)
room = models.CharField(max_length=100)
class Meta:
managed = False
db_table = 'Message'
■views.py
from django.shortcuts import render, redirect
from chat.models import Room, Message
from django.http import HttpResponse, JsonResponse
# 2021/10/05 グエン MOD START
# def home(request):
# return render(request, 'home.html')
def home(request):
room_data = Room.objects.order_by('id')
user_data = Message.objects.all()
return render(request, 'home.html', {
'room_data': room_data,
'user_data': user_data
})
# 2021/10/05 グエン MOD END
def room(request, room):
username = request.GET.get('username')
# 2021/10/05 グエン MOD START
room_data = Room.objects.order_by('id')
# 2021/10/05 グエン MOD END
# 2021/09/28 グエン mod Start
# room_details = Room.objects.get(name=room)
try:
room_details = Room.objects.get(name=room)
except Room.DoesNotExist:
room_details = None
# 2021/09/28 グエン mod End
return render(request, 'room.html', {
'username': username,
'room': room,
'room_details': room_details,
# 2021/10/05 グエン MOD START
'room_data' : room_data
# 2021/10/05 グエン MOD END
})
def checkview(request):
# 2021/10/05 グエン MOD START
# room = request.POST['room_name']
# username = request.POST['username']
room = request.POST.get('room_name')
username = request.POST.get('username')
# 2021/10/05 グエン MOD END
if Room.objects.filter(name=room).exists():
return redirect('/'+room+'/?username='+username)
else:
new_room = Room.objects.create(name=room)
new_room.save()
return redirect('/'+room+'/?username='+username)
def send(request):
message = request.POST['message']
username = request.POST['username']
room_id = request.POST['room_id']
new_message = Message.objects.create(value=message, user=username, room=room_id)
new_message.save()
return HttpResponse('Message sent successfully')
def getMessages(request, room):
room_details = Room.objects.get(name=room)
messages = Message.objects.filter(room=room_details.id)
return JsonResponse({"messages":list(messages.values())})
■HTML & JS
{% extends 'chat_base.html' %}
{% load static %}
{% block contents %}
{# 2021/10/05 グエン ADD START ※左側にRoomリスト表示の為 #}
<div align="center">
<img src="{% static 'img/chat_messages.ico' %}" width="70" height="70">
<h2>{{ room }} Django チャット</h2>
</div>
<div class="body_chat">
<div class="row">
<div class="col">
<div class="body-content">
<form id="post-form" method="POST" action="checkview">
{% csrf_token %}
<h3>List Room</h3>
{% for room in room_data %}
<p style="margin-left:20px;">
<a href="{% url 'chat:home' %}{{ room.name }}/?username={{ username }}">{{ room.name }}</a>
</p>
{% endfor %}
</form>
</div>
</div>
<div class="col-9">
<div id="display"></div>
<div class="container">
<form id="post-form">
{% csrf_token %}
<p>{{ username }}さん</p>
<input type="hidden" name="username" id="username" value="{{username}}"/>
<input type="hidden" name="room_id" id="room_id" value="{{room_details.id}}"/>
<input type="text" name="message" id="message" width="100px" />
<input type="submit" id="send" value="送信">
</form>
</div>
</div>
</div>
<script>
$(document).ready(function(){
setInterval(function(){
$.ajax({
type: 'GET',
url : "/getMessages/{{room}}/",
success: function(response){
console.log(response);
$("#display").empty();
for (var key in response.messages)
{
var temp="<div class='container darker'><b>"+response.messages[key].user+"さん</b><p>"+response.messages[key].value+"</p><span class='time-left'>"+response.messages[key].date+"</span></div>";
$("#display").append(temp);
}
},
error: function(response){
alert('エラーが発生しました。')
}
});
},1000);
})
</script>
{% comment %} <script src="{% static 'Scripts/chat.js' %}?time=202110050930"></script> {% endcomment %}
<script type="text/javascript">
$(document).on('submit','#post-form',function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'/send',
data:{
username:$('#username').val(),
room_id:$('#room_id').val(),
message:$('#message').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
},
success: function(data){
//alert(data)
}
});
document.getElementById('message').value = ''
});
</script>
</div>
{# 2021/10/05 グエン ADD END ※左側にRoomリスト表示の為 #}
{% endblock %}
URLに日本語を使うのではなく、id(uuid)を使うようにして、そのidから名前などを引っ張って来るのがいいかと思います。