웹 브러우저에서의 양방향 통신 방식

웹 브라우저 에서의 양방향 통신 방식

• 새로고침을 해야지만 웹 브라우저는 서버에서 업데이트된 값을 알 수 있다.
• 그러나 채팅프로그램 같이 서버에서 데이터를 가져오는 과정을 동적으로 해야할 경우 Polling 방식을 생각해볼 수 있다.

Polling 방식

• 클라이언트에서 일정 주기마다 요청을 보내고 서버는 현재 상태를 바로 응답하는 방식
• 그러나 일정 주기마다 요청을 보내기 때문에, 실시간으로 데이터가 반영되지 않는다.
• 또 서버에서 변화가 없더라도 매 요청마다 응답을 내려주기 때문에 불필요한 트래픽이 많이 생겨 서버에 부담이 될 수 있다.

Long Polling 방식

• Polling 방식을 개선하여, 클라이언트에서 요청을 보냈을 때, 서버에서 바로 응답하지 않고 이벤트가 발생했을 때 응답을 내려주는 방식이다.
• 이 방식을 사용하면 실시간 반응이 가능하고, 불필요한 트래픽은 유발하지 않지만, 이벤트가 빈번히 발생할 경우에는 오히려 더 과부하가 걸리게 된다.

Streaming 방식

• 이벤트가 발생했을 때 응답을 내려주고, 응답을 완료시키는 것이 아니라 계속 연결을 유지하는 방식
• Long Polling에 비해 다시 요청을 하지 않아도 되므로 효율적이지만, 연결 시간이 길어질수록 연결의 유효성 관리에 부담이 발생한다.

websocket 방식

• 웹 서버와 웹 브라우저간의 실시간 양방향 통신 기술
• 요청-응답 방식과 다르게 양방향으로 원할때 요청을 보낼 수 있다.

socket.io 방식

• WebSocket과 비슷하게 클라이언트와 서버간의 양뱡향 통신을 가능하게 해주는 모듈
• socket.io는 통신 시작시 각 브라우저에 대해서 websocket, polling, streaming 등에서 가장 적절한 방법을 찾아 메시지를 보내준다.
  • 따라서 websocket 지원이 되지 않는 브라우저에서도 사용 가능

websocket 방식을 사용하여 구현하기 (예시)

• ws 모듈 설치

npm install ws

• 서버 코드 작성

var WebSocketS = require("ws").Server;
var wss = new WebSocketServer({ port: 3000 });

// 연결이 수립되면
wss.on("connection", function(ws) {
  ws.send("Hello! I am a server."); // 클라이언트에 메시지를 전송하고
  ws.on("message", function(message) { // 클라이언트로부터의 메시지를 수신한다
    console.log("Received: %s", message);
  });
});

• 브라우저 코드 작성

// 웹소켓 전역 객체 생성
var ws = new WebSocket("ws://localhost:3000");

// 연결이 수립되면
ws.onopen = function(event) {
  ws.send("Client message: Hi!"); // 서버에 메시지를 전송한다
}

// 서버로 부터 메시지를 수신한다
ws.onmessage = function(event) {
  console.log("Server message: ", event.data);
}