2023 - 07 - 04 TCP, UDP, 소켓(socket.io), 웹소켓, 패킷

 

TCP

서버와 클라이언트 간 신뢰성 있는 데이터 송수신을 위해 만들어진 프로토콜. (연결 지향성 프로토콜)

TCP로 서버-클라이언트 간 연결이 된 경우 데이터를 양방향으로 주고받을 수 있다.

만약 누락된 데이터가 있으면 클라이언트가 서버에게 재요청해서 완전한 데이터를 만들 수 있다.

UDP에 비해 데이터 송수신비용부담이 크고, 속도가 느리다.

 

 

UDP

비연결성 프로토콜이다. 데이터를 보내고, 제대로 받았는지 확인하지 않아 신뢰도가 낮다.

TCP에 비해 데이터 송수신비용부담이 적고, 속도가 빠르다.

 

소켓

네트워크에서 데이터를 송수신하기 위해 반드시 거쳐야 하는 연결부이다. 일반적으로 안정적인 데이터 송수신을 위해 TCP 소켓을 사용하지만, 일부 패킷이 손실되어도 괜찮거나 빠른 전송속도가 필요한 경우 UDP소켓을 사용하기도 한다.

 

패킷

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

 

웹소켓

실시간 웹서비스를 제공하기 위해 만들어진 소켓. Google Docs등에서 실시간 공동편집, 웹메신저 등에서 사용되는 기술. 하지만 일부 브라우저들은 웹소켓을 지원하지 않기 때문에 모든 브라우저에서 동작을 보장하지는 못한다.

 

socket.io

자바스크립트를 사용해 웹소켓을 사용할때 가장 많이 사용되는 라이브러리. socket.io는 웹소켓을 사용할 수 없는 브라우저에서 서버에서 데이터를 일정 간격마다 받아오는 polling 기능으로 실시간 구현을 가능하게 해준다.

https://socket.io/

Socket.IO

https://socket.io/docs/v3

Introduction | Socket.IO

npm init -y
npm i socket.io -S
npm i express -S

프론트엔드에서 서버로 데이터 보내는 코드

    <script>
     브라우저(클라이언트)에서 소켓전송 성공시 서버에 hello라고 보냄
     
      const socket = io("ws://localhost:3000");
      socket.on("connect", () => {
        socket.send("Hello!");
      });

      socket.on("message", (data) => {
        console.log(data);
      });

      이벤트핸들링 코드
      customEventName이는 소켓으로 데이터 전달시, 전달받은 데이터를 콘솔로그.
      
      socket.on("customEventName", (data) => {
        console.log(data);
        });

    </script>

 

 

 

서버에서 데이터 보내는 코드

socket.send("메세지값")

socket.io 라이브러리를 사용하기 위한 코드

3000번 포트
cors에서 origin: 어떤 사용자들에게만 서버에 접근가능하게 할지 허용여부
cors에서 methods: 어떤 메서드를 허용할지 알려줌

const io = require("socket.io")(3000, {
    cors: {
      origin: "*",
      methods: ["GET", "POST"],
    },
  });
  
  
io.on 어떤식으로 연결할지. 특정사용자가 우리 서버에 소켓으로 연결되었다면 콘솔띄움.
message라는 소켓에 데이터가 들어올때, 전달된 데이터를 변수할당하고 콘솔찍음.
이 메시지는 app.js를 실행할때 나오는게 아니라, 사용자가 서버에 소켓으로 연결되었을때 나옴!
"Hello!"는 클라이언트로부터 받은 메시지.
서버의 커스텀이벤트로 데이터 발행하기. socket.emit("이벤트이름", "데이터")


  io.on("connection", (socket) => {
        console.log("새로운 소켓이 연결됐어요!");
      	socket.emit("customEventName", "this is custom event data");
      
        socket.on("message", (data) => {
        console.log(data);
        });
  });

socket.io를 express와 함께 사용해보기

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

const app = express();
const http = createServer(app); // express를 통해 만들어진 app이 http로 브라우저를 엶.
const io = require('socket.io')(http, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

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

https://mangkyu.tistory.com/15

[TCP/UDP] TCP와 UDP의 특징과 차이

 

 

https://velog.io/@rhdmstj17/%EC%86%8C%EC%BC%93%EA%B3%BC-%EC%9B%B9%EC%86%8C%EC%BC%93-%ED%95%9C-%EB%B2%88%EC%97%90-%EC%A0%95%EB%A6%AC-2

[소켓과 웹소켓] 한 번에 정리 (2) | 소켓과 웹소켓의 차이점, 웹소켓의 모든것, http-tcp-소켓의 상

https://ws-pace.tistory.com/104

HTTP vs. WebSocket 정리

 

https://d2.naver.com/helloworld/1336