Socket.io의 기본적 사용법

Socket.io

• 클라이언트와 서버 간의 짧은 지연 시간, 양방향 및 이벤트 기반 통신을 실시간 으로 가능하게 하는 라이브러리

• WebSocket 프로토콜 위에서 구축되었으며 통신 과정을 단순화하고 개선하 기 위한 추가 기능을 제공

• 이벤트 기반이며, 연결이 끊어질 시 자동으로 재연결 시도를 한다는 특징이 있다.

 

Socket.io의 기본적인 이벤트

이벤트명	의미
connection	• 클라이언트가 서버에 연결되었을 때 발생. • 클라이언트와의 상호작용을 초기화하거나 초기 데이터를 전달할 수 있 음
disconnect	클라이언트가 연결을 해제했을 때 발생
disconnecting	클라이언트가 연결을 해제하려는 경우에 함수를 실행하고 싶다면 발생
error	연결 중에 오류가 발생했을 때 발생

 

사용자 지정 이벤트

룸 관련 함수

 

socket.join("roomA");  
// 'roomA' 방에 참여
socket.leave("roomA");  
// 'roomA' 방에서 나가기
io.to("roomA").emit("message", "Hello Room A!");  
// 'roomA' 방에 있는 모든 클라이언트에게 'Hello Room A!' 메시지 전송
socket.to("roomA").emit("message", "Hello Room A!");  
// 'roomA' 방에 있는 다른 클라이언트들에게 'Hello Room A!' 메시지 전송
socket.broadcast.to("roomA").emit("message", "A new user has joined the room.");  
// 'roomA' 방에 새로운 사용자가 들어왔다는 메시지를 방에 있는 다른 사용자들에게 전송
socket.broadcast.emit("message", "A new user has joined the room");  
// 모든 클라이언트에게 '새로운 사용자가 들어왔습니다'라는 메시지 전송
io.socket.emit("message", "Hello, Room A!");  
// 모든 클라이언트에게 'Hello, Room A!' 메시지 전송
const roomInfo = io.sockets.adapter.rooms.get(room);  
// 'room'에 대한 정보를 가져옴
console.log(roomInfo);  
// 'room'에 대한 정보를 콘솔에 출력

 

 

Socket.io를 실제로 사용하는 방법

 

1. socket.io를 사용하기 위한 모듈 패키지를 설치한다.

npm install socket.io

2. Socket.io를 프론트 단의 js에서 불러온다.

3. 클라이언트 소캣을 스크립트 단에서 생성한다.

const socket = io();

io() 함수는 클라이언트 소켓을 생성하고, 서버와의 연결을 설정

4.  불러온 io로 서버로 전송할 메세지와 재전송을 받을 메세지를 설정한다.

주로, 버튼 클릭 시 함수를 실행하고, 함수 안에서 해당 메세지를 서버로 보내는 식

5. 해당 메세지를 받고 프론트엔드로 메세지를 다시 전달할 io를 백엔드 단에 설정한다.