CSSE Multiplayer Implemenation

[rjawesome]

Node.js Server

• See node_backend folder
• Packages specified in package.json: socket.io for socket communications, uuid used to generate unique identifiers for each player
• index.js contains all the code: https://github.com/nighthawkcoders/teacher_portfolio/blob/main/node_backend/index.js
  • Listens for socket connections and socket messages
    • update = client to server player update,
    • stateUpdate = server to client player update
    • disconnection = client has left
    • connection = new client
    • id = assigns an id to the client
  • socket.io listens on port 3000
• Run using node index.js

Creating a socket.io client

• This is done in the Game Environment: https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameEnv.js#L29

Obtaining and using the ID for this client

• The ID is sent by the server to the client in a socket io message, this message is listened to in Game Environment and put into GameEnv to be used later: https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameEnv.js#L32

Using the ID to determine the appropriate ID for the player object

• The GameEnv.id is used when creating the player in the GameLevel class: https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameLevel.js#L68

Exporting information about Objects to Server

• Each gameObject has an attribute about whether it should be updated through the server
  • this.shouldBeSynced = false, set to true in the Player class
• Each gameObject has a jsonify method to convert it to a JSON object that can be sent via socket.io
  • GameObject https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameObject.js#L51
  • Overriden in Character https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/Character.js#L112
• If this object is to be synced, then it is updated in the logElement method: see here

Being able to add a character to the level in realtime

• In the GameLevel class, an addCharacter method has been added: https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameLevel.js#L89
  • It first checks if a gameObject exists with this ID, otherwise it creates a character based on the character image for that level

Changing a gameObject based on JSON info

• An updateInfo method was added to gameObject to change this gameObject based on data exported from jsonify
  • GameObject: https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameObject.js#L77
  • Overriden in Character: https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/Character.js#L124

Ingesting player Updates from the Server

• This is handled as a part of the GameControl: when a level is loaded listeners are added to stateUpdate -> https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameControl.js#L33
• The handleSocketMessage looks for a gameObject with the ID specified in the message and uses the updateInfo method, if none exists it uses the level's addCharacter method: https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameControl.js#L69

Deleting players when someone leaves

• SImilar to the handleSocketMessage there is a handleSocketDisconnect which is assigned in the same part of code to the disconnection event: https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameControl.js#L34
• It searches for the ID in game objects and then uses the destroy method https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameControl.js#L83

[rjawesome]

Deployment Information

• Change the Backend URL in GameEnv. For secure connection like https use wss instead of ws https://github.com/nighthawkcoders/teacher_portfolio/blob/d6705898dd2a2d8786df2f08e4e1e21d0d54cc01/assets/js/multiplayer/GameEnv.js#L29
• Use the Dockerfile and docker-compose in node_backend
  • adjust the actual output port in the docker-compose
• In NGINX make sure to forward web socket traffic, here is a NGINX file from another project using socket.io

  
  server {
  server_name game.rohanj.dev;
  location / {
       proxy_pass http://localhost:10550;

this magic is needed for WebSocket

    proxy_http_version  1.1;
    proxy_set_header    Upgrade $http_upgrade;
    proxy_set_header    Connection $connection_upgrade;
    proxy_set_header    Host $http_host;
    proxy_set_header    X-Real-IP $remote_addr;
}

}