A Socket IO Workshop prototype. Definitely not a scribblio imitation.

Complements the workshop slideshow. Background image from https://skribbl.io/ - go play their fun party game! Used only for this repo's educational purpose.

Checkout the React version of this workshop's code: https://github.com/jonjau/cissa-collaborative-whiteboard-prototype Otherwise, you're in the right place!

If you're familiar with git, clone the repo: git clone https://github.com/5Mixer/cissa-scrawlio.git Otherwise, you can download the code by clicking Code -> Download ZIP.

Ensure that node and npm are installed. Enter the folder in the terminal, install all dependencies with npm i and run the server with npm start. Open the application in your web browser by navigating to localhost:8000.

server.js in the root directory is a node js script that hosts a server. We will edit it to facilitate communication between clients.

public/client.js is the client side script - this runs in the browser. We will so that it sends chat messages to the server, receives broadcasted chat messages from the server, and syncronises the whiteboard.

socket.emit('chat message', input.value);

io.on('connection', (socket) => {
  console.log("New user!");
  // Setup event listeners with the new socket...
});

socket.on('chat message', (msg) => {
  console.log("Received message " + msg);
});

socket.on('chat message', (msg) => {
  io.emit('chat message', msg); // Broadcast to all clients the chat message
});

socket.on('chat message', function(msg) {
	appendMessageToChatHistory(msg);
});

(Add this point, chat messages should work, but new users won't have the chat's history)

Add a messages array to the server which stores all received messages. Add a 'chat history' event listener to the client which can add an array of messages to the UI. When a new client connects to the server, send them all stored messages via this 'chat history' event.

The objects previousMousePosition and currentMousePosition store the start and end of the line stroke. Socket IO lets you send any sort of message data, as we do here. (*any sort you'll likely encounter - even byte data works!)

socket.emit('line', { from: previousMousePosition, to: currentMousePosition });

This will be very similar to how the server broadcasts chat messages to clients.

Again, just like adding chat messages, but this time we'll use the prepared drawLine method.

• Server pulls a random word out of a list
• When a round starts, a new user is selected as the illustrator
• The drawer is given permission to draw, everyone else is given permission to chat
• Server watches for correct guesses in chat