We’ll look into these 3 skeleton project and introduce node, express, and socket.io:
https://github.com/molleindustria/hello-node
https://github.com/molleindustria/hello-express
https://github.com/molleindustria/hello-socket
p5 + socket.io (creating circles)
First socket.io communication between clients. Draw a circle, the circle appears in all clients:
https://github.com/molleindustria/p5-socket
Exercises:
*Make the circles from different clients appear different
*Make a square appear on the right mouse click (or keyboard press)
*Network the mouse position
Real time updates (mouse pointers)
Example of player management
https://github.com/molleindustria/mouses
Exercises:
*When a player clicks, the mouse pointer changes appearance (in all clients)
*When a player clicks on another mouse pointer the clicked pointer “dies” (it should be resolved on the server side)
*Every 5 seconds all the mouse pointers go back to life (also determined by the server)
Smoothed real time (mouses eased version)
Making movements independent from updates
https://github.com/molleindustria/mouses-smooth
Exercise:
*see if you can incorporate the easing in your modded mouses
Client-side prediction (spaceship example)
Movement logic on the server side, the client smooths movements by extrapolating the positions until the next server update
https://github.com/molleindustria/server-prediction
Extend this logic and create a multiplayer shooting game like SpaceWar!*add a state object similar to “players” that keeps track of the bullets
*add a way to visually differentiate players or tell your ship apart
*add a simple collision detection based on distance (circle collider)
*add a game over / respawn condition
Chat Example Series
These incremental examples illustrate some capabilities of node.js and various lobby architectures
Part 1
Rudimentary avatars and speech bubbles. Client side movements. Frame independent movements. p5.js DOM add-on for form and button.
https://glitch.com/~molleindustria-chat1
https://github.com/molleindustria/chat1
Part 2
Basic avatar creation, html UI integration
https://glitch.com/~molleindustria-chat2
https://github.com/molleindustria/chat2
Part 3
socket.io rooms, bad word filtering
https://glitch.com/~molleindustria-chat3
https://github.com/molleindustria/chat3
Part 4 (3b)
Basic lobby with players automatically assigned to rooms to cap the limit or have a games with a specific number of players.
https://glitch.com/~molleindustria-chat4
https://github.com/molleindustria/chat4
Advanced Server Template
This example is barebone on the client side – it’s a simple chat that doesn’t use p5 or any other libraries – but it includes a few technically complex features on the server side:
- rudimentary admin system: logging as username|password you are tagged as administrator and able to
- perform special actions (ban, mute, kick, etc)
- admin user and passwors stored in an .env private file
- admin names are reserved and the server checks for duplicate names
- players’ IPs can be banned
- anti-spam system preventing too many messages from being sent by the same client
- server-side anti-flood system, if too many packets per second are detected the IP gets automatically banned (malicious attack)
- events are wrapped in try/catch statements to prevent hacked clients from crashing the server
- all text messages and user names are filtered against a list of banned words
- inactive players are disconnected after a certain time
- system to detect when the players are away from keyboard (AFK), their tabs are inactive
- system to check that the client and server versions are aligned
- client-side quick login option that assigns a random username and automatically logs in to speed up the testing
- a basic data structure for unchangeable data (data.js on the server side)