본문 바로가기

내일배움캠프 노드 4기/Today I Learned

socket.io

소켓 : 서버와 클라이언트 사이에 존재하는 연결구(중간지점)

 

socket.io : 자바스크립트에서 웹소켓을 사용하기 위한 라이브러리

모듈 설치하기

npm i socket.io -S

 

프론트엔드 index.html

<script>
      const socket = io("ws://자기 주소");
      socket.on("connect", () => {
        socket.send("Hello!");
      });

on 매개변수 : 소켓이 생성될 때(연결됨)

 

이벤트 핸들링 : 어떤 동작을 했을때 작동하는 코드

    socket.on("customEventName", (data) => {
      console.log(data);
    });
</script>

 

백엔드 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);
  });
});

io = socket.io 모듈을 3000번 포트로 연결합니다.

 

이벤트 핸들링(서버)

socket.emit("customEventName", "this is custom event data");

emit 매개변수를 통해 작동시킵니다. (이벤트명, 주고 싶은 데이터 내용)