웹소켓 과 SSE(Server-Sent-Event) 차이점 알아보고 사용해보기

0

최근에 어떤 이벤트가 생겼을 때 client side에 ui를 업데이트해야 되는 기능을 구현해야 됐었습니다. 처음에는 이런 경우에 사용할 수 있는 것이 socket 밖에 몰라서 socket.io를 사용해서 socket으로 만들다가 웹소켓을 공부하다가 보니 SSE(Server-Sent-Event)라는 것을 알게 되었습니다. 제가 평소에 공부를 해두었다면 웹소켓으로 안 만들고 SSE를 사용해서 만들었을 텐데 시간 낭비를 해버렸습니다. 이래서 평소에 공부를 해야 되는 것 같습니다. Socket과 SSE에 가장 큰 차이점을 하나 말해보라고 한다면 Socket은 양방향으로 데이터를 주고받을 수 있지만 SSE(Server-Sent-Event)를 사용하게 되면 클라이언트는 데이터를 받을 수만 있게 됩니다. 그러니까 어떤 기능이 필요한지에 따라서 뭐를 사용할지 결정하면 됩니다.

웹소켓과 SSE(Server-Sent-Event)에 차이점

Socket과 SSE에 가장 큰 차이점을 하나 말해보라고 한다면 Socket은 양방향(bidirectional)으로 데이터를 주고 받을 수 있지만 SSE(Server-Sent-Event)를 사용하게 되면 클라이언트는 데이터를 받을 수만(mono-directional) 있게 됩니다. 그러니까 어떤 기능이 필요한지에 따라서 뭐를 사용할지 결정하면 됩니다.


마지막으로 총 청리

웹소켓과 SSE에 가장 큰 차이점은 통신 방향이다. 웹소켓은 양방향 SSE는 단방향이기 때문에 클라이언트가 데이터를 보낼 필요가 있을 때는 소켓. 예를 들어 FPS 게임 같은 경우. 하지만 SSE는 서버에서 클라이언트로만 데이터 전송이 가능하기 때문에 주로 노티를 줄 때 많이 사용된다. 지원하는 브라우저 같은 경우 IE를 빼고 생각한다면 둘 다 거의 대부분에 모던 브라우저에서 Polyfills 없이 사용이 가능하다. 하지만 Server-Sent Event도 Polyfills를 사용하면 되기 때문에 큰 문제가 되진 않는다. SSE를 사용할 때 buffer만 꺼주면 소켓이랑 같이 실시간 업데이트가 가능하다. SSE를 사용할 때 주의할 점은 HTTP/1을 사용할 경우 브라우저에 최대 연결 수가 보통 6개로 제한되기 때문에 6개 이상 텝을 열었을 때 작동이 잘 안 될 수가 있다. 하지만 HTTP/2를 사용할 경우 기본 최대 연결 수가 100이 됨으로 문제가 될 가능성이 많이 줄어든다. 소켓은 서버와 연결이 끈겼을 때 자동으로 연결해주는 기능이 없기 때문에 스스로 코드를 짜야되지만 서버사이드 이벤트 같은 경우에는 자동으로 3초마다 한 번씩 확인을 한다. 서버사이드 이벤트 같은 경우에는 firewall이 있는 경우도 사용이 큰 문제없이 가능하기 때문에 firewall이 있을 경우 사용을 고려하는 것도 좋다.

profile
𝙸 𝚊𝚖 𝚊 𝚌𝚞𝚛𝚒𝚘𝚞𝚜 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚠𝚑𝚘 𝚎𝚗𝚓𝚘𝚢𝚜 𝚍𝚎𝚏𝚒𝚗𝚒𝚗𝚐 𝚊 𝚙𝚛𝚘𝚋𝚕𝚎𝚖. 🇰🇷👩🏻‍💻

0개의 댓글