웹 API
웹소켓(WebSocket)
WebSocket은 연결을 유지하면서 클라이언트와 서버가 양쪽에서 메시지를 보낼 수 있는 통신 방식입니다.
쉬운 설명
스터디 채팅방에서 새 메시지가 새로고침 없이 나타나도록 만들 때 WebSocket을 사용할 수 있어요. 연결한 뒤에는 브라우저가 메시지를 보내고 서버도 새 메시지를 전달할 수 있어요. 매번 새 HTTP 요청을 보내는 방식과는 달라요. 연결이 끊겼을 때 다시 연결하고 빠진 내용을 확인하는 처리는 앱에서 준비해야 해요.
이런 상황에서 만나요
두 사람이 들어온 스터디 채팅방을 만든다고 해 볼게요. 한 사람이 보낸 메시지를 서버가 다른 참여자에게 전달하는 상황이에요.
같은 연결에서 보낸 메시지와 받은 메시지를 봐요
wss://chat.example.com/room 상태 연결됨
{"type":"chat","text":"발표 시작할게요"}{"type":"chat","text":"화면 잘 보여요"}- 1실제 서비스가 아닌 예시 주소예요.
- 2참여자가 입력한 메시지를 서버로 보내요.
- 3서버가 다른 참여자의 메시지를 전달하는 예시예요.
개발자 도구의 WebSocket 메시지 화면에서 보낸 내용과 받은 내용을 구분해요. 연결이 열렸다고 메시지 저장이나 다른 사람에게 전달까지 성공한 것은 아니에요. 연결 상태와 서버 처리 결과, 화면 반영을 나누어 확인해요.
헷갈리기 쉬운 점
AI 답변을 조금씩 보여 주려면 WebSocket이 꼭 필요한가요?
아니에요. 서버의 답변을 계속 받는 것이 주목적이라면 SSE나 Fetch로 응답 스트림을 읽는 방식도 사용할 수 있어요. 양쪽에서 수시로 메시지를 주고받아야 하는지에 따라 선택해요.
다시 연결할 때 이전 메시지가 중복되거나 빠질 수 있어요. 메시지 식별자와 복구 방식을 정하고, 연결 및 각 작업에 필요한 권한도 확인해야 해요.
왜 알아야 할까요?
실시간 화면을 만들 때 양방향 연결이 필요한지 판단할 수 있어요. 채팅이 멈췄을 때 연결 단절인지, 서버 처리 실패인지, 화면 갱신 문제인지 구분할 수 있어요.
조금 더 자세히
WebSocket은 텍스트와 바이너리 메시지를 주고받을 수 있습니다. 브라우저의 WebSocket 객체에는 연결 열림·메시지 수신·오류·종료에 대응하는 이벤트가 있습니다. wss는 암호화된 WebSocket 연결에 사용하는 주소 방식입니다.
브라우저의 기본 WebSocket API가 끊긴 연결을 자동 복구하고 메시지를 영구 저장해 주지는 않습니다. 재연결, 순서 처리, 과도한 메시지 양에 대한 대응은 앱과 서버의 설계에 포함해야 합니다.
직접 사용할 때 확인해 보세요
- 연결 상태와 메시지 송수신을 나누어 확인한다
- 끊김 후 재연결과 누락 복구를 준비한다
- 메시지별 권한과 중복 처리를 확인한다
관계 지도
