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..
Top comments (0)