$$config title: chat js 결과자료 keywords: - IT - ... $$ #chat.js ```java //let username = sessionStorage.getItem('loginMemberNickName'); let username = prompt("아이디를 입력하세요"); let roomNum = 1; //let roomNum = prompt("채팅방 번호를 입력하세요"); document.querySelector("#username").innerHTML = username; const eventSource = new EventSource(`http://localhost:8234/chat/roomNum/${roomNum}`); // const eventSource = new EventSource("http://localhost:8234/sender/ssar/receiver/cos"); eventSource.onmessage = (event) => { const data = JSON.parse(event.data); if(data.sender === username){//로그인한 유저가 보낸 메시지 //파란박스(오른쪽) initMyMessage(data); }else{ initYourMessage(data); //회색(왼쪽) } } //파란박스(오른쪽) function getSendMsgBox(data){ let md = data.createdAt.substring(5,10); let tm = data.createdAt.substring(11,16); let convertTime = tm + " | " + md; return `

${data.msg}

${convertTime} / ${data.sender}

`; } //회색(왼쪽) function getReceiverMsgBox(data){ let md = data.createdAt.substring(5,10); let tm = data.createdAt.substring(11,16); let convertTime = tm + " | " + md; return `

${data.msg}

${convertTime} / ${data.sender}

`; } //내가 쓴 메시지 가져오기 function initMyMessage(data){ let chatBox = document.querySelector("#chat-box"); let sendBox = document.createElement("div"); sendBox.className = "outgoing_msg"; sendBox.innerHTML = getSendMsgBox(data); chatBox.append(sendBox); //스크롤 이동 document.documentElement.scrollTop = document.body.scrollHeight; } //상대가 쓴 메시지 가져오기 function initYourMessage(data){ let chatBox = document.querySelector("#chat-box"); let receivedBox = document.createElement("div"); receivedBox.className = "incoming_msg"; receivedBox.innerHTML = getReceiverMsgBox(data); chatBox.append(receivedBox); //스크롤 이동 document.documentElement.scrollTop = document.body.scrollHeight; } // 넘어온 값이 빈값인지 체크합니다. // !value 하면 생기는 논리적 오류를 제거하기 위해 // 명시적으로 value == 사용 // [], {} 도 빈값으로 처리 var isEmpty = function(value){ if( value == "" || value == null || value == undefined || ( value != null && typeof value == "object" && !Object.keys(value).length ) ){ return true; }else{ return false; } }; //대화입력 함수 function addMessage(){ let msgInput = document.querySelector("#chat-outgoing-msg"); //AJAX 채팅 메시지를 전송 let chat = { sender: username, roomNum: roomNum, msg: msgInput.value }; fetch("http://localhost:8234/chat",{ method: "post", //http post 메서드 (새로운 데이터를 write) body: JSON.stringify(chat), // JS -> JSON headers: { "Content-Type": "application/json; charset=utf-8" } }); msgInput.value=""; } //버튼으로 대화 입력 document.querySelector("#chat-outgoing--button").addEventListener("click",()=>{ addMessage(); }); //엔터로 대화 입력 document.querySelector("#chat-outgoing-msg").addEventListener("keydown",(e)=>{ if(e.keyCode===13){ addMessage(); } }); ```