Wordle Maker Project 17일차

오늘은 11월 17일 17일차이다.

목표

• 웹소켓 맛보기

진행

오늘은 내가 node.js를 공부했던 책에서 웹소켓 다룬 부분을 다시 훑어보고, 구현해보고, wordle maker에서 어떻게 웹소켓을 구성하여 구현할 지 고민해보았다.
절차는 다음과 같다.
1. solver가 단어 혹은 문자를 입력
2. 입력한 정보를 socket.io의 /solver 네임스페이스를 통해 서버로 전달
3. 서버가 받은 정보를 데이터베이스에 저장 후, socket.io의 /loader 네임스페이스를 통해 클라이언트로 전달, 이때 LoadPage에 접속할 때 join했던, maker의 닉네임에 해당하는 room으로 데이터를 보냄
4. LoadPage에서 실시간으로 데이터를 받아 렌더링

코드

import io from 'socket.io-client';

const TestPage = () => {
    const socket = io('http://localhost:4000', {
        transports: ['websocket']
    });
    socket.on('news', function(data) {
        console.log(data);
        socket.emit('reply', 'Hello Node JS');
    });
    return (
        <div>TestPage</div>
    )
};

export default TestPage;

오늘 웹소켓을 공부하며 예시로 구현했던 클라이언트 부분 웹소켓이다.

const { Server } = require('socket.io');

module.exports = (server, app) => {
    const io = new Server(server, {
        cors: {
            origin: 'http://localhost:3000'
        }
    });
    app.set('io', io);
    const solver = io.of('/solver');
    const loader = io.of('/loader');

    solver.on('connection', (socket) => {
        console.log('solver 네임스페이스 접속');
        socket.on('disconnect', () => {
            console.log('solver 네임스페이스 접속 해제');
        });
    });

    loader.on('connection', (socket) => {
        console.log('loader 네임스페이스 접속');
        socket.on('disconnect', () => {
            console.log('loader 네임스페이스 해제');
        });
    });

    io.on('connection', (socket) => {
        const req = socket.request;
        console.log('새로운 클라이언트 접속!', socket.id, req.ip);
        socket.on('disconnect', () => {
            console.log('클라이언트 접속 해제', req.ip, socket.id);
        });
        socket.on('error', (error) => {
            console.error(error);
        });
        socket.on('reply', (data) => {
            console.log(data);
        });
        socket.interval = setInterval(() => {
            socket.emit('news', 'Hello Socket.IO');
        }, 3000);
    });
};

이 코드는 백엔드에서의 socket.js이다. 일단은 내일 활용할 네임스페이스의 접속과 접속해제만 구현해놨고, 밑에 있는 것은 TestPage와 연결되는 부분이다.

내일 할 것

• 오늘 고민했던 것 바탕으로 실제 구현

마무리

책의 웹소켓 부분이 한두 달 전에 읽었던 내용이라 기억이 가물가물했는데, 오늘 읽어보니 그래도 이해가 좀 된 것 같다. 내일 실제 구현을 하면서 더 감을 익혀봐야겠다.