Let's build a multiplayer movie trivia/quiz game with socket.io, svelte and node. devlog #1

Backstory

Before getting distracted by the redishackathon I was thinking about making a movie trivia/quiz multiplayer game. Only thing i had started with was doing some experimentation with how the interface should work.

Short overview

The idea is I will fetch data from an api like themoviedb or similar and based on that make questions like:

• rank these 3 movies from year released, newest to oldest or similar data where can do rank question).

• pick the movie where actor x is acting in.. or any kind of pick one data

Interface basically be a row of images with the movie covers and you use the mouse to drag them when ranking or select when selecting one. Will also have to work on mobile.

Stack

Frontend: Svelte
Backend: Node
Communication: Socket.io

Later might add redis/mongodb depending on what features I implement.

Planning

I kinda suck at planning so for now like no planning, just straight to code and do some planning a bit later when have gotten the basic stuff working.

Get to work

These devlogs will not be super detailed showing each command and so on..

Backend

Then just make a new node server and install express and socket.io.
Just basic stuff so wont go through it in detail.

Now set up the server. It will need to use cors as I in development run the server and client on different ports.

index.js

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;

As u see I require in an eventHandler file. This is where all the socket.io junk goes as i want to keep it separate so things wont be too cluttered.

eventHandler.js

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
    });
};

As u see this file for now only contains some console logs so see what happens and make sure communication is working.

Frontend

Start with init a new svelte app.

 npm create vite@latest client

Install socket-io.client

npm install socket-io.client

In App.svelte just delete everything and insert some code

<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>

Done!
Start up some dev servers n see if stuff is working!

Bam! Works.. also get console.logs on node when connect and disconnect so that's good.

Rambling over for now.. need to get bed now..! To be continued..