지금 연습해보고 있는 채팅 페이지인데 도움 구합니다
본문
<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">×</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을 사용해서 그런것 같은데 어떻게 해결해야할지 모르겠습니다
어떻게 해야하는지 알 수 있을까요?
답변 2
<form ... onsubmit="return false"
시도해봤습니다!
리로드는 사라졌는데채팅 메시지가 바로바로 불러와지질 않네요 ㅜㅜ
답변 감사합니다
해결했습니다.. Ajax 문제였네요 ㅜㅜ
답변을 작성하시기 전에 로그인 해주세요.
