채팅기능 만들기 (DB변동사항 실시간 업데이트)

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

	eventSource = new EventSource('/message/' + 지금누른채팅방id)//실시간 소통채널 입장
	eventSource.addEventListener('test', function(e){
		var 가져온거 = JSON.parse(e.data) //서버에서 보낸 데이터 따옴표를 제거서 받음
		//동적으로 html생성하기
		
		for (let i = 0; i < 가져온거.length; i++) {
			var 템플릿 = `
				<li><span class="chat-box mine">${가져온거[i].content}</span></li>
			`;
			$('.chat-content').append(템플릿);
		}
	})
})

위처럼, 방을 누르면, 다른 방의 내용이 안뜨게 먼저 html을 지워주고 반복문을 이용해 가져온데이터 변수의 오브젝트 개수만큼 반복문을 돌려주며, 템플릿을 미리 만들고 append하는 방식으로 작성하면 된다. 여기서 html을 지울땐 실시간이 아니라 다른 방에 입장할때만 지워주게한다.

하지만,

메세지를 작성하고 전송버튼을 누르면 바로 채팅방에 뜨는 것이 아니라, 전송을 누르고 다시 채팅방을 눌러야 나온다. 이 문제는, DB가 업데이트 되면 자동으로 유저에게 보내주세요 라고 코드를 짜주면 된다.

원래 데이터는 수동적이지만 change stream이라는 mongodb의 기능을 이용해주면 가능하다.

app.get('/message/:id', 로그인했니, function(요청, 응답){
    응답.writeHead(200, {
        "Connection" : "keep-alive",
        "Content-Type" : "text/event-stream",
        "Cache-Control" : "no-cache",
    });//GET POST요청을 HTTP요청이라고도 부르는데, HTTP요청시 몰래 전달되는 정보들이 있다.
    //예를 들면, 유저의 언어, 브라우저정보, 가진쿠키 어디서왔나 이런 것들이 Header라는 공간 안에 담겨있다.
    //위처럼 입력하면 실시간 채널이 개설 됨 원랜 1회요청 1회응답만 가능한대 여러번 응답가능하다.
    db.collection('message').find({ parent : 요청.params.id }).toArray().then((결과)=>{
        응답.write('event: test\n');//데이터전송은 event: 보낼데이터이름\n
        응답.write('data: '+JSON.stringify(결과)+'\n\n')//data: 보낼데이터\n\n
        //찾은 결과는 오브젝트 형식임
    })

    const 찾을문서 = [//4. 여기선 꼭 fullDocument을 붙여서 name이 123을 찾아주세요임
        { $match: { 'fullDocument.parent' : 요청.params.id } }
    ];//3. message collection의 모든 문서를 감시할 필욘 없으니 원하는 문서를 적어준다.

      
    const changeStream = db.collection('message').watch(찾을문서);
    //1. .watch()를 붙이면 실시간 감시를 해줌

    changeStream.on('change', (result) => {
        //2. 그리고 변동사항이 생기면 이 안에 코드를 실행해준다.
        응답.write('event: test\n');
        응답.write('data: '+JSON.stringify([result.fullDocument])+'\n\n');//5. 결과출력
    });
    
});

하단에 const로 찾을문서라는 이름으로 어떤 문서를 감시할지 적어주고, 이때 fullDocument는 항상 붙여줘야 한다.

그리고 changeStream변수에 message라는 collection에서 찾을문서라는 변수를 감시하게 해주고,

change메소드로 변동사항이 생기면 데이터를 보내주면 된다. 이때도 result에 fullDocument를 붙이고, 데이터형태가 []안에 들어가 있는 형태들이라 []를 적어줘서 형태를 맞춰주면 된다.