웹 소켓 (feat. socket.io)

오늘부터 주특기 프로젝트 클론코딩 시작이다.

우리 조는 페이스북 클론 코딩을 선택했는데 이번에 웹 소켓과 멀터를 적용해보기로 했다.

웹 소켓은 클라이언트와 서버간에 양방향 통신을 제공하기 위한 개념이다.

node.js 심화주차에서 강의를 듣기는 했지만 한번 훑고 지나간 개념이라 머리에 남아있지않다.

그래서 다시 한번 정리해보려고 한다.

 

 

TCP (Transmission Control Protocol)

• 서버와 클라이언트간에 신뢰성 있는 데이터 송수신을 위해 만들어진 연결 지향성 프로토콜이다.
• 데이터를 나눠 보낼 수 있으며 받는 쪽에서 재조립한다.
• 만약 누락된 데이터가 존재하면 다시 요청해서 받아와 완전한 데이터를 만든다.
• 데이터의 순서가 바뀌지 않아 안정적이고 신뢰성이 높다.
• UDP보다 전송 속도가 느리고 비용 부담이 크다.

 

UDP (User Datagram Protocol)

• TCP와 달리 비연결성 프로토콜이다.
• 송수신한 데이터를 확인하지 않아 비교적 신뢰도가 낮습니다.
• 순서대로 데이터를 보내도 받는 쪽에서 다른 순서로 받을 수 있다.
• TCP보다 전송 속도가 빠르고 비용 부담이 적다.

 

 

소켓의 역할

우리가 네트워크에서 데이터를 송수신하기 위해 반드시 거쳐야 하는 연결부에 해당한다.

 

 

소켓의 종류

• 대표적으로 TCP와 UDP가 있다.
• 안정적인 데이터 송수신을 원한다면 TCP를 사용하고
  일부 데이터가 손실되어도 괜찮거나 빠른 전송 속도가 필요할 경우 UDP를 사용한다.

 

패킷이란?

소켓을 통해 송수신하는 데이터 덩어리 하나를 한개의 패킷이라고 한다.

 

 

웹 소켓이란?

실시간 웹 서비스를 제공하기 위해 만들어진 소켓이다.

일반적으로 웹 소켓은 통신의 신뢰성을 보장하기 위해 TCP 방식을 사용한다.

 

 

 

우리가 사용할 Socket.io는?

자바스크립트에서 웹 소켓을 사용하기 원한다면 가장 많이 사용되는 라이브러리이다.

그러나 이 라이브러리는 순수한 웹소켓 기술만 이용한 라이브러리는 아니다.

아직 모든 브라우저에서 웹 소켓 기술이 동작하는 것이 아니기 때문에

웹 소켓을 사용할 수 없는 브라우저의 경우 서버에서 데이터를 일정 간격마다 받아오는

polling 기능으로 실시간 기능 구현을 가능하게 해준다.

 

 

socket.io 모듈 설치

npm i socket.io -S

 

express에 socket.io 모듈 붙이기

const express = require("express");
const { createServer } = require("http");

const app = express();
const http = createServer(app);
const io = require('socket.io')(http, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

http.listen(3000, () => {
  console.log("서버가 요청을 받을 준비가 됐어요");
});

app 객체는 express로 기존처럼 API를 개발하거나 프론트엔드 파일을 서빙하는 용도로 사용할 수 있고, io 객체도 기존처럼 클라이언트와 데이터를 주고 받는 용도로 사용이 가능하다.