12. 웹 소켓으로 실시간 데이터 전송하기

12.1. 웹 소켓 이해하기

웹 소켓 이전에는 polling 방식으로 클라이언트에서 계속 서버에 새로운 정보가 있는지 주기적으로 확인해야했다.

→ 서버에서 10분에 하나의 업데이트가 있었는데 polling으로 10초마다 계속 가져왔다면 59번의 의미없는 네트워크 요청이 있었던 것이다.

HTML5가 나오며 웹 소켓이 등장. 한번 연결하고나면 서로에게 메시지를 주고 받을 수 있다. 서버 ↔ 클라이언트

Server Send Events (SSE)라는 기술도 등장했는데 웹 소켓처럼 연결하지만 다른점은 클라이언트에서 서버로 보낼 수는 없고 서버에서만 클라이언트로 데이터를 보낼수 있는 점. (채팅을 제외하고 실시간을 위해서는 SSE가 주로 쓰일것 같음)

12.2. ws 모듈로 웹 소켓 사용하기

기본 node에서 제공되기 때문에 추가적으로 설치해줘야하는 패키지는 없다.


const WebSocket = require('ws');

module.exports = (server) => {

	const wss = new WebSocket.Server({ server });
	
	wss.on('connection', (ws, req) => {

		const ip = req.headers['x-forwared-for'] || req.socket.remoteAddress;
		console.log(`new connection from ${ip}`);

		wss.on('message', (message) => {
	
		});
	
		wss.on('error', (error) => {
	
		});
	
		wss.on('close', () => {


			clearInterval(ws.interval);
		});
	
		ws.interval = setInterval(() => {
	
		}, 3000);
	
	});
};

12.3. Socket.IO 사용하기

ws를 통해서도 다 가능하지만 express를 사용했던것처럼 구현할때 편의기능들을 socket.io가 많이 제공한다.

틀은 비슷하고 ws://가 아닌 http://를 사용한다.

12.4. 실시간 GIF 채팅방 만들기

몽고디비 사용위한 mongoose 패키지

이미지 업로드를 위해 multer 패키지

랜덤 색상 위해 color-hash 패키지 설치

몽고디비를 통해 room, chat에 대한 스키마를 정의함.

middleware로 사용자 컬러 지정


app.use((req, res, next) => {
	if (!req.session.color) {
		const colorHash = new ColorHash();
		req.session.color = colorHash.hex(req.sessionID);
		console.log(req.session.color, req.sessionID);
	}
	next();
});

같은 세션 아이디는 같은 색상으로 color-hash가 지정해줌.

소켓에서 다른 네임스페이스를 통해 각 room, chat에 대한 연결 분리



const io = SocketIO(...);

const room = io.of('/room');
const chat = io.of('/chat');

room.on('connection', () => {});

chat.on('connection', () => {});