[Node.js] socket.io로 실시간 채팅 구현하기 (1)

🔨 socket.io Install

socket.io를 사용하면 실시간으로 클라이언트와 클라이언트 사이에서 반응을 전달할 수 있다. 즉, 실시간 상호작용을 가능하게 하는 웹소켓을 위한 모듈이다.

npm install --save socket.io

---

 

✨ 이벤트의 의미

이벤트는 웹소켓을 사용하는 '단위'라고 생각하면 되는데, 클라이언트와 서버에서 이벤트 단위로 각 작업을 매칭하게 된다.

• connection : 클라이언트가 연결할때 발생하며, socket객체를 생성한다.
• disconnect : 클라이언트가 연결을 해제할 때 발생
• 이외의 이벤트는 변수 선언을 하듯이 필요에 따라 직접 생성하여 사용한다.

이벤트에 대한 선언을 서버와 클라이언트의 코드를 비교했을때,

// 서버 
socket.on('이벤트1', (data) => {
   '이벤트1'이 발생했을 때 서버에서의 반응 
});

// 클라이언트 
socket.on('이벤트1', (data) => {
  '이벤트1'이 발생했을 때 클라이언트에서의 반응 
});

socket.emit('이벤트1', data); // 특정 이벤트를 발생시키는 코드 

👉 서버와 클라이언트의 코드는 위와 같은 과정으로 진행된다. 클라이언트와 서버 모두 .on을 통해 이벤트에 대한 반응을 정의한다. 이때, .emit을 통해서 이벤트를 발생시키고, 그에 따라 각각 미리 정의해둔 반응을 하게된다.

---

 

📢 자주 쓰이는 메소드

• on() : 소켓 이벤트를 연결한다. 이벤트 발생 시 행동을 정의한다고 생각하면 쉽다.
• emit() : 소켓 이벤트를 발생시킨다.
• listen() : 서버를 생성 및 실행, 클라이언트에서 데이터를 받아온다.
• to() = in() : 특정 클라이언트 추출

위 메소드들을 사용하는 서버 코드 예시

var io = socketio.listen(server);

io.sockets.on('connection', (socket) => {
	socket.on('이벤트1', (data) => {
		console.log('client가 보낸 데이터: ', data);
		socekt.emit('이벤트2', data); 
		// 이벤트1을 연결하고, 발생할때 이벤트2를 발생 & 클라이언트에 전달
	});
	// 위와 같이 이벤트 정의가 가능하다. 
});

---

 

👨‍👩‍👦‍👦 채팅방 생성, 접속하기

• join() : 특정 ROOM에 접속
  특정 room에게 이벤트를 보낼 때는 io.to()를 이용한다.

io.sockets.on('connection', (socket) => {
	var roomName = null;

	socket.on('join', (data) => {
		roomName = data;
		socket.join(data);
	});
	
	socket.on('message', (data) => {
		io.sockets.in(roomName).emit('message', 'test');
		// 특정 방에 있는 클라이언트에게만 메시지 전송 
	});
});

---

✌ 전체 채팅을 구현하는 서버와 클라이언트 코드는 다음 포스팅에서 알아보겠다