[팀프로젝트] 15일차 - Sse를 이용해 실시간 알림기능 구현2

 

이전에 공부했던 Server-sent-event 방식의 HTTP통신을 활용하여 메신저가 도착하면, 실시간 알림을 전송하는 기능을 구현했다.

 

 

 

다음 클래스는 서버에서 클라이언트로 이벤트 전송시, 알림에 대한 정보를 담아둔 객체이다.

해당 객체의 멤버로  알림 내용에 메시지정보를 담은 MsgDto와 알림 전송 시간을 추가하였다.

그리고, 클라이언트에서 eventSource.addEventListener를 통해 서버가 보내온 이벤트 데이터들을

자유롭게 꺼내쓸수있도록 JSON형식으로 변환시켜주는 작업이 필요하다.

 

 

 

해당 작업은 서버단에서 클라이언트로 이벤트를 전송하는 NotifycationService클래스의 sendToclient 메소드에서 Notification을 비롯해서 event 안에 담아둘 여러 데이터들을 Jackson 라이브러리를 통해 JSON형식으로 변환시켜주었다.

emitter객체의 send()를 통해 클라이언트에 전송되므로 클라이언트에게 보내기 직전 마지막 단계에서 Object data를 

ObjectMapper 객체를 통해 jsonData로 변환시켜 전송한다.

그리고, 클라이언트에서 받을때도 JSON.parse()를 통해 JSON형식으로 변환시켜주면

 

 

Notificaion 객체의 멤버들인  receiver,notificationType,msgDto,url,read를 서버에서 보내고,

클라이언트의 Console에 다음과 같이 Json형태로 출력되는것을 볼수있다.

이제, 클라이언트에서 해당 데이터들을 가지고 알림 view화면을 구현하면 된다.

 

알림 기능 : 몇분전에 온 알림인지 알려주기

 

알림을 받을때, 해당 알림이 몇분전에 온 알림인지 표시하는 기능을 넣고싶어서 어떻게 구현할지 생각해보았다.

우선, 서버에서 event를 보낼때가 알림을 보내는 시간이니 Notification 객체에 Timestamp타입의 time 이라는 멤버를 추가시켰다.

 

 

 Notification 객체를 Builder패턴을 이용해 생성할때, time값에 Timestamp객체를 생성하고 currentTimeMillis()를 통해 현재 시간을 MilliTime 형태로 넣어주었다.

 

그리고 클라이언트에서 받아온 time과 알림을 표시하는 시점인 new Date().getTime()을 통해 현재 시간을 구하고 

해당 두 시간의 차를 Minute형태로 바꾸어주었다.

 

이후, 받아온 데이터들을 이쁘게 꾸며서 알림 요소에 넣어주었다.

 

근데 가만생각해보니 실시간으로 알림이 전송되는데, 서버에서 알림을 보낼때 시간이나 클라이언트에서 알림을 받을때 시간이나 큰 차이가 없다는 생각이들었다..

그래도 어쨌든 결론적으로

 

 

다음처럼 알림기능이 완성되었다!!