Let's build a multiplayer movie trivia/quiz game with socket.io, svelte and node. devlog #1
Tags: webdev, devlog, svelte, node
Published: 2022-08-17 22:31:00

## 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
```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
```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
```js
<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!


![stupidScreenShot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6zeqsvacoun06s4cz2d.PNG)

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