프론트엔드, 디자인 추가 및 채팅 시스템 완성

프론트엔드와 디자인을 javascript로 완성을 했다. 프론트엔드와 디자인은 강의의 코드를 참조해서 했다.

 

서로 다른 창에서 통신을 한다

 

위의 사진처럼 채팅방에서 대화를 할 수 있다. 자신의 채팅은 오른쪽에 파란색으로 나오며, 자신의 채팅이 아닌 채팅은 왼쪽에 회색으로 나온다.

 

이번에 공부를 하면서 배운 점은 SSE 프로토콜에 의한 방식이다.

 

HTTP와는 다르게 데이터를 한 번 post하거나 get하는 것으로 끝내는게 아니라 계속해서 데이터를 Flux 형태로 받아와서 사용자간의 채팅 시스템이 이루어질 수 있엇다,

 

채팅은 웹소켓을 많이 쓰는데 이번에는 웹소켓을 사용하지 않고 SSE 프로토콜과 mongo db를 사용했다. mongo db와 SSE 프로토콜을 사용해서 비동기 통신을 통해 계속해서 데이터를 받아왔다. 창을 2개 띄워놓고 채팅을 했는데, 새로고침을 누르거나 api를 호출하지 않아도 자동으로 채팅을 보내면 자신의 채팅창과 다른 사람의 채팅창에 데이터가 계속해서 올라오는 것을 확인할 수 있었다.

 

이전에 계속 썼던 RDBMS와는 또 다른 경험이었다.

 

 

mongo db와 같은 Nosql도 더 공부를 해야겠다고 생각을 했고, 실제 사용하는 시스템은 채팅 시스템과 같은 비동기 통신도 많기 때문에 이런 것들도 앞으로 더 공부해야겠다는 생각이 들었다.