[Node.js / MongoDB] 채팅 기능 만들기

💡 실습 포인트!

• 채팅 기능을 본격적으로 만들기 전에, 댓글 기능부터 추가해보았다.
• 사실 댓글과 채팅을 유사하다고는 생각해본 적이 없었는데, 실시간 소통이 가능하면 그게 바로 채팅 기능이 되는 것임을 수업을 통해 알 수 있었다.
• 다만, 아직 코드 수정이 필요한 부분이 많아, 일부만 블로그글로 게재했다.

---

💜 채팅 기능 만들기 전에

🤍 댓글 기능 구상해보기

• 게시물에 댓글을 추가하고 싶다면 댓글 발행 기능을 추가하면 된다.
• 따라서, DB 에 댓글을 저장할 collection 을 생성해두고, 웹 브라우저에서 POST 요청을 하면 해당하는 collection 에 저장해준다.
• 이 때, 유의할 점은 어느 게시물에 단 댓글인지 구별이 가능해야 한다는 것이다.
• 따라서 댓글을 저장할 때 부모 게시물의 정보도 같이 저장해서, 추후 댓글 collection 에서 댓글을 불러올 때 부모 게시물을 특정해서 불러올 수 있게 해주었다.

---

🤍 채팅 기능으로 생각 전환해보기

• 댓글이든 채팅이든 우선 어떤 게시물 혹은 어떤 채팅방(채팅상대)을 골라야 한다.
• 그리고 해당 게시물, 채팅방을 클릭했을 때, 댓글 혹은 채팅한 내용이 쭉 나와야 한다.
• 다만, 다른 부분이라면 채팅의 경우 새로고침 없이 실시간으로 이루어지므로 이에 걸맞는 실시간 업데이트 기능이 필요하다는 것이다. 

---

💜 채팅방 만들기 전 셋팅 및 가이드 확인

🤍 사용자 계정 생성하기

• 채팅방 기능을 만들기 전에, 시뮬레이션을 위해 다양한 사용자 계정을 생성하여 각 계정들로 로그인하여 게시물을 게재해두었다.

• 현실을 완벽하게 반영한 계정과 함께 할일들을 만들어주었다.
  • 맛집 블로그 링크를 보내면서 맛집 투어하자고 조르는 suin (suin - 대전 맛집 투어)
  • 안된다고 하면서 다 해결해주는 충남 담당 개발자 myeongsik (myeongsik - 충남 요청 처리)
  • 다짜고짜 웹툰 추천해준 대학생 때 만난 12년차 부산 친구 huigyeong (huigyeong - 웹툰 정주행) 

---

🤍 할일리스트 페이지 내 게시물의 채팅하기 버튼을 누르면 채팅방 개설하기

• 할일리스트 페이지 내 게시물의 채팅하기 버튼을 누르면 채팅방이 개설되어야 한다.
• 해당 기능은 아래의 가이드에 따라 진행해보았다.
  • 할일리스트 페이지에 있는 각각의 게시물 옆에 '채팅하기' 버튼을 만든다.
  • '채팅하기' 버튼을 누르면 채팅방 게시물이 생성되어 DB 에 저장된다. (chatroom collection 에 저장!)
  • 각 채팅방 게시물의 document 에 들어갈 정보는 다음과 같다. 

{
  member : [채팅 요청받은 사용자의 _id, 채팅 요청한 사용자의 _id],
  date : 현재 날짜,
  title : 채팅방이름
}

• 위와 같은 가이드에 따라 코드를 작성한 다음, 브라우저에서 로그인한 후에 리스트 페이지 내 게시물의 채팅하기 버튼을 눌렀을 때 chatroom collection 에 게시물 하나가 생성되면 끝!

---

🤍 사용자가 /chat 경로로 GET 요청을 하면 채팅 리스트 페이지 보여주기

• 사용자가 /chat 경로로 GET 요청을 하면 채팅리스트 페이지를 보여주고, 그 채팅리스트 페이지에는 로그인한 사용자가 속해있는 채팅방 게시물이 보여야 한다.
• 해당 기능은 아래의 가이드에 따라 진행해보았다.
  • 누군가가 /chat 경로로 GET 요청을 하면 채팅 리스트 파일을 브라우저로 보내준다.
  • 이 때, chatroom collection 에서 지금 로그인한 사용자의 _id 가 들어있는 채팅방 게시물들을 찾는다.
  • 찾은 게시물들을 채팅 리스트 파일에 적용해준다.

---

💜 할일리스트 페이지에 있는 각각의 게시물 옆에 '채팅하기' 버튼을 만든다.

<a style="color: white; text-decoration: none;" href="/chat">
	<button class="btn chat" style="background: gold;" 
             data-writer="<%= post[i].작성자 %>" 
             data-num="<%= post[i]._id %>" 
             data-todo="<%= post[i].할일 %>"
         >채팅하기</button>
