[클론코딩/Zoom] 04 SocketIO

Sujin Lee·2022년 12월 20일
0

클론코딩

목록 보기
4/4
post-thumbnail

04

SocketIO vs WebSockets

  1. 프레임워크 SocketIO
  • 역할: 실시간, 양방향, 이벤트 기반 통신
  • 프론트와 백엔드 간 실시간 통신을 가능하게 해주는 프레임워크 또는 라이브러리
  • websocket을 실행하는게 아님, websocket의 부가기능이 아니다.
  • websocket보다 탄력성이 뛰어남
  • websocket을 이용하는 것 (이외에도 다른 것을 사용)
    ex) websocket을 지원하지 않는 경우 HTTP long polling 같은 것을 사용
  1. socketIO 설치
    npm i socket.io
  2. 프론트엔드와 백엔드에 socket.io 설치
  • 프론트엔드 (home.pug)
    script(src="/socket.io/socket.io.js")
  • 백엔드 (server.js)
    const wsServer = SocketIO(server);

room 만들기

  • socketIO의 기능
  • 자바스크립트 오브젝트 전송 가능 (이전 에는 오브젝트를 string으로 바꿔야했음 )
  • socket.send가 아닌 socket.emit
    socket.emit(프론트)과 socket.on(백엔드)에는 같은 이름 사용해서 모든 걸 가능
  • 원하는 만큼 백엔드로 보낼 수 있음 (오브젝트 가능)
  • 프론트에서 받은 것을 백엔드에서 실행시키면 안된다
    server.js: 백엔드에서 done함수를 실행시키지 않고,

    app.js: 프론트엔드에서 실행 버튼을 눌러주는 거라고 생각하자
  • socket.join

room 메세지

  • socekt.to

닉네임

  • 유저가 방에 입장하기 전에 유저에게 방 이름과 닉네임을 물어보기
  • 입장할 때 naem arrived!

room에 몇명이 접속했는지 알려주기

admin UI

profile
공부한 내용을 기록하는 공간입니다. 📝

0개의 댓글