SOCKET 통신

#소켓

소켓(SOCKET)이란?
소켓(Socket)은 프로세스가 드넓은 네트워크 세계로 데이터를 내보내거나 혹은 그 세계로부터 데이터를 받기 위한 실제적인 창구 역할을 한다. 그러므로 프로세스가 데이터를 보내거나 받기 위해서는 반드시 소켓을 열어서 소켓에 데이터를 써보내거나 소켓으로부터 데이터를 읽어들여야 한다.


소켓은은 프로토콜, IP 주소, 포트 넘버로 정의된다.

* 프로토콜
프로토콜은 원래 외교상의 언어로써 의례나 국가간에 약속을 의미하며, 통신에서는 어떤 시스템이 다른 시스템과 통신을 원활하게 수용하도록 해주는 통신 규약, 약속

* IP
전 세계 컴퓨터에 부여된 고유의 식별 주소

* 포트
포트(Port)는 네트워크 상에서 통신하기 위해서 호스트 내부적으로 프로세스가 할당받아야 하는 고유한 숫자이다. 한 호스트 내에서 네트워크 통신을 하고 있는 프로세스를 식별하기 위해 사용되는 값이므로, 같은 호스트 내에서 서로 다른 프로세스가 같은 포트 넘버를 가질 수 없다. 즉, 같은 컴퓨터 내에서 프로그램을 식별하는 번호이다.

다시말해 소켓이은 떨어져 있는 두 호스트를 연결해주는 도구로써 인터페이스의 역할을 하는데 데이터를 주고 받을 수 있는 구조체로 소켓을 통해 데이터 통로가 만들어 진다. 이러한 소켓은 역할에 따라 서버 소켓, 클라이언트 소켓으로 구분된다.

서버 (Server)

클라이언트 소켓의 연결 요청을 대기하고, 연결 요청이 오면 클라이언트 소켓을 생성하여 통신이 가능하게 한다

1) socket() 함수를 이용하여 소켓을 생성
2) bind() 함수로 ip와 port 번호를 설정하게 됩니다.
3) listen() 함수로 클라이언트의 접근 요청에 수신 대기열을 만들어 몇 개의 클라이언트를 대기 시킬지 결정
4) accept() 함수를 사용하여 클라이언트와의 연결을 기다림


클라이언트 (Client)

실제로 데이터 송수신이 일어나는 것은 클라이언트 소켓이다.

1) socket() 함수로 가장먼저 소켓을 연다.
2) connect() 함수를 이용하여 통신 할 서버의 설정된 ip와 port 번호에 통신을 시도
3) 통신을 시도 시, 서버가 accept() 함수를 이용하여 클라이언트의 socket descriptor를 반환
4) 이를 통해 클라이언트와 서버가 서로 read(), write() 를 하며 통신 (이 과정이 반복)

소켓종류
스트림 (TCP)

- 양방향으로 바이트 스트림을 전송, 연결 지향성
- 오류 수정, 정송처리, 흐름제어 보장
- 송신된 순서에 따라 중복되지 않게 데이터를 수신 → 오버헤드가 발생
- 소량의 데이터보다 대량의 데이터 전송에 적합 → TCP를 사용

데이터그램 (UDP)

- 비연결형소켓
- 데이터의 크기에 제한이 있음
- 확실하게 전달이 보장되지 않음, 데이터가 손실돼도 오류가 발생하지 않음
- 실시간 멀티미디어 정보를 처리하기 위해 주로 사용 ex) 전화

HTTP 통신과 SOCKET 통신의 비교
HTTP 통신

- Client의 요청(Request)이 있을 때만 서버가 응답(Response)하여 해당 정보를 전송하고 곧바로 연결을 종료하는 방식



HTTP 통신의 특징

- Client가 요청을 보내는 경우에만 Server가 응답하는 단방향 통신이다.
- Server로부터 응답을 받은 후에는 연결이 바로 종료된다. 
- 실시간 연결이 아니고, 필요한 경우에만 Server로 요청을 보내는 상황에 유용하다.
- 요청을 보내 Server의 응답을 기다리는 어플리케이션의 개발에 주로 사용된다.


