tutorial 3 wip

Author: gamontec

03-multiplayer/multiplayer.md

@@ -1,5 +1,5 @@
 # 03 – Intro to Three.js – Multiplayer
-
+## Client
 ```js
 // 03 – Intro to Three.js – Multplayer
 // Client code
@@ -234,4 +234,94 @@ function sendMessage(data){
         socket.send(data)
     }
 }
+```
+## Server
+```js
+// 03 – Intro to Three.js – Multplayer
+// Server code
+// by Guillermo Montecinos
+// March 2021
+// WebSocket implementetion based on Tom Igoe's web socket examples: https://tigoe.github.io/websocket-examples/
+
+const express = require('express')
+const path = require('path')
+
+// Instantiate express app
+const app = express()
+// Import and intialize ws server instance on express
+const wsServer = require('express-ws')(app)
+
+let users = []
+// Use the public folder to load html/js files
+app.use(express.static('public'))
+
+// on get '/' send page to the user
+app.get('/', function (req, res){
+    res.sendFile(path.join(__dirname, '/public/index.html'))
+})
+
+// Callback function that get's executed when a new socket is intialized/connects
+function handleWs(ws){
+    console.log('New user connected: ' + ws)
+    // As soon as a new client connects, assign them an id, store it in the users array and send it back to the client
+    ws.send(JSON.stringify({type: 'user-init', id: users.length}))
+    users.push({socket: ws, id: users.length})
+
+    // When a user disconnects, remove it from the users array and inform all the clients in the network
+    function endUser() {
+        const index = users.findIndex(user => user.socket == ws)
+        users.forEach((user) => {
+            if(user.socket != ws) {
+                // Let know all users that aren't the one disconnecting from the disconnection
+                user.socket.send(JSON.stringify({type: 'user-disconnect', id: users[index].id}))
+            }
+        })
+        console.log('user id: ' + users[index].id + ' disconnected')
+        users.splice(index, 1)
+    }
+    // This callback is triggered everytime a new message is received
+    function messageReceived(m){ 
+        // Parse de data to json
+        const data = JSON.parse(m)
+        // Data setup means a new user received their id and sends back all the initialization parameters
+        if(data.type == 'user-setup') {
+            // Broadcast user setup message called new-user to setup new user in all users except from the originary
+            users.forEach((user) => {
+                // If the user correpsonds to the one on setup, store its initialization data
+                if(user.socket == ws) {
+                    user.color = data.color
+                    user.matrix = data.matrix
+                }
+                // If there are users different to the one setting up, it means there were users previously connected. Hence, we have to let the new user know of their existance.
+                else {
+                    // Send to the new user the previous users data
+                    ws.send(JSON.stringify({type: 'previous-user', id: user.id, color: user.color, matrix: user.matrix}))
+                    // Send to other users the new user setup
+                    data.type = 'new-user'
+                    user.socket.send(JSON.stringify(data))
+                }
+            })
+        }
+        else if(data.type == 'user-update') {
+            // When a user udpates its position, let all other users about it.
+            users.forEach((user) => {
+                if(user.socket != ws) {
+                    user.socket.send(JSON.stringify({type: 'user-move', matrix: data.matrix, id: data.id}))
+                }
+            })
+        }
+    }
+    // Attach callbacks to the socket as soon it gets connected
+    ws.on('message', messageReceived)
+    ws.on('close', endUser)
+}
+
+// Server init
+const port = process.env.PORT || 3000
+app.listen(port, function(){
+    console.log('Server listening on port ' + port)
+})
+
+// Sockets init
+app.ws('/', handleWs)
 ```