Keywords

• WebSocket
• PollingSc
• Socket.io

What is WebSocket? 🤪

WebSocket API는 사용자의 브라우저와 서버 사이에 **양방향 통신 세션(two-way interactive communication session)**을 여는 것을 가능하게 하는 기술입니다. 이를 활용하면, 서버에 메시지를 보냈을 때 답장을 확인하기 위해 주기적으로 서버에 요청을 보낼 필요 없이(without having to poll the server for a reply) 이벤트 기반 응답을 받을 수 있습니다.

웹 페이지의 한계에서 벗어나 실시간으로 상호작용하는 웹 서비스를 만드는 표준 기술이므로 채팅, 게임 등의 실시간성이 필요한 서비스에서 쓰입니다!

Why WebSocket? 🤔

1989년 팀 버너스 리가 웹을 창시할 때만 해도, 웹 페이지와 사용자의 상호작용은 크게 고려되지 않았습니다. 그 때는 연구기관에서의 통신이 주 목적이었으니까요. 하지만 웹이 점점 전 세계 사람들의 일상생활에 파고들었고, PC용 응용 프로그램(Native Application)을 대체할 수 있는 정도까지 되었습니다.

일반적으로 사용자가 웹을 이용하는 방식은 HTTP 요청에 대한 HTTP 응답을 받아서 브라우저의 화면을 깨끗하게 지우고 받은 응답 내용을 새로 그리는 것입니다. 페이지를 이동하면 내용을 지우고 다시 그리게 되니 깜빡임이 생깁니다.

• FOUC?

이러한 깜빡임을 없애고 원하는 부분만 다시 그리며 실시간으로 사용자와 상호작용하는 방식이 나타나고 이러한 웹 서비스를 선호하는 사용자가 증가합니다. 보다 쉽게 상호작용하는 웹 페이지를 만들려면 브라우저와 웹 서버 사이에 더 자유로운 양방향 메시지 송수신이 필요하기 때문에, WebSocket 기술이 등장합니다!

Try WebSocket 🤹

웹소켓을 웹 브라우저에서 간단히 실습을 해봅시다!

웹 브라우저의 개발자 도구를 켜서 콘솔 탭으로 들어가면 자바스크립트를 실행할 수 있습니다. 여기서 해당 웹 브라우저가 웹소켓을 지원하는지 알려면 아래 스크립트를 실행했을 때 True 가 나오는지 보면 됩니다.

if ('WebSocket' in window) {
    console.log('WebSocket exists.')
} else {
    console.log('WebSocket does not exist.')
}

https://www.websocket.org/echo.html 에서 WebSocket을 이용한 Echo Test를 해볼 수 있습니다. 우리는 여기서 제공되는 WebSocket Echo Server를 가져다 쓸게요!

const wsURL = 'wss://echo.websocket.org/'
let websocket = new WebSocket(wsURL)
websocket.onopen = e => console.log('CONNECTED')
websocket.onclose = e => console.log('DISCONNECTED')
websocket.onmessage = e => console.log(`RESPONSE: ${e.data}`)
websocket.onerror = e => console.log(`ERROR: ${e.data}`)

function send(message) {
    console.log(`SENT ${message}`)
    websocket.send(message)
}

위 코드는 WebSocket Echo Server의 URL로 WebSocket 인스턴스를 생성하고, 이벤트에 따른 핸들러 함수들과 WebSocket에 메시지를 함수를 정의합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f16fd9ea-092f-4685-b729-c8108672eba2/__2021-01-02__4.47.38-1.mov