내배캠 62일차

쥬·2023년 1월 13일

TIL socket.io websocket

내일배움캠프

목록 보기

66/142

노마드코더 줌 클론 코딩 주소
사용한 github주소

2-0 SocketIO vs WebSockets

Socket.IO

실시간, 양방향, evnet기반의 통신을 가능하게 하는 framework

websocket보다 탄력성이 뛰어남.
SocketIO가 통신을 제공하는 방법 중 하나가 websocket
websocket이 이용이 불가능하더라도 socketIO는 계속 작동함.
=> http long polling을 사용함.
실시간 기능같은 것들을 더 쉽게 만드는 편리한 코드를 제공함.
자동 재연결 지원, 연결 끊김 확인, 바이너리 지원도 됨!!
websocket이랑 굉장히 비슷하게 사용함.
그래도 다른 문법이 몇가지 있기는 함!
socket.send => socket.emit
socket.on("message") => socket.on("reply")

2-1 Install SocketIO

websocket으로 작성한 코드를 모두 지워주고 socketIO를 이용해 다시 코드를 짤 것이다!

npm i socket.io

server.js에서 필요없는 부분 삭제해줌! app.js도 전부 삭제해주고, home.pug도 다시 작성!

/src/server.js

import SocketIO from "socket.io";

// 서버 생성(http)
const httpServer = http.createServer(app);
const wsServer = SocketIO(httpServer);

// 서버 연결
wsServer.on("connection", (socket) => {
  console.log(socket);
});

httpServer.listen(3000, handleListen);

/src/views/home.pug

// socket.io front(클라이언트)에 설치
script(src="/socket.io/socket.io.js")

/src/public/js/app.js

io는 자동적으로 backend의 socket.io와 연결해주는 funciton

const socket = io();

결과

이렇게 작성해주면 console.log(socket)이 작동해서 터미널에 잘 가져온다.

websocket으로 코드를 작성했을때 sockets.push(socket)을 사용해서 일일히 socket사용자를 넣어주었는데 이제는 socket.io가 알아서 socket_id를 생성해서 보여줌!!

2-2 room 개념

유저가 웹사이트로 들어가게 되면 방을 만들거나, 방에 참가할 수 있게 됨.
이걸 socketIO로 구현할 예정!

이미 socketIO에는 room기능이 있기때문에 그걸 사용할 것

방에 메시지도 보낼 수 있는 기능도 있어서 그것도 사용해 볼 예정!

/src/views/home.pug

body 
    header 
      h1 Noom 
    main 
      div#welcome
        form
          input(placeholder="room name", required, type="text")
          button Enter Room
    script(src="/socket.io/socket.io.js")
    script(src="/public/js/app.js")

/src/public/js/app.js

여기서 서버에서 호출하는 function을 만들어 줄 수 있다!

// io는 자동적으로 backend의 socket.io와 연결해주는 funciton
const socket = io();

const welcome = document.getElementById("welcome");
const form = welcome.querySelector("form");

function handleRoomSubmit(event) {
  event.preventDefault();
  const input = form.querySelector("input");
  //socket.send와 같은 역할
  //전에는 object로 못보내서 string으로 변환하여 보냈는데, socketIO는 가능
  //event,보내고 싶은 데이터(여러개 가능, 타입 상관없음), 서버에서 호출하는 function
  socket.emit("enter_room", { payload: input.value }, () => {
    console.log("server is done!");
  });
  input.value = "";
}

form.addEventListener("submit", handleRoomSubmit);

/src/server.js

이벤트"enter_room"은 app.js와 동일해야함!
그래야 서버에서 사용할 함수를 클라이언트에서 받아 올 수 있음

// 서버 연결
wsServer.on("connection", (socket) => {
  //socket.on("message")사용안함. 우리가 원하는 이벤트로 사용가능
  socket.on("enter_room", (msg, done) => {
    console.log(msg);
    //done함수는 프론트(app.js)에서 보내주는것! wow!
    setTimeout(() => {
      done();
    }, 10000);
  });
});