change stream 기능을 이용하면 DB 변동사항을 서버로 알려준다.
MongoDB는 이런 기능으로 실시간 서비스를 제작할 때 편리하지만, 만약 다른 관계형 DB를 사용하는 경우에는 "binlog"나 "CDC"같은 것들을 찾아보자
✨change stream 사용 방법
- 서버에 아래처럼 기본 코드 써놓고 시작하자
let 찾을문서 = [
{ $match: { fullDocument.name : 123 } }
]
const changeStream = db.collection('post').watch(찾을문서)
changeStream.on('change', (result) => {
console.log(result)
});db.collection('콜렉션명').watch()를 사용하면 해당 콜렉션을 감시해준다.
.on()은 이벤트리스너 같은 개념인데, changeStream이라는 변수에 담았으니, 지금같은 경우에 post에 수정/삭제/발행 등의 DB 변동사항이 생기면 result를 콘솔에 찍어 확인해볼 수 있다.
만약 방금 추가된 document의 내용이 궁금하면,
콘솔에 보면 fullDocument에 들어있으니
console.log(result.fullDocument);라고 작성해서 테스트해보면
이렇게 잘 나온다.
특정 경우에만 감지하고 싶다면,
.watch()에 조건을 걸어줄 수 있다.
해당 operationType에 변동이 어떻게 일어났는지 찍혀있으니 이를 이용해 조건 변수를 만들어 watch에 넣어주자.
만약 title에서 "바보"라는 title을 가진 document만 감지하고 싶은 경우
let 조건 = [{ $match: { 'fullDocument.title': "바보" } }]; 이렇게 따옴표 안에 작성해주면 잘 감지할 수 있다.
우선 insert 되는 것만 감지하려면 다시 아래처럼 작성해주자.
let 조건 = [
{ $match: { operationType: 'insert' } }
]조건을 이런 식으로 작성해주고,
- 원래 원하던 기능이었던 DB에 글 발행될 때마다 유저에게 보내기 위해서,
테스트로 넣어둔 console.log를 빼고 위에서 작성해뒀던 응답.write를 넣어주자.
응답.write 안에 object나 array 자료형을 넣어주려면 JSON으로 변경해서 넣어주어야 정상적으로 동작한다.
응답.write(`data: ${JSON.stringify(result.fullDocument)}\n\n`);이런 식으로!
- 이후 크롬 창 2개를 띄워 하나는 콘솔창을 열어두고, 다른 하나로 글을 작성해보니
새로고침을 하지 않아도 잘 받아오고 있다.
- 그럼 이제 해당 값을 뿌려줄 html이 필요하니 ejs파일로 넘어가서
현재list.ejs에 새로 글이 올라오면
white-bg 안에 list-box가 하나 새로 생성되면 좋을 것 같다.
이렇게만 하고 보니
undefined가 출력된다..
3번에서 콘솔에 찍혀있었던 결과를 생각해보면,
""따옴표 안에 있는 걸 보니 JSON을 변환해주어야하는 모양
let 가져온값 = JSON.parse(e.data)를 사용해서 해당 변수를 넣어주면
바로 불러와진다!
- 현재는 GET 요청할 때마다 아래 코드들을 실행하고 있는데,
해당 두 줄을 서버 띄우는 부분에 넣어주자
+) changeStream은 아래에서도 쓰이기때문에 상단에 변수로 빼준다
