Templates & examples (node.js + socket.io)

Download and install node.js

We’ll look into these 3 skeleton project and introduce node, express, and socket.io:




p5 + socket.io (creating circles)

First socket.io communication between clients. Draw a circle, the circle appears in all clients:


*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



*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



*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


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.




Part 2
Basic avatar creation, html UI integration




Part 3
socket.io rooms, bad word filtering




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.




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)