채팅기능 만들기 (채팅방만들기)

채팅기능도 게시물 발행과 똑같다. 그저 내용을 발행해주면 된다. 그리고 대부분의 기능들도 각각의 정보를 발행시켜주는 것이라 게시물 발행과 근본적으로 같다. 

채팅기능 +로

1. 게시물간 관계맺기

2. DB실시간 업데이트

이 두개를 더해야 한다.

이제, 종속관계에 대해 알아보자

댓글기능을 예를 들어 알아보자. 댓글기능은 채팅기능과 같은데 실시간만 추가되었을 뿐이다.

댓글은 단독으로 존재할 수 없고, 해당글에 달린 댓글을 구별해야 한다. 즉, 어디에 달린 댓글인지 알아야한다. 이걸 관계맺는다고 표현하다.

이처럼 게시물간의 종속관계를 표현하고 싶을 때 부모정보까지 같이 저장하면 된다.

 

먼저,

<button class="btn btn-warning chat" data-id="<%= posts[i].작성자 %>">채팅하기</button>

채팅하기란 버튼을 만들고, ajax요청을 통해 서버로 보내보자

$('.chat').click(function(e){
        var id = e.target.dataset.id;

        $.ajax({
          method : 'POST',
          url : '/chatroom',
          data : {당한사람id : id}
        }).done(function(결과){
          console.log('성공')
        })
})

클릭한 게시물의 작성자 id를 변수에 담아서 /chatroom으로 POST요청할 때 당한사람id로 같이 보내준다.

그리고 server.js에서

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

app.post('/chatroom', 로그인했니, function(요청, 응답){
    
        var 날짜 = new Date();
        var 저장할거 = { member : [ObjectId(요청.body.당한사람id), 요청.user._id], 
        		date : 날짜, 
        		title : '채팅방이름' }
        db.collection('chatroom').insertOne(저장할거,function(에러, 결과){
            
        })
})

/chatroom에 post요청을 하면 db의 chatroom이란 collection에 저장해주면 된다. 저장할 데이턴 변수로 담았고, 

요청.body.당한사람id는 오브젝트id로 안나와서 상단에 mongodb에서 ObjectId를 가져와 사용했다.

 

그리고 chat.ejs라는 html을 만들고, server.js에 get요청을 해주었다. get요청을 할 때, 개설된 채팅방을 모두 보여주어야 하므로, db에서 유저의 id가 member에 들어가있는 방을 찾아서 띄워준다.

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

    db.collection('chatroom').find({ member : 요청.user._id }).toArray().then((결과)=>{
        console.log(결과);
        응답.render('chat.ejs', { data : 결과 });
    })
});

그리고, chat.ejs을 렌더링하면서 결과를 data란 변수에 보내고, chat.ejs에서

<div class="col-3">
            <ul class="list-group chat-list">
              <% for( let i = 0; i < data.length; i++ ) { %>
                <li class="list-group-item">
                  <h6><%= data[i].title %></h6>
                  <h6 class="text-small"><%= data[i].date %></h6>
                </li>
              <% } %>
             </ul>
</div>

반복문을 써주면 자동으로 data에 있는 오브젝트의 개수만큼 채팅방이 개설된다.

 

마지막으로, list.ejs에서 채팅하기 버튼을 클릭해서 ajax로 서버에 전송 성공하면, /chat으로 이동하게끔

$('.chat').click(function(e){
        var id = e.target.dataset.id;
        
        $.ajax({
            method : 'POST',
            url : '/chatroom',
            data : { 당한사람id : id }
        }).done(function(결과){
            console.log('성공');
            location.href = "/chat";
        }).fail(function(xhr, textStatus, errorThrown){
              alert('에러')
        })
})

수정해주면 된다.!