웹 소켓은 실시간 양방향 통신에 사용되는 통신 프로토콜로, 웹 브라우저와 서버 간에 지속적인 연결을 유지할 수 있습니다.
웹 소켓을 사용하려면 클라이언트와 서버 간에 핸드셰이크 과정이 완료되어야 하며, 이후 클라이언트와 서버가 서로 데이터를 교환할 수 있습니다.
아래 기사에서 자세히 알아보도록 하겠습니다.
웹소켓 작동 방식
악수 과정
HTTP와 마찬가지로 웹 소켓은 클라이언트와 서버 간의 연결을 설정하기 위해 핸드셰이크 프로세스를 거칩니다.
클라이언트는 서버에 웹 소켓 연결을 요청하고, 서버는 이 요청에 응답합니다.
Handshake를 위한 헤더 데이터는 HTTP와 유사한 형식으로 전송됩니다.
클라이언트는 웹 소켓 연결에 대해 “Upgrade” 및 “Connection” 헤더를 사용하여 업그레이드 요청을 보냅니다.
그리고 “Sec-WebSocket-Key”라는 헤더에는 클라이언트의 고유 키 값이 포함되어 전송됩니다.
서버는 이 요청을 받으면 클라이언트 요청을 확인하고 “Sec-WebSocket-Accept”라는 헤더의 클라이언트 키 값을 기반으로 생성된 서버 키 값으로 응답합니다.
이러한 핸드셰이크 과정을 통해 클라이언트와 서버는 웹 소켓 연결을 설정하고 데이터를 교환할 수 있습니다.
양방향 통신
웹 소켓은 실시간 양방향 통신을 지원하므로 클라이언트와 서버가 서로 데이터를 교환할 수 있습니다.
클라이언트는 서버에 데이터를 보낼 때 “SEND” 메시지를 보내고, 서버는 클라이언트에 데이터를 보낼 때 “MESSAGE” 또는 “EVENT” 메시지를 보냅니다.
데이터 전송은 메시지 단위로 이루어지며 메시지는 UTF-8 형식으로 인코딩됩니다.
클라이언트와 서버는 웹 소켓을 통해 실시간으로 데이터를 교환할 수 있기 때문에 실시간 채팅, 주가 업데이트 등 실시간 기능을 구현할 수 있다.
웹소켓 사용 예시 코드
서버 측 코드
서버 측에서는 Node.js의 ws 라이브러리를 사용하여 웹 소켓 서버를 구축할 수 있습니다.
““
const WebSocket = require(‘ws’); const wss = new WebSocket.Server({ 포트: 8080 }); wss.on(‘연결’, (ws) => {
ws.on(‘메시지’, (메시지) => {
console.log(`수신된 메시지: ${message}`); //클라이언트에게 응답 메시지 보내기
ws.send(‘안녕하세요, 고객님!
’);
}); //클라이언트와의 연결이 끊길 때 처리
ws.on(‘닫기’, () => {
console.log(‘연결이 닫혔습니다’);
});
});
“`
클라이언트 측 코드
클라이언트 측에서는 웹 브라우저 내에서 제공되는 WebSocket 객체를 사용하여 서버와 웹 소켓 연결을 설정하고 데이터를 주고받을 수 있습니다.
“`
const ws = new WebSocket(‘ws://localhost:8080’); ws.onopen = () => {
console.log(‘서버에 연결되었습니다’); // 서버에 메시지 보내기
ws.send(‘안녕하세요, 서버님!
’);
}; ws.onmessage = (이벤트) => {
console.log(`수신된 메시지: ${event.data}`);
}; ws.onclose = () => {
console.log(‘서버와의 연결이 끊어졌습니다’);
};
“` 위 코드는 로컬 호스트 포트 8080에 웹 소켓 서버를 구축하고, 클라이언트가 서버에 연결하는 예입니다.
클라이언트가 서버에 연결되면 “Connected to server”라는 메시지가 표시되고, 클라이언트가 메시지를 수신하면 “Received message:”와 함께 메시지 내용이 표시됩니다.
결론적으로
웹 소켓은 HTTP보다 효율적인 실시간 양방향 통신을 가능하게 하는 프로토콜입니다.
웹 소켓은 핸드셰이크 과정을 통해 클라이언트와 서버 간 연결을 설정한 후 실시간으로 데이터를 교환할 수 있습니다.
이를 통해 실시간 채팅, 주가 업데이트 등 다양한 실시간 기능을 구현할 수 있습니다.
웹 소켓은 클라이언트가 쉽게 웹 소켓 연결을 설정하고 데이터를 보내고 받을 수 있도록 WebSocket 개체를 사용합니다.
알아두면 유용한 추가 정보
1. 웹 소켓은 HTTP와 별도의 포트를 사용합니다.
기본적으로 포트 80을 사용하는 HTTP와 달리 웹 소켓은 포트 8080을 사용하여 연결합니다.
2. 웹 소켓은 실시간 양방향 통신을 지원하므로 클라이언트와 서버가 동시에 데이터를 보내고 받을 수 있습니다.
따라서 서버가 일방적으로 데이터를 보낼 수 있을 뿐만 아니라, 클라이언트도 서버에 데이터를 보낼 수 있습니다.
3. 웹 소켓은 TCP/IP 프로토콜에서 작동하여 전이중 통신과 안정적인 데이터 전송을 지원합니다.
4. 웹 소켓은 HTTP Handshake 과정을 거쳐 연결을 하기 때문에 클라이언트와 서버는 웹 소켓 연결을 위해 HTTP를 사용합니다.
따라서 웹 소켓은 HTTP의 특징 중 하나인 호환성을 갖습니다.
5. 웹 소켓 연결을 지원하는 브라우저는 많지만 모든 브라우저가 이를 완벽하게 지원하는 것은 아닙니다.
따라서 웹 소켓을 사용하기 전에 브라우저 호환성을 확인하는 것이 중요합니다.
당신이 놓칠 수 있는 것
– Web Socket은 HTTP와 별도의 프로토콜이므로 Web Socket 서버와 클라이언트를 별도로 구축해야 합니다.
– 웹 소켓에 연결할 때 서버의 IP 주소와 포트 번호를 알아야 합니다.
– 웹 소켓을 사용하려면 클라이언트와 서버 모두에서 웹 소켓을 지원하는 코드가 필요합니다.
– 웹소켓은 실시간 통신을 지원하기 때문에 빠르게 데이터를 처리할 수 있는 서버 환경이 필요합니다.