[JavaScript] WebSocket vs Socket IO

Socket IO

• 실시간, 양방향, event 기반의 통신을 하는 framework
• webSocket은 위의 통신을 제공하는 여러 방법 중 하나
  • Socket IO는 webSocket의 부가기능 (X)
  • Socket IO는 가끔 webSocket을 이용 (O)
• 만약 webSocket 이용이 불가능하면, Socket IO는 다른 방법을 이용해서 계속 작동 
• 자동 재연결 지원, 연결 끊김 확인, 바이너리 지원
• 탄력성, 신뢰성

 

1. get socket server

• WebSocket

//server.js

const httpServer = http.createServer(app);
const wsServer = new ws. WebSocketServer({httpServer});

 

• Socket IO
  
  • 유저에게 URL 제공 : url/socket.io/socket.io.js -> front-end에서 쉽게 접근 가능

//server.js

const httpServer = http.createServer(app);
const wsServer = SocketIO(httpServer);

 

 

2. connect to front

• WebSocket

//app.js

const socket = new WebSocket(`ws://${window.location.host}`);

• Socket IO

//app.js

const socket = io();

 

 

3. handle event

• WebSocket
  • object -> string 변환 필요

//app.js

socket.addEventListener('message', (message) => {
	socket.send(message)
});

//server.js

wsServer.on('connection', socket => {
  socket.on('message', (message) => {
    const parsed = JSON.parse(message);
    socket.send(parsed.payload);
  });
});

• Socket IO
  
  • event emit -> 항상 message 보낼 필요 X
  • argument로 object 가능
  • 서버로부터 실행되는 callback 함수가 front-end에서 실행

//app.js

socket.emit('room', { payload: input.value }, () => {
	//서버로 부터 실행되는 callback func
	console.log('server is done');
});

//server.js

wsServer.on('connection', socket => {
  socket.on('room', (msg, done) => {
    console.log(msg);
    done();
  });
});