</a>

• 할일리스트 EJS 파일에 작성자, 글번호, 할일 정보가 숨겨진 채팅하기 버튼을 추가해주었다.
  (강의에서는 작성자 부분만 가져왔는데, 나는 만들다가 다른 정보도 가져오면 좋을 것 같아서 추가한 것이므로 기호에 따라 필요한 정보만 숨겨서 가져오면 된다.)

 

• 원래는 '채팅하기' 버튼을 누르면 채팅방만 개설하는 것이 목표였는데, 채팅방만 개설되고 막상 채팅방으로 이동하지 않는 것이 불편해서, 이후에 a 태그로 /chat 경로를 연결해주었다.
• 이 때, 주의해야 할 점은 button 태그와 a 태그의 종속관계이다.
  (데이터 전송이 제대로 안 되는 원인이 이거인 줄 몰라서 한참을 헤맸다...ㅎ)
  • button 태그 안에 a 태그가 존재하는 경우에는 완벽하게 영역이 겹치지 않고 영역 크기의 차이가 발생한다.
  • 즉, a 태그의 영역이 button 태그의 영역에 포함되어 있기 때문에 정확하게 a 태그의 영역을 클릭하지 않으면 채팅 리스트 페이지로 이동하지 않는다.
  • 그리고 a 태그를 클릭해서 채팅 리스트 페이지로 막상 이동을 했을 때는 button 태그를 클릭한 걸로 인식이 되지 않아, button 태그의 정보가 DB 로 정상적으로 전송이 되지 않았다.
  • 그래서 a 태그와 button 태그의 위치를 바꾸어 a 태그 안에 button 태그를 넣어주었더니 영역 크기도 일치하고 두 기능 모두 정상적으로 작동했다. (정확한 원인 분석은 구글링을 해봐야 할 것 같다.)

 

---

💜 '채팅하기' 버튼을 누르면 채팅방 게시물이 생성되어 DB 에 저장되고, DB 에서 채팅 리스트 페이지로 채팅방 데이터를 가져온다.

  $('.chat').click(function(e){

    let writer = e.target.dataset.writer;
    let num = e.target.dataset.num;
    let todo = e.target.dataset.todo;

    $.post('/chatroom', {작성자 : writer, 글번호 : num, 할일 : todo}).then(()=>{
      console.log('성공했습니다.');
    })
  })

• '채팅하기' 버튼에 숨겨놨던 데이터들을 '채팅하기' 버튼을 눌러 /chatroom 경로로 POST 요청을 할 때 객체의 형태로 전송해주었다.

const {ObjectId} = require('mongodb');

app.post('/chatroom', doLogin, function(req, res){

    let saveData = {
        post : parseInt(req.body.글번호),
        title : req.body.할일,
        members : [ObjectId(req.body.작성자), req.user._id], // 글작성자와 채팅요청자
        date : new Date() // 현재 날짜
    }

    db.collection('chatroom').insertOne(saveData).then(()=>{
        res.send('채팅방 개설 완료')
    })
})

• 그러면 POST 요청을 할 때마다 JavaScript 파일에서 데이터들을 받아, chatroom collection 에 document 로 저장한다.
• 가이드에서 요구했던 document 양식에서 내가 필요로 하는 부분들을 조금 추가해서 작성했다.

app.get('/chat', doLogin, function(req, res){

    db.collection('chatroom').find({members : req.user._id}).toArray().then((result)=>{
        res.render('chat.ejs', {data : result})
    })
})

• 이제 /chat 경로로 GET 요청을 하면 chatroom collection 에 저장되어있던 document 들을 result 로 받아와서 data 라는 변수에 담겨 아래의 채팅 리스트 EJS 파일에 적용되어 렌더링된다.

<h4 class="container mt-5 mb-4"><strong>채팅 리스트</strong></h4>

<div class="container">
    <div class="row">
        <div class="col-3">
            <ul class="list-group chat-list">

                <% for (var i=0; i < data.length ; i++){ %>
                  <li class="list-group-item" data-id="<%= data[i]._id %>" data-writer="<%= data[i].members[0] %>">
                    <h6>글번호 : <%= data[i].post %> </h6>   
                    <h6>채팅방 : <%= data[i].title %> </h6>   
                    <h6 class="text-small"> <%= data[i].members[0] %> </h6>
                  </li>
                <% } %>

              </ul> 
        </div>
        <div class="col-9">
            <div class="chat-room">
                <ul class="list-group chat-content">
                </ul>
            </div>
            <div class="input-group">
                <input class="form-control" id="chat-input">
                <button class="btn btn-secondary" id="send">전송</button>
            </div>
        </div>
    </div>
</div>