Multiuser Webpage

Multiuser Webpage

Overview

Build a very simple multiuser web app with a back-end powered by Node.js and Express and communication powered by Socket.IO.

Tools

Node, Express, Socket.IO, Heroku

Afterclass Live-Code, Multiuser Webpage

February 22, 2019

In this afterclass Live-Code I built a very simple multiuser web app with a back-end powered by node.js and express.js and communication powered by socket.io. The webpage tracks and shared the postion of each user’s mouse. The actual code from class is not available online, but a cleaned up version is on github.

Final Product: https://multiuserpage.herokuapp.com/

Source Code: https://github.com/jbakse/multi_user_page

Topics Discussed

  • Basic Client-Server App Architecture

    • What information needs to be shared?

      When building a multi-user webpage, decide what information should be shared from the server and what information will be handled on the client side.

    • How should that information be communicated?

      This project uses Socket.IO for server-client communication.

    • How much should the application trust the client?

      More complex games must keep user input and game world information coordinated on the server side, so that all players’ experiences are coordinated. However, server-side information is slower to display, creating more lag for players.

      When designing your game’s architecture, it’s important to balance information coordination, timing, and user experience.

  • Setting up a Node.js Project

  • Building a simple static web server with Express.js

  • Isomorphic Javascript

    Isomorphic JavaScript applications run JavaScript on both the server and client sides.

  • Fitting the pieces together and debugging with console.log

    This project uses many different elements to construct a webpage. Building thing little by little, testing as you go. Be prepared for backtracking, debugging, and restructuring as you develop the project.

Tools Discussed

Node.js

Serverside JavaScript runtime. Node.js

Homepage

NPM

The Node Package Manager, used to install and manage javascript libraries and tools.

homepage

Nodemon

Relaunches a Node application when source is changed.

Homepage

Heroku

Platform as a Service application host.

Homepage

Socket.io

Library for socket communication.

Homepage

Express.js

Popular Node.js library for building a web server.

Homepage