socket.io, svelte 및 node를 사용하여 멀티플레이어 영화 퀴즈/퀴즈 게임을 만들어 봅시다. 데블로그 #1

스택

계획

일하러 가다

백엔드

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require('socket.io');
const path = require('path');


//dev shite with cors support.. remember to change this later
const io = new Server(server, {
    cors: {
        origin: ['http://localhost:5173', 'http://localhost:5174'],
        credentials: true,
    },
});
require('./eventHandler.js')(io);

app.use(express.static(path.join(__dirname, 'public'))); //serve static files from the public folder so can run frontend on the same server

server.listen(3000, () => {
    console.log('listening on *:3000');
});
module.exports = io;

module.exports = function (io) {
    io.on('connection', function (socket) {
        const count = io.engine.clientsCount;
        console.log(socket.id + ' connected c:' + count);

        socket.on('disconnect', () => {
            console.log(socket.id + ' disconnected');
        });
    });

    io.engine.on('connection_error', (err) => {
        console.log(err.req); // the request object
        console.log(err.code); // the error code, for example 1
        console.log(err.message); // the error message, for example "Session ID unknown"
        console.log(err.context); // some additional error context
    });
};

프런트엔드

 npm create vite@latest client

npm install socket-io.client

<script>
    import { io } from 'socket.io-client';

    let connected = '';

    const socket = io('http://localhost:3000');

    socket.on('connect', () => {
        connected = 'We got a signal!';
    });
</script>

<main>
    <h1>{connected}</h1>
</main>