[Node.js] 12장 웹 소켓으로 실시간 데이터 전송하기

22-23/22-23 Node.js

[Node.js] 12장 웹 소켓으로 실시간 데이터 전송하기

dev otcroz 2022. 12. 22. 10:00

728x90

🔍 웹 소켓

실시간 양방향 데이터 전송을 위한 기술

WS 프로토콜 사용
노드에서는 WS나 Socket.IO 같은 패키지를 통해 웹 소켓 사용 가능
처음 웹 소켓 연결이 이루어지고 나면 계속 연결된 상태로 있으므로 업데이트가 있는지 따로 요청 보낼 필요 없음
HTTP 프로토콜과 포트 공유 가능하므로 다른 포트에 연결할 필요 없음

✅ 폴링(polling)

웹 소켓 이전에는 HTTP 기술을 사용하여 실시간 데이터 전송 구현했고, 대표적인 방법이 폴링이다.

HTTP가 클라이언트에서 서버로 향하는 단방향 통신이므로 주기적으로 서버에 새로운 업데이트가 있는지 요청 보낸 후, 있다면 가져오는 단순 무식한 방법.

✅ 서버센트 이벤트(Server Sent Events, SSE)

EventSource 객체 사용

처음에 한 번만 연결하면 서버가 클라이언트에 지속적으로 데이터를 보낸다. 웹 소켓과의 다른 점은 클라이언트에서는 서버로 데이터를 보낼 수 없다.

📌 Socket.IO

웹 소켓을 편리하게 사용할 수 있도록 도와주는 라이브러리

📌 웹 소켓 상태

CONNECTING: 연결 중
OPEN: 열림, 열림일 때만 에러 없이 메시지를 보낼 수 있다.
CLOSING: 닫는 중
CLOSED: 닫힘

📌 웹 소켓 로직 코드 (ws 패키지)

//socket.js
const WebSocket=require('ws');

module.exports = (server) => {
    const wss = new WebSocket.Server({server}); //익스프레스 서버를 웹 소켓 서버와 연결

	//웹소켓 서버에 이벤트 리스너 붙이기
    wss.on('connection', (ws, req) => { //웹소켓 연결 시
    
    	//클라이언트 ip 알아내기
        const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        
        console.log('새로운 클라이언트 접속', ip);
        ws.on('message', (message) => { //클라이언트로부터 메시지 수신 시
            console.log(message);
        });
        ws.on('error', (error) => { //에러 시
            console.error(error);
        });
        ws.on('close', () => { //연결 종료 시
            console.log('클라이언트 접속 해제', ip);
            clearInterval(ws.interval);
        });

        ws.interval = setInterval(() => { //3초마다 클라이언트로 메시지 전송
            if(ws.readyState === ws.OPEN){
                ws.send('서버에서 클라이언트로 메시지를 보냅니다.');
            }
        }, 3000);
    });
};

ws 패키지는 간단하게 웹 소켓을 사용하고자 할 때 좋다.

ws 모듈 불러온 후 익스프레스 서버를 웹 소켓과 연결했다. 연결 후에는 웹 소켓 서버(wss)에 이벤트 리스너를 붙인다. 웹 소켓은 이벤트 기반으로 작동한다고 생각하면 된다. 실시간으로 데이터를 전달받으므로 항상 대기해야 한다.

🔍 Socket.IO

구현하려는 서비스가 좀 더 복잡해진다면 Socket.IO를 사용하는 것이 편하다.

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

module.exports = (server) => {
    const io = SocketIO(server, { path: '/socket.io' });

    io.on('connection', (socket) => { // 웹소켓 연결 시
        const req = socket.request;
        const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress;
        console.log('새로운 클라이언트 접속!', ip, socket.id, req.ip);
        socket.on('disconnect', () => { // 연결 종료 시
            console.log('클라이언트 접속 해제', ip, socket.id);
            clearInterval(socket.interval);
        });
        socket.on('error', (error) => { // 에러 시
            console.error(error);
        });
        socket.on('reply', (data) => { // 클라이언트로부터 메시지
            console.log(data);
        });
        socket.interval = setInterval(() => { // 3초마다 클라이언트로 메시지 전송
            socket.emit('news', 'Hello Socket.IO');
        }, 3000);
    });
};

