chat.ejs 입니다 한번 봐주세요
<!doctype html>
<html >
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="/public/main.css">
<div class="container p-4 detail">
<div class="row">
<div class="col-3">
<ul class="list-group-item chat-list">
<% for (var i=0; i < data.length ; i++){ %>
<li class="list-group-item" data-id="<%= data[i]._id %>">
<h6> <%= data[i].title %> <%= data[i]._id %></h6>
<h6 class="text-small"> 부 모<%= data[i].member[0] %> </h6>
<h6 class="text-small"> 로그인<%= data[i].member[1] %> </h6>
</li>
<% } %>
</ul>
</div>
<div class="col-9 p-0">
<div class="chat-room">
<ul class="list-group chat-content">
<li><span class="chat-box">채팅방1 내용</span></li>
<li><span class="chat-box">채팅방1 내용</span></li>
<li><span class="chat-box mine">채팅방1 내용</span></li>
</ul>
<div class="input-group">
<input class="form-control" id="chat-input">
<button class="btn btn-secondary" id="send">전송</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var 지금누른채팅방id;
var eventSource;
$('.list-group-item').click(function(){
지금누른채팅방id = this.dataset.id;
eventSource = new EventSource('/message/' );
eventSource.addEventListener('test', function (e){
console.log(e.data);
})
$('#send').click(function(){
var 채팅내용 = $('#chat-input').val();
var 보낼거 = {
parent: 지금누른채팅방id,
content: 채팅내용,
};
$.post('/message', 보낼거).then(() => {
console.log(전송성공)
});
});
</script>
</html>
