채팅 앱 만들기 - socket

다양한 통신 방식

polling(폴링)

웹 소켓이 나오기 전에 실시간 데이터 전송을 구현하던 방법으로, HTTP가 클라이언트에서 서버로 향하는 단방향 통신이다. 주기적으로 서버에 새로운 업데이트가 있는지 확인하는 요청을 보낸 후 있다면 새로운 내용을 가져오는 단순한 방법.

SSE(서버센트 이벤트)

EventSource라는 객체를 사용하여 처음 한 번만 서버에 연결하면 서버가 클라이언트에 지속적으로 데이터를 보내는 방식이다. 클라이언트에서 서버로 데이터를 보내는 것이 불가능하다. 즉, 서버에서 클라이언트로 데이터를 보내는 단방향 통신.

Web Socket(웹 소켓)

웹 브라우저와 웹 서버가 지속적으로 연결된 라인틀 통해 실시간으로 데이터를 주고받을 수 있다. 처음 웹 소켓 연결이 이루어지면 그 다음부터는 계속 연결된 상태로 있으므로 따로 업데이트가 있는지 요청을 보낼 필요가 없다. HTTP 프로토콜과 포트를 공유할 수 있어 다른 포트에 연결할 필요도 없다. 이번 채팅 앱을 만들 때는 Web Socket(웹 소켓)방식을 사용한다.

socket.js

const SocketIO=require('socket.io');

module.exports=(server, app)=>{
	const io=SocketIO(server, {path:'/socket.io'});
	app.set('io', io);
	const room=io.of('/room');
	const chat=io.of('/chat');
	
	room.on('connection', (socket)=>{
		console.log('connect room namespace');
		socket.on('disconnect', ()=>{
			console.log('disconnect room namespace');
		});
	});
	
	chat.on('connection', (socket)=>{
		console.log('connect chat namespace');
		const req=socket.request;
		const {headers:{referer}}=req;
		const roomId=referer
			.split('/')[referer.split('/').length - 1]
			.replace(/\?.+/, '');
		socket.join(roomId);
		
		socket.on('disconnect', ()=>{
			console.log('disconnect chat namespace');
			socket.leave(roomId);
		});
	});
};;

• 'of'메서드
  Socket.IO에 네임스페리스를 부여하는 메서드.
  Socket.IO는 기본적으로 / 네임스페이스에 접속하지만 of 메서드를 하용하면 다른 네임스페이스를 만들어 접속할 수 있다. 같은 네임스페이스끼리만 데이터를 전달할 수 있음.
  /room 네임스페이스 - 채팅방 생성 및 삭제에 관한 네임스페이스
  /chat 네임스페이스 - 채팅 메시지를 전달하는 네임스페이스