웹소켓 프로토콜 기본

 

HTTP는 클라이언트의 요청과 서버 응답으로 구성되는 무상태(stateless) 프로토콜이며, 그 용도가 제한적인 프로토콜이다.

http 프로토콜로 통신하는 경우 특성상 연결이 유지되지 않아서 서버에서 먼저 요청을 보내는 것이 불가능해 Polling, Long Polling, Streaming 방식을 이용하여 비슷한 효과를 구현 한다.

 

 

TCP/UDP

TCP(Transmission Control Protocol)소켓 :

- 신뢰할 수 잇는 통신.

- 인터넷을 통해 서비스되는 네트워크 연결 가운데는 그 수명이 길고 양방향 메시지 교환이 가능, 대량의 데이터 전송에 적합.

- BUT, 보안 신뢰성이 낮은 클라이언트 측 자바스크립트 코드에 저수준 TCP 소켓 접근 권한을 주는 것은 바람직하지 않다. 

- 종류 : 스트림 소켓

 

UDP(User Datagram Protocol):

- 몇가지 신뢰도는 포기하되 좀 더 직접적인 통신(확실하게 전달이 보장되지 않음, 데이터가 손실되도 오류가 발생하지 않음).

- 데이터의 크기에 제한이 있음. 

- 실시간 멀티미디어 정보를 처리하기 위해 주로 사용

- 종류 : 데이터그램 소켓

- ex) 전화

 

웹소켓 API: 클라인트 측 코드내에서 Websocket 프로토콜을 지원하는 서버와 소켓과 유사한 양방향 연결하여 특정한 종류의 네트워킹 작업을 하기가 좋다. 즉, ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술이다.

 

 

웹 소켓 사용법

1. Websocket() 생성자를 사용하여 소켓을 생성한다.

Websocket() 생성자에 전달하는 인자는 ws://, wss:// 를 사용한 URL이다.

URL은 연결하려는 호스트를 지정하며, 포트(웹 소켓은 HTTP와 HTTPS에서 사용하는것과 동일한 포트 사용)와 경로 또는 리소스 위치도 지정한다.

var exSocket = new Websocket('ws://ws.example.com:1234/resource');

2. 해당 객체의 이벤트 핸들러도 지정

exSocket.onopen = function(e){}; //소켓이 연결 되었다.
exSocket.onclose = function(e){}; //소켓 연결이 종료되었다.
exSocket.onerror = function(e){}; //문제가 발생했다!
exSocket.onmessage = function(e){ //서버가 메시지를 보냈다.
	var message = e.data;
};

3. 소켓을 통해 서버로 데이터를 전송하려면 소켓의 send() 메서드를 호출

exSocket.send('HELLO');

* 버전 11 아래의 파이어폭스는 String 데이터 전송만을 지원

 

연결이 수립된 이후에만 데이터를 전송하도록 하기 위해 onopen 핸들러를 정의하고, 이 위에서 작업

exSocket.onopen = function (event) {
  exSocket.send("Here's some text that the server is urgently awaiting!");
};

 

JSON 을 사용하면 서버에 복잡한 데이터를 편리하게 보낼 수 있다.

// Send text to all users through the server
function sendText() {
  // Construct a msg object containing the data the server needs to process the message from the chat client.
  var msg = {
    type: "message",
    text: document.getElementById("text").value,
    id:   clientID,
    date: Date.now()
  };

  // Send the msg object as a JSON-formatted string.
  exSocket.send(JSON.stringify(msg));

  // Blank the text input element, ready to receive the next line of text from the user.
  document.getElementById("text").value = "";
}

 

서버로부터 데이터 수신하기 :WebSockets는 event-driven API이다. 

메세지가 수신되면 "message" 이벤트가 onmessage 함수로 전달한다.

exSocket.onmessage = function (event) {
  console.log(event.data);
}

 

JSON 오브젝트를 받아서 처리하기 : JSON.parse() 를 통해 JSON 오브젝트를 자바스크립트 오브젝트로 변환

 

 

 

연결을 종료하기

exSocket.close();

 

 

 

 

 

참고: 자바스크립트 완벽가이드 / MDN Web Docs

www.websocket.org/echo.html