socket.io 패키지를 불러와 익스프레스 서버와 연결
연결 후에는 이벤트 리스너를 붙인다. connection 이벤트는 클라이언트가 접속했을 때 발생하고, 콜백으로 소켓 객체(socket)를 제공
io와 socket 객체가 Socket.IO의 핵심이다.

socket 객체에 이벤트 리스너

disconnect: 클라이언트가 연결을 끊었을 때 발생
error: 통신 과정에서 에러가 나왔을 때 발생
reply: 사용자가 직접 만든 이벤트, 클라이언트에서 reply라는 이벤트명으로 데이터를 보낼 때 서버에서 받는 부분

클라이언트 부분

<!-- veiws/index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>GIF 채팅방</title>
</head>
<body>
<div>F12를 눌러 console 탭과 network 탭을 확인하세요.</div>
<script src="/socket.io/socket.io.js"></script>
<script>
    const socket = io.connect('http://localhost:8005', { 
        path: '/socket.io',
        transports: ['websocket'],
    });
    socket.on('news', function (data) {
        console.log(data);
        socket.emit('reply', 'Hello Node.JS');
    });
</script>
</body>
</html>

/socket.io/socket.io.js는 Socket.IO에서 클라이언트로 제공하는 스크립트이며, 이 스크립트를 통해 서버와 유사한 API로 웹 소켓 통신 가능
스크립트가 제공하는 io 객체에 서버 주소를 적어 연결
ws 프로토콜이 아니라 http 프로토콜을 사용

🔍 미들웨어와 소켓 연결

Socket.IO도 미들웨어를 사용할 수 있으므로 express-session을 공유하면 된다.

📌 socket.js.의 axios 요청

socket.js에서 axios 요청을 보낼 때는 요청자가 누구인지에 대한 정보가 들어있지 않다. 브라우저에서 axios 요청을 보낼 때는 자동으로 쿠키를 같이 넣어서 보내지만, 서버에서 axios 요청을 보낼 때는 쿠키가 같이 보내지지 않는다. 따라서 express-session이 요청자가 누구인지 판단할 수 없으므로, 요청 헤더에 세션 쿠키를 직접 넣어야 한다.

io 객체에 cookie-parser를 연결한 후 axios 요청을 보낼 때 connet.sid 쿠키를 직접 설정한다.

🔍 기타 Socket.IO API

특정인에게 메세지 보내는 API, 특정 방에 보내는 것과 유사하지만, 방 아이디 대신 특정인의 소켓 아이디를 넣는다는 점에서 다르다.

socket. to (소켓 아이디).emit(이벤트, 데이터);

나를 제외한 모두에게 메시지 보내기

socket.broadcast.emit(이벤트, 데이터);
socket.broadcast. to (방아이디).emit(이벤트, 데이터);

🔍 핵심 정리

웹 소켓과 HTTP는 같은 포트를 사용할 수 있으므로 따로 포트를 설정할 필요 없다.
웹 소켓은 양방향 통신이므로 서버뿐만 아니라 프론트엔드 쪽 스크립트도 사용해야 한다.
Socket.IO를 사용하면 웹 소켓을 지원하지 않는 브라우저에서까지 실시간 통신을 구현할 수 있다.
Socket.IO 네임스페이스와 방 구분을 통해 실시간 데이터를 필요한 사용자에게만 보낼 수 있다.
app.set('io', io)로 소켓 객체를 익스프레스와 연결하고, req.app.get('io')로 라우터에서 소켓 객체를 가져오는 방식
소켓 통신과 함께 데이터베이스 조작이 필요한 경우, 소켓만으로 해결하기보다는 HTTP 라우터를 거치는 것이 좋다.

Node.js

Editor : seol

728x90