SOCKET 통신

- Server와 Client가 특정 Port를 통해 실시간으로 양방향 통신을 하는 방식


SOCKET 통신의 특징

- Server와 Client가 계속 연결을 유지하는 양방향 통신이다.
- Server와 Client가 실시간으로 데이터를 주고받는 상황이 필요한 경우에 사용된다.
- 실시간 동영상 Streaming이나 온라인 게임 등과 같은 경우에 자주 사용된다.

npm i socket.io-client


모든 클라이언트 디버그 출력을 보려면 원하는 범위를 포함하여 브라우저 콘솔에서 다음 명령을 실행하고 앱 페이지를 다시 로드하십시오.
localStorage.debug = '*';

# WebSocket.binaryType
WebSocket.binaryType속성은 WebSocket 연결을 통해 수신되는 이진 데이터의 유형을 제어합니다.
Blob이진 데이터에 개체를 사용(기본값)
ArrayBuffer이진 데이터에 객체를 사용

#폴링(polling)이란? (comet)

폴링은 리얼타임 웹을 위한 기법으로, 일정한 주기(특정한 시간)을 가지고 서버와 응답을 주고 받는 방식을 말한다.

 

이렇게 서버와 응답을 주고 받는 이유는 웹이 태생 자체부터 실시간을 위해 필수적인 persistent connection이 불가능하기 때문이다.

클라이언트가 서버에 특정 요청을 하면 서버가 응답해준 후 연결이 끊어지는게 HTTP의 특징이기 때문이다.

따라서 실시간 서비스라고 불리는 서비스들 대부분이 실시간이 아니다. 실시간으로 변하는 야구 중계 같은 경우, 브라우저에서 5초 단위로 서버에 요청을 보내 업데이트 하는 방식으로 구현된다. 

 

폴링을 위키피디아식으로 다시 정의해보면 

폴링이란 하나의 장치(혹은 프로그램)가  충돌 회피 또는 동기화 처리 등을 목적으로 다른 장치 (또는 프로그램)의 상태를 주기적으로 검사하여 일정한 조건을 만족할 때 송수신 등의 자료처리를 하는 방식을 말한다. 

 

Loop()문 내에서 반복적으로 외부 입력을 감시하는 문법으로 구현된다.

 

하지만 폴링에는 문제점이 있다.

1. 폴링의 주기가 짧으면 서버의 성능에 부담이 간다. (오버헤드/트래픽)

2. 주기가 길면 실시간성이 떨어진다.

 

해결 방법(다른 comet)

comet을 구현 (실시간 웹을 구현하기 위해 만들어진 기술들을 지칭)

- 롱폴링 기법 : 서버측에서 접속을 열어두는 시간을 길게 한다. 이벤트가 발생하면 바로 응답이 이루어짐.

- 스트리밍 방식  : 웹접속을 계속 열어두고 발생할때마다 부분적으로 브라우저에 응답

출처 및 도움을 받은곳
https://socket.io/docs/v4/logging-and-debugging/

https://helloworld-88.tistory.com/215

https://etloveguitar.tistory.com/61

https://niceman.tistory.com/186

https://hoony-gunputer.tistory.com/entry/socket-io%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

반응형

import io from "socket.io-client";

const socketClient = io("http://192.168.43.183:3000");

socketClient.on("connect", () => {
  console.log("connection server");
});

socketClient.emit("first Request", { data: "first Reuqest" });

소켓을 받은 후 emit로 요청을한다.

import io from "socket.io-client";

const socketClient = io("http://192.168.43.183:3000");

socketClient.on("connect", () => {
  console.log("connection server");
});

socketClient.emit("first Request", { data: "first Reuqest" });

socketClient.on("first Respond", req => {
  console.log(req);
});

on을 통하여 event에 맞추어 응답한다

https://velog.io/@ragnarok_code/EventEmitter%EB%9E%80