Career/웹

Http통신 vs Socket통신

wood.forest 2021. 3. 15. 09:58

목표

Http 통신, Socket 통신 방식에 대한 이해
관련 예제

네트워크를 통한 서버와의 통신 방식은 크게 http통신과 socket통신으로 나뉜다.

1. http 통신

Client의 요청(Request)이 있을 때만 Server가 응답(Response)하는 단방향 통신으로, 응답을 받고나면 연결이 종료된다.

ex. 버튼 클릭 시 선택된 컨텐츠 보여주기

REST?

REpresentational State Transfer
Request에 따른 API를 구조화하는 가장 표준화된 방법으로, Http 방식에 기반을 둔다
Statetlessness: Client와 Server가 서로의 State를 알 필요가 없다 (Client와 Server가 분리되어 있어 각 부분에서 코드가 변경되어도 서로에게 영향이 없다)

Make Request from Client

HTTP verb (Http Method / 요청 Method): 어떤 Operation?
- GET: 특정한 또는 집합의 resource를 얻는다
- POST: 새로운 resource를 생성한다
- PUT: 특정 resource를 업데이트한다
- DELETE: 특정 resource를 삭제한다
Header: Request에 대한 정보를 함께 전달
- Accept (field): 서버에서 받을 수 있는 content의 type으로, client가 server로부터 처리할 수 없는 data는 받지 않도록 보장한다
- MIME Types: Accept field에서 content type을 명시하는 옵션들. type과 subtype이 / 로 구분되어 나타난다.
  - ex. text/html, text/plain, application/json
  - 만약 client가 text/css를 요청했으나 text/plain을 받는다면 content를 인식할 수 없다.
Path: Resource가 있는 주소, 경로
- Convention: Path의 첫 번째 부분은 복수형(Plural form)으로 나타내는 것이 이해하기 좋다.
  
  ex. fashionboutique.com/customers/223/orders/12
Body(optional): Data를 포함한 메세지 내용

Send Response

1. Content Types

Server가 Client에게 data payload를 보낼 때, MIME Type의 content-type을 header에 포함해야 한다.

2. Response Codes

Operation 결과에 대한 정보

Scenario

모든 Customer를 GET하기 위한 Request:

GET http://fashionboutique.com/customers
Accept: application/json

Response header 예시:

Status Code: 200 (OK)
Content-type: application/json

POST를 통한 신규 customer 생성:

POST http://fashionboutique.com/customers
Body:
{
  “customer”: {
    “name” = “Scylla Buss”,
    “email” = “scylla.buss@codecademy.org”
  }
}

Server에서 해당 객체에 대한 id 생성 후 아래 header로 client에게 반환:

201 (CREATED)
Content-type: application/json

PUT을 통해 특정 customer의 data 갱신:

PUT http://fashionboutique.com/customers/123
Body:
{
  “customer”: {
    “name” = “Scylla Buss”,
    “email” = “scyllabuss1@codecademy.com”
  }
}

id로 customer를 특정한 뒤 DELETE:

DELETE http://fashionboutique.com/customers/123

Response로는 Status Code 204를 반환하여 해당 id의 객체가 더이상 존재하지 않음을 전달할 수 있다.

2. socket 통신

Client와 Server가 지정된 Port를 통해 연결되어 실시간으로 데이터를 주고받는 양방향 통신

ex. 실시간 스트리밍, 채팅, 온라인 게임

Web socket?

Socket 아이디어의 확장으로, http와 다르게 ws:// 또는 wss:// 을 사용한다.
2011년에 표준화되었으며, 서버↔브라우저, Peer↔Peer(P2P), 브라우저↔브라우저 사이의 데이터 교환에 유연한 프로토콜
서버가 항상 통신에 open된 상태로, 데이터는 필요할 때 즉시 브라우저로 push될 수 있다.
가장 잘 알려진 Web socket framework는 Socket.io
Stateful protocol: Client와 Server중 한 쪽이 Connection을 종료하거나 끊겼을 때, 양쪽의 연결이 종료되며 그 전까지는 계속 연결되어 있다

Example

1. WebSocket object를 생성

new WebSocket(require: url, optional: protocols);

var exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocolOne"); 
console.log(exampleSocket.readyState); //CONNECTING 
console.log(exampleSocket.readyState); //OPEN. Connection established

2. Server에 Data 전송

Connection은 비동기이며, 실패하는 경우가 있으므로 Socket 생성 후 즉시 Send되지 않을 수 있다. 따라서 Event handler onopen으로 연결된 뒤 데이터를 전송할 수 있도록 한다.

exampleSocket.onopen = function (event) {
  // 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.
  exampleSocket.send(JSON.stringify(msg));

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

3. Server에서 메세지 수신

WebSocket은 Event-driven API이므로 메세지 수신 이벤트가 발생하면 동작을 처리할 수 있다.

exampleSocket.onmessage = function (event) {
  var f = document.getElementById("chatbox").contentDocument;
  var text = "";
  var msg = JSON.parse(event.data);
  var time = new Date(msg.date);
  var timeStr = time.toLocaleTimeString();

  switch(msg.type) {
    case "id":
      clientID = msg.id;
      setUsername();
      break;
    case "username":
      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
      break;
    case "message":
      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
      break;
  }

  if (text.length) {
    f.write(text);
    document.getElementById("chatbox").contentWindow.scrollByPages(1);
  }
}

4. Connection 종료

exampleSocket.close();

Reference

728x90

저작자표시