Chat Room

<meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Anonymous_chat</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
        <style>
            .message {
                margin-bottom: 10px;
                color: black;
            }
            .username {
                font-weight: bold;
            }
            .content {
                margin-left: 10px;
                background-color: #f1f1f1;
                border-radius: 5px;
                padding: 5px 10px;
                display: inline-block;
            }
            .infor {
                animation-duration: 1s;
            }
            .form-container {
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
            }
            .message-container {
                max-height: 500px;
                overflow-y: auto;
                background-image: url('https://img0.baidu.com/it/u=1036678132,4112883738&fm=253&fmt=auto&app=138&f=JPEG?w=576&h=300');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                background-attachment: fixed;
                padding: 20px;
            }
            @media (max-width: 576px) {
                h1, h2 {
                    font-size: 1.5rem;
                }
            }
           textarea {
                resize: none;
               }

        </style>
        <h1 class="text-center mb-4">Chat Room</h1>
        <h2 style="color:grey; text-align: center;"> BY CHENCHEN.SITE</h2>
        <div id="messages" class="message-container mb-4"></div>
        <div class="form-container">
            <form id="message-form" class="form-inline">
                <div class="form-group mr-2 w-100 mt-2">
                    <input type="text" class="form-control w-100" id="username" name="username" placeholder="用户名">
                </div>
                <div class="form-group mr-2 w-100 mt-2">
                    <textarea class="form-control w-100" id="message" name="message" rows="3" placeholder="消息"></textarea>
                </div>
                <button type="submit" class="btn btn-primary mt-2">发送</button>
            </form>
        </div>
<script>
       let lastMessageID = 0;

$(document).ready(function() {
    load_messages();
    setInterval(load_messages, 5000);
});

function load_messages() {
    let range = lastMessageID ? 'latest' : null;
    var displayed_messages = [];

    $('#messages').children('.infor').each(function() {
        displayed_messages.push($(this).data('message-id'));
    });

    $.ajax({
        url: 'https://blog.chenchen.site/anonymous_chat/get_messages',
        type: 'POST',
        data: {
            range: range
        },
        success: function(response) {
            var messages = response;
            var message_container = $('#messages');
            for (var i = 0; i < messages.length; i++) {
                var message_id = messages[i][0];
                if ($.inArray(message_id, displayed_messages) === -1) {
                    var message_html = '<div class="infor animate__animated animate__fadeIn" data-message-id="' + message_id + '">';
                    message_html += '<div class="message" style="color:pink">';
                    message_html += '<span class="username">' + messages[i][1] + ': </span>';
                    message_html += '<span class="ip">' + messages[i][3] + '</span>';
                    message_html += '<span class="location">' + messages[i][4] + ': </span>';
                    message_html += '<span class="created_at">' + messages[i][5] + '</span>';
                    message_html += '</div>';
                    message_html += '<span class="content">' + messages[i][2].replace(/\n/g, '<br>') + '</span>'; // Add line breaks using <br> tag
                    message_html += '</div>';
                    message_container.append(message_html);
                    displayed_messages.push(message_id);
                    message_container.scrollTop(message_container[0].scrollHeight);
                }
                lastMessageID = message_id;
            }
        }
    });
}

$('#message-form').on('submit', function(event) {
    event.preventDefault();
    event.preventDefault();
    var username = $('#username').val();
    var message = $('#message').val();
    $.ajax({
        url: 'https://blog.chenchen.site/anonymous_chat/post_message',
        type: 'POST',
        data: {
            'username': username,
            'message': message
        },
        success: function(response) {
            $('#message').val('');
        }
    });
});

    </script>