채팅기능 만들기 (서버와 실시간 소통 SSE)

저번에 까지 전송 버튼을 누르면 서버에 저장하게끔 코드를 작성했다. 

이제, 채팅방을 누르면 메세지를 보여줘야 한다. 근데 실시간으로 가져와야 한다.

2가지 방법이 있는데, 먼저, get요청을 1초마다 계속 날리는 방법이 있다. 이 방법은 요청이 많이지면 힘든 방법이다.

그래서, 실시간 소통채널을 여는 (Server Sent Event)라는 방법이 있다.

server.js에

app.get('/message/:id', 로그인했니, function(요청, 응답){
    응답.writeHead(200, { //Header을 설정해주세요 란 뜻
        "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
        	//찾은 결과는 오브젝트 형식임
    })
});

이렇게 입력하면 실시간 소통채널을 열 수 있다. 그리고 응답.write를 써서 데이터를 보낼 수 있다. 그리고 데이터를 보낼  때, db에서 부모요소가 채팅방의 id를 받아와서 그 id와 같은 데이터를 다 찾아서 (한 채팅방의 내용을 다 보여주어야 하므로)그 결과를 보내주면 되는데, 문자형식으로 보내주어야 하므로 JSON.stringify에 담아서 보내주면 된다.

 

이제 유저가 데이터 수신을 하려면 new EventSource('/경로')을 이용하면 된다.

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

	eventSource = new EventSource('/message/' + 지금누른채팅방id)//실시간 소통채널 입장
	eventSource.addEventListener('test', function(e){
		console.log(JSON.parse(e.data)) //서버에서 보낸 데이터 JSON.parse로따옴표를 제거서 받음
	})
})

함수 밖에 변수를 선언해서 여러 함수에서도 사용가능하게 만들고, 채팅방을 클릭하면 /messgae라는 주소로 소통채널을 입장하는데 URL 파라미터를 이용해 채팅방을 누르면 그 채팅방의 id가 나오게 한다. 그리고, addEventListner을 붙여서 데이터이름을 적어주고 함수에 파라미터로 e.data하면 서버에서 보낸 데이터가 나오게 하는데, JSON.parse에 넣어서 따옴표를 제거해주고 사용하면 된다.

if (eventSource != undefined) {
          eventSource.close()
}

eventSource = new EventSource('/message/' + 지금누른채팅방id)//실시간 소통채널 입장
eventSource.addEventListener('test', function(e){
console.log(JSON.parse(e.data)) //서버에서 보낸 데이터 따옴표를 제거서 받음

만약, 실시간 소통을 끄고 싶다면, eventSource가 undefined가 아니라면 닫아주세요 라고 작성하면 된다. 그러면, 같은 채팅방을 누를때마다 다시 생성이 아니라 채팅방이 생성되어 있으면 다시 생성하지 않는다.