04
SocketIO vs WebSockets
- 프레임워크 SocketIO
- 역할: 실시간, 양방향, 이벤트 기반 통신
- 프론트와 백엔드 간 실시간 통신을 가능하게 해주는 프레임워크 또는 라이브러리
- websocket을 실행하는게 아님, websocket의 부가기능이 아니다.
- websocket보다 탄력성이 뛰어남
- websocket을 이용하는 것 (이외에도 다른 것을 사용)
ex) websocket을 지원하지 않는 경우 HTTP long polling 같은 것을 사용
- socketIO 설치
npm i socket.io
- 프론트엔드와 백엔드에 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 메세지
닉네임
- 유저가 방에 입장하기 전에 유저에게 방 이름과 닉네임을 물어보기
- 입장할 때 naem arrived!
room에 몇명이 접속했는지 알려주기
admin UI