chat.html
<!DOCTYPE html>
<html>
<head>
<title>What's App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="user_chat_data" class="user_chat_data">
<div class="profile_name">
<img src="./img/profile.png" class="mr-3 rounded-circle"> Sankar
Mahadevan</div>
<div class="container-fluid chat_section" id="chat-box">
<!-- 받은메시지 시작 -->
<div class="incoming_msg">
<div class="received_msg">
<div class="received_withd_msg">
<p>Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when
the real text is not </p>
<span class="time_date"> 11:18 | Today</span>
</div>
</div>
</div>
<!-- 받은메시지 끝 -->
<!-- 보낸메시지 시작 -->
<div class="outgoing_msg">
<div class="sent_msg">
<p>Lorem Ipsum refers to text that the DTP (Desktop Publishing) industry use as replacement text when
the real text is not </p>
<span class="time_date"> 11:18 | Today</span>
</div>
</div>
<!-- 보낸메시지 끝 -->
</div>
<div class="type_msg">
<div class="input_msg_write">
<input id="chat-outgoing-msg" type="text" class="write_msg" placeholder="Type a message" />
<button id="chat-send" class="msg_send_btn" type="button"><i class="fa fa-paper-plane"
aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/chat.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>chat.js
const eventSource = new EventSource("http://localhost:8080/sender/ssar/receiver/cos");
eventSource.onmessage = (event) => {
console.log(1,event);
const data = JSON.parse(event.data);
console.log(2,data);
initMessage(data);
}
function getSendMsgBox(msg, time) {
return `<div class="sent_msg">
<p>${msg}</p>
<span class="time_date"> ${time} </span>
</div>`;
}
function initMessage(data) {
let chatBox = document.querySelector("#chat-box");
let msgInput = document.querySelector("#chat-outgoing-msg");
// alert(msgInput.value);
let chatOutgoingBox = document.createElement("div");
chatOutgoingBox.className = "outgoing_msg";
// 내가 짠 코드
function dateFormat(savedtime) {
let pasttime = new Date(savedtime);
return pasttime.getHours()+":"+pasttime.getMinutes()+"|"+pasttime.getMonth()+"/"+pasttime.getDate();
}
chatOutgoingBox.innerHTML = getSendMsgBox(data.msg, dateFormat(data.createdAt));
chatBox.append(chatOutgoingBox);
msgInput.value="";
}
async function addMessage() {
let chatBox = document.querySelector("#chat-box");
let msgInput = document.querySelector("#chat-outgoing-msg");
// alert(msgInput.value);
let chatOutgoingBox = document.createElement("div");
chatOutgoingBox.className = "outgoing_msg";
let date = new Date();
let now = date.getHours()+":"+date.getMinutes()+"|"+date.getMonth()+"/"+date.getDate();
let chat = {
sender: "ssar",
receiver: "cos",
msg: msgInput.value
}
let response = await fetch("http://localhost:8080/chat", {
method: "post", //http post 메서드(새로운 데이터를 write)
body: JSON.stringify(chat), // JS->JSON
headers: {
"Content-Type":"application/json;charset=utf-8"
}
});
console.log(response);
let parseResponse= await response.json();
console.log(parseResponse);
chatOutgoingBox.innerHTML = getSendMsgBox(msgInput.value,now);
chatBox.append(chatOutgoingBox);
msgInput.value="";
}
document.querySelector("#chat-send").addEventListener("click", ()=>{
// alert("클릭됨");
addMessage();
});
document.querySelector("#chat-outgoing-msg").addEventListener("keydown", (e)=>{
console.log(e.keyCode);
if(e.keyCode == 13) {
// alert("클릭됨");
addMessage();
}
});
공부일기