그누보드 QA - 지금 연습해보고 있는 채팅 페이지인데 도움 구합니다

지금 연습해보고 있는 채팅 페이지인데 도움 구합니다

2021.11.22 13:58:16 4849 (220.♡.♡.127)

본문



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title th:text="${room_id}+'번방'"></title>

    <link type="text/css" rel="stylesheet" th:href="@{/css/room.css}">
    <link type="text/css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<div id="contentWrap">
    <div id="contentCover">
        <div id="roomWrap">
            <div id="roomList">
                <div id="roomHeader">MENU</div>
                <div id="roomSelect"></div>
                <div class="buttonList">
                    <button type="button" id="btn1" class="btn btn-default" onclick="location.href='/chat/main'">메인</button>
                    <button type="button" id="btn2" class="btn btn-default" onclick="location.href='/chat/list'">채팅</button>
                    <button type="button" id="btn3" class="btn btn-default" onclick="location.href='/chat/public'">공개 채팅</button>
                </div>
            </div>
        </div>
        <div id="chatWrap">
            <div id="chatHeader"><span th:text="${room_id}+'번 방 - '+${room_name}"></span></div>
            <div id="chatLog">
                <div class="anotherMsg">
                <!-- 다른 사람 메시지 -->

                </div>
                <div class="myMsg">
                <!-- 내 메시지 -->

                </div>
            </div>
            <form id="chatForm">
                <input type="text" autocomplete="off" size="30" id="chatContent" placeholder=" 메시지를 입력하세요">
                <input type="submit" onclick="submitMessage()" value="보내기">
            </form>
        </div>


        <div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="vertical-alignment-helper">
                <div class="modal-dialog vertical-align-center">
                    <div class="modal-content">

                        <div class="modal-header panel-heading">
                            <button type="button" class="close" data-dismiss="modal">
                                <span aria-hidden="true">&times</span>
                                <span class="sr-only">Close</span>
                            </button>
                            <h4 class="modal-title">

                            </h4>
                        </div>

                        <div class="modal-body">

                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">확인</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div id="memberWrap">
            <div id="memberList">
                <div id="memberHeader">
                    MEMBER LIST
                </div>
                <div id="memberSelect">

                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    function submitMessage() {
        let room_id = [[${room_id}]];
        let id = '[[${id}]]';
        let chat_content = $('#chatContent').val();
        let file_url = null;
        let chat_type = "text";
        let chatRoomContentDTO = {
            "room_id": room_id,
            "id": id,
            "chat_content": chat_content,
            "file_url": file_url,
            "chat_type": chat_type
        };


        $.ajax({
            type: "POST",
            url: "/chat/submit_message",
            data: JSON.stringify(chatRoomContentDTO),
            contentType: "application/json; charset=utf-8;"
        })

        $('#chatContent').val(''); // 내용 초기화
    }


    let last_msg = 0;
    let first_load = 0;
    function loadMessage(get_msg) {
        let room_id = '[[${room_id}]]';
        let id = '[[${id}]]';
        let chatRoomContentDTO = {
            "room_id": encodeURIComponent(room_id),
            "id": encodeURIComponent(id)
        };
        $.ajax({
            type: "POST",
            url: "/chat/load_message",
            data: JSON.stringify(chatRoomContentDTO),
            dataType: "json",
            contentType: "application/json; charset=utf-8;",
            success: function(data) {
                if(data == "") return;
                //let result = data.result;
                get_msg = Number(data.last);

                if(last_msg < data.length) {
                    for(let i = 0; i < data.length; i++) {
                        if(data.length > 0) {
                            addChatHtml(data[i].id, data[i].chat_content, data[i].chat_date);
                        }
                    }
                }
                last_msg = Number(data.last);
            }
        })
    }

    function addChatHtml(id, content, time) {
        let myID = '[[${id}]]';

        if(myID == id) {
            $('.myMsg').append(
                '<div class="">' +
                '<p>' + id +'('+ time +')'+ '</p>' +
                '<p>' + content + '</p>' +
                '</div>'
            );
        } else {
            $('.anotherMsg').append(
                '<div>' +
                '<p>' + id +'('+ time +')'+ '</p>' +
                '<p>' + content + '</p>' +
                '</div>'
            );
        }
        $('#chatLog').scrollTop($('#chatLog')[0].scrollHeight);
    }

    function getInfiniteChatLoad() {
        setInterval(function (){
            loadMessage(last_msg);
        }, 300);
    }
</script>

<script type="text/javascript">
    $(document).ready(function () {
        getInfiniteChatLoad();
    })
</script>
</html>

지금 만들고 있는 채팅페이지인데 db연동까지 다 끝마친 상태입니다

그런데 텍스트를 치고 엔터키나 버튼을 누르면 새로고침이 되네요;;

아마 form을 사용해서 그런것 같은데 어떻게 해결해야할지 모르겠습니다

어떻게 해야하는지 알 수 있을까요?