노드 심화 2-2,3

쥬·2022년 12월 26일

socket.io

study

목록 보기

27/81

소켓?

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

대표적으로 TCP, UDP 프로토콜을 사용하는 2가지의 소켓이 존재,
아주 일반적으로는 안정적인 데이터 송수신을 위해 TCP 소켓을 사용하는 경우가 대부분이지만, 일부 패킷이 손실되어도 괜찮거나 빠른 전송 속도가 필요한 경우 UDP 소켓을 사용하기도 합니다.
패킷?
네트워크 소켓이 현실의 콘센트와 비슷하다면, 패킷은 쉽게 말해 콘센트 배선에 흐르는 전기와 비슷합니다.

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

웹소켓?

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

최근 점점 많이 사용하는 기술이지만 일부 브라우저들이 웹소켓을 지원하지 않기 때문에 모든 브라우저에서의 동작을 보장하지는 못함.

socket.io?

자바스크립트를 사용해 웹소켓을 사용하길 원한다면 가장 많이 사용되는 라이브러리 (웹소켓이랑은 다른 것!)

웹소켓 기술은 아직 모든 브라우저에서 동작하지는 못하기 때문에, 모든 사용자를 고려해야 하는 경우 실시간성 기능 구현에 어려움이 생기게 됩니다.

이 어려움을 해결하기 위해 socket.io는 웹소켓을 사용할 수 없는 브라우저인 경우 서버에서 데이터를 일정 간격마다 받아오는 polling 기능으로 실시간 기능 구현을 가능케 해줍니다.

socket.io 사용해보기

1. 모듈설치

npm init -y
npm i socket.io -S

2. index.html

<!DOCTYPE html>
<html lang="en">
  <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>
</html>

서버에서 데이터 보내는 코드 작성
=>socket.send("메세지값")

3. app.js

서버연결

const io = require("socket.io")(3000, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"],
  },
});

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

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

origin : "*"
=> 모든 사람에게 cors를 열어주겠다.
=> * : asterisk
methods: ["GET", "POST"]
=> 두 가지 메소드만 열어주겠다.

4. express로 서버연결하기

npm i express -S

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("서버가 요청을 받을 준비가 됐어요");
});