[React] React에서 socket.io 연결하기

1. socket.io란?

-  socket.io란 실시간으로 상호작용하는 웹 서비스를 만드는 기술인 웹소켓을 쉽게 사용할 수 있게 해주는 모듈이다.

* 참고: http와 socket 차이

 

2. react에서 socket.io 사용하기

글쓴이는 간단하게 index.js 파일에서 socket 연결을 하도록 해봤다. (create-react-app으로 간단히 생성)

[client/index.js]

import socketio from 'socket.io-client';

const socket = socketio.connect('http://localhost:4000');

(() => {
    socket.emit('init', { name: 'bella' });
  
    socket.on('welcome', (msg) => {
      console.log(msg);
    });
    
})();

일단 socket.io-client 모듈을 설치한다 .(npm install socket.io-client)

그 후 위와 같이 'localhost/4000'으로 connect를 요청한다. 'localhost:4000'으로 연결을 요청했기때문에 local 환경에서 4000번 포트로 서버를 열어줘야한다. 아래는 서버의 코드를 살펴보자. 

 

3. express에서 socket.io 사용하기

server는 express-generator를 사용하여 빠르게 구성하였다. app.js에서 io를 선언하고 connect 되었을 때 사용할 callback함수를 정의한다.

// app.js

// var app = express(); 아래 추가
app.io = require('socket.io')();

// module.exports = app; 위에 추가
app.io.on('connection', function(socket) {
	console.log('a user connected');
    
	socket.on('init', function(data) {
		console.log(data.name);
		socket.emit('welcome', `hello! ${data.name}`);
	});
    
});​

그리고 bin/www에서는 아래와 같은 코드를 추가하자.

// bin/www

// var server = http.createServer(app); 아래 추가
app.io.attach(server);

참고로 express server port는 4000으로 설정했다.

[bin/www]

이렇게 설정이 끝났으면 통신이 이루어졌는지 console을 확인해본다.