채팅기능 만들기 (메시지 발행)

<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>

input태그에 글을 써서 댓글을 다는 것도 게시물 발행과 같다. 우선 html을 짜고 전송버튼을 눌렀을 때 서버로 보낼 데이터를 정리해보자.

var 지금누른채팅방id; //변수가 밖에 있으니 함수들안에도 사용가능
$('.list-group-item').click(function(){
	지금누른채팅방id = this.dataset.id;
	})

$('#send').click(function(e){
 	//당한id, 부모요소, 내id, content, date
	var 보낼거 = {
		parent : 지금누른채팅방id,//보통 카톡도 채팅방부터 클릭하고 메세지 작성함
		content: $('#chat-input').val(),
	}
	$.post('/message', 보낼거).then(()=>{
		console.log('전송성공')
	})

send아이디를 가진 전송버튼을 클릭하면 /message경로로 post요청을 한다. 보낼 데이터는 

채팅을 당한 id(게시물주인), 유저의 id, 채팅방을 택할 부모요소, content, date정도가 있다.

보내야할 데이터만 보내주면, 부묘요소와 content가 있다. content는 input값을 넣으면 되며,

부모요소는, 카카오톡도 보면 채팅방을 클릭하면 방이 생성되며, 거기에 메세지를 작성하는 원리이므로, 미리 채팅방블럭에 data-id로 id를 심어놓고,

<li class="list-group-item" data-id="<%= data[i]._id %>">
                  <h6><%= data[i].title %></h6>
                  <h6 class="text-small"><%= data[i].date %></h6>
</li>

클릭하면 id를 this(현재 진행중인이벤트).dataset.id로 가져와 준다. 이때, 변수가 함수안에 있으면 다른 함수에 사용할 수 없으므로 변수는 함수밖에 만들고, 함수안에선 변수의 값만 변경해준다. 이제 서버로 가서 데이터를 저장해보자.

app.post('/message', 로그인했니, function(요청, 응답) {

    저장할거 = {
        parent : 요청.body.parent,
        content : 요청.body.content,
        userid : 요청.user._id,
        date : new Date()
    }
    db.collection('message').insertOne(저장할거).then(()=>{
        console.log('성공');
        응답.send('DB저장성공');
    }).catch(()=>{
        console.log('실패');
    }) 
});

/message라는 경로로 post요청을 하면 db에 데이터를 넣어야하는데, 어떤 데이터냐면, ajax에서 받아온 parent와 content를 넣고, user의 id를 넣어주고, 날짜를 넣어준다. 그리고 then을 이용해 성공하면 성공을 보내주고, catch를 이용해 실패 시 코드를 띄어준다.

여기까지하면, 채팅방에 실시간으로 뜨는 것은 아니지만, 전송버튼을 누르면 MongoDB에 저장이 된다.