[포스코 x 코딩온] 웹 풀스택 9주차 회고

Socket.io

웹 소켓 연결을 이용하여 클라이언트와 서버간의 이벤트 기반 양방향 통신을 가능하게 하는 라이브러리

connection - 클라이언트와 서버 연결, 상호작용 초기화하거나 초기 데이터 전달
disconnect - 클라이언트 연결 해제
disconnecting - 클라이언트 연결 해제하려는 경우
error - 연결 중 오류

Socket.io 기본 설정

설치

npm install socket.io

scoket.io 모듈 설치

server socket.io 선언 코드

import http from 'http';
import express from 'express';
import SocketIO from 'socket.io';

const app = expres();
const PORT = 8000;
const server = http.createServer(app);
const io = SokcetIO(server);
//socket은 접속한 웹 페이지, io는 접속해있는 모든 웹페이지
//웹 페이지가 접속되면 고유한 id값이 생성됨. socket.id로 접근가능

//room에 해당하는 정보 가져옴
io.sockets.adapter.rooms.get(room);
//socketId에 해당하는 socket정보 가져옴
io.sockets.sockets.get(socketId);

io.on('connection', (socket) => {
  	//socket은 객체이며 원하는 값 할당 가능
  	socket.room = 'room';
	socket.user = 'user';
	socket.on()...
    
    socket.emit()...
});

client socket.io 코드

<script src="/socket.io/socket.io.js"></script>

<script>
  const socket = io();
  
  socket.on()...
  
  socket.emit()...
</script>

Socket.io 이벤트 송수신

emit

클라이언트에서 서버, 서버에서 클라이언트로 이벤트를 보낼 때 사용

				//이벤트 이름, 전송될 데이터
socket.emit('send message', 'Hello Socket');

to().emit

특정 소켓이나 룸에 이벤트 보낼 때 사용

io.to('room').emit('send message', 'Hello Socket');

broadcast.to().emit

특정 소켓이나 룸에 이벤트를 보내는데, 송신자 클라이언트 제외한 다른 클라이언트에게 전달

socket.broadcast.to('room').emit('send message', 'Hello Socket');

of

특정 네임스페이스에 있는 유저에게만 이벤트 송신
Socket.io -> NameSpace -> Room -> socketId 순으로 단위가 쪼개짐

//새 네임스페이스 생성
io.of('/newRoom');
//해당 네임스페이스에 있으며, room에 있는 유저한테만 이벤트 송신
io.of('/newRoom').to('room').emit('send message', 'Hello Socket');

on

이벤트 수신에 대한 리스너 정의

			//이벤트 이름,   이벤트 수신될 때 호출되는 콜백함수
socket.on('send message', (message) => {
});

룸 입장, 나가기

join

클라이언트를 특정 방을 지정하여 추가

socket.join('room');

leave

클라이언트를 특정 방에서 제거

socket.leave('room');