こんにちは、

私はグエンです。

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 %}