Socket.io 를 왜 쓰는가?

http를 이용해서 서버와 통신을 하게 된다면 요청과 응답의 사이에서 그 사이에 정보의 업데이트를 받지 못하게 된다.

예를 들면, 영화 좌석 예매를 하는 경우에 내가 원하는 자리를 선택하고 결제를 하려는 사이에 다른 사람이 내 자리를 먼저 선택하고 먼저 결제를 해버리는 정보를 업데이트를 할 수가 없다는 것이다.

이러한 문제를 해결하기 위해서는 계속 요청과 응답을 해야되는 복잡하고 비효율적인 통신을 했어야 했다. 이를 극복하기 위해 socket 을 이용해서 실시간으로 통신이 가능하도록 하는 것이다.

Socket.io 를 사용하는 이유

웹 브라우저에서 실시간 통신을 위해 여러 기술들이 발전해 왔다. ajax, polling, web socket 과 같은 여러 기술들이 나왔지만 chrome, firefox, safari, internet explore 등등 다양한 웹 브라우저들이 있기 때문에 모든 웹 브라우저에서 호환되는 실시간 통신이 가능한 기술은 없었기 때문에 불편했다.

이 문제를 해결한 것이 socket.io 이며, 자동으로 브라우저의 종류에 맞춰 호환되는 기술을 자동으로 선택하여 실시간 통신이 가능하게 만들어준다.

socket.io 사용하기

npm install socket.io 로 라이브러리를 설치해 준다.

1. socket.io 서버, HTTP 서버를 준비한다. express, http 모듈을 이용해서 HTTP서버, socket.io서버를 구축한다.

2. 웹 브라우저 에서 HTTP 요청을 서버로 보낸다.(html로 보내며 socket.io 의 코드도 같이 보낸다)

3. 서버는 HTTP 응답을 웹 브라우저로 보낸다.(마찬가지로 html로 보내며 socket.io 의 코드도 같이 보냄)

4. 이제 웹 브라우저에서 받은 html 코드안의 socket.io를 이용해서 클라이언트를 생성하고 socket.io를 이용해서 socket.io서버에 접속해서 실시간 통신을 하게 된다.

socket.io 클라이언트 이벤트

connect : 서버와 연결

error : 연결 에러

disconnect : 연결 끊김

reconnect : 재접속(서버와 연결이 끊어지면 자동으로 재접속 시도)

이벤트를 기반한 데이터 교환방법

socket.emit()
// 이벤트 발생 1:1 방식
socket.emit('EVENT', data)

socket.on() : 이벤트 수신
socket.on('EVENT', function(data){})
// 이벤트 핸들러를 함수형태로 전달

socket.io.emit('BroadcastEvent', [data])
// 서버에서 모든 소켓에 이벤트 발생시키기 io.emit 으로도 가능

1:N 통신 방법

만약 특정 소켓에다만 통신을 하고 싶으면 namespace, room개념을 이용하여 통신을 할 수 있다.

같은 namespace에서만 데이터를 주고 받을 수 있기 때문이다.

Default 네임스페이스 생성 방법

Default 네임스페이스의 주소는 '/' 이다.

//server
let io = require('socket.io')(server)

//client
let socket=io()

커스텀 네임스페이스 생성 방법

//server
let nsp = io.of('/Custom')

//clinet
let nsp = io('/Custom')

예제코드

// server

// 기본 네임스페이스 생성
let io = require('socket.io')(server)

// 커스텀 네임스페이스 생성
let private = io.of('/private') // 네임스페이스 생성

private.on('connection', function(socket){
	console.log('네임스페이스방 등록')
})
private.emit('message', 'privateRoom')

// client

// 기본 네임스페이스 생성
let socket = io();

// 커스텀 네임스페이스 생성

let clientPrivate = io('http://localhost:3000/private')
clientPrivate.on('connect', function(){
	console.log('네임스페이스 연결됨')
})
clientPrivate.on('message', function(data) {
	console.log(data)
})

room 의 개념

네임스페이스 안의 채널(채팅방과 비슷한 개념)
같은 룸에서만 데이터 교환
room에 입장하는 join 기능(여러 room에 입장 가능)
room에서 나가기 leave 기능

서버쪽에서 클라이언트를 join, leave 시킨다. 클라이언트는 자기가 들어가거나 나갈 수 없기 때문에 emit을 이용해서 서버에 이벤트를 요청해야 한다

Socket.join('roomName', function(data)) // 특정 룸에 입장

Socket.leave('roomName', function(data)) // 특정 룸에서 나가기

Socket.to('roomName') // 특정 룸에만 이벤트 발생시키기