[Node.js] Socket.io 란?

Asher Park·2022년 12월 26일

node.js socket.io 공부 내일배움캠프 스파르타코딩클럽

내일배움캠프_Node.js

목록 보기

12/17

스파르타코딩클럽 내일배움캠프 Node.js 심화주차 강의를 들으며 공부한 것을 적은 것입니다.

Socket 이란?

네트워크 상에서 동작하는 프로그램간 통신의 종착점(Endpoint)
네트워크에서 데이터를 통신할 수 있도록 연결해주는 연결부
콘센트 구멍의 역할과 비슷!

Socket의 종류

대표적으로 TCP, UDP 프로토콜을 사용하는 2가지의 소켓
TCP의 특징은 안정적인 데이터 송수신
UDP의 특징은 일부 패킷이 손실되어도 괜찮거나 빠른 전송속도가 필요한 경우 사용

❓ 패킷 이란?

Socket이 콘센트와 비슷하다면, 패킷은 전기!
Socket을 통해 송수신하는 데이터 덩어리 하나

Web Socket 이란?

실시간 웹 서비스를 제공하기 위해 만들어진 Socket

Socket.io 란?

Javascript 를 사용해 Web Socket를 사용하길 원할 때 가장 많이 사용되는 라이브러리
Web Socket을 사용할 수 없는 브라우저에서는 데이터를 일정 간격마다 받아오는 polling 기능으로 실시간 기능 구현

❓ Socket.io !== Web Socket

Socket.io 는 Web Socket을 포함하여, 사용 못하는 환경에서도 비슷하게 사용 가능하도록 만든 라이브러리 이므로
다르다!

사용해보자!

index.html

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
  <title>Hello Socket.io!</title>
</head>
<body>
  <script>
    const socket = io('ws://localhost:3000');
    socket.on('connect', () => {
    	socket.send('Hello!');
    });

    socket.on('message', (data) => {
    	console.log(data);
    });
  </script>
</body>

app.js
3000번 포트로 연결, cors 세팅

const io = require("socket.io")(3000, {
  cors: {
    /*
    	origin: 어떤 사용자들 에게만? 접근가능하도록 하겠다.
        methods: 어떤 Method에게만? 허용하겠다
    */
    origin: "*",
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
  console.log("새로운 소켓이 연결됐어요!");

  // message라는 socket에 data가 들어왔을때 어떻게 할거냐?
  socket.on("message", (data) => {
    console.log(data);
  });
});