Web Socket Demo

Demo Project: Web socket api used to handle communication between connected game clients and host.

The api has an endpoint for connecting to and an endpoint to send messages back.

Screen.20Recording.202024-12-06.20at.2011.mp4

simulator_screen_recording_-_device_15_-_2024-12-06_at_11.mp4

Game Flow

Note: Websocket handles unique connection id

1. Client connects and connect route lambda adds entry into table
2. Table stream triggers game state lambda updating game logic and sending update to all connected clients
3. Client sends message with character selection and send message route lambda updates entry into table
4. Table stream triggers game state lambda updating game logic and sending update to all connected clients
5. Host sends host message with start/finish and send host route lambda updates entry into table
6. Table stream triggers game state lambda updating game logic and sending update to all connected clients
7. Client disconnects and disconnect route lambda removes entry into table

Frontend

Package	For
Pixi React	Rendering, react binidngs for Pixi.js
React Spring	Tween animations
React Use Websocket	Web socket Hook
React Hot Toast	Toasts
React Hook Form	Form
Texture Packer	Packing spritesheets

Backend

Uses S3, Route53, Cloudfront, API Gateway, DynamoDB, Lambda and IAM AWS Services.

• CDK used for IaC
• DynamoDB table stores connection id and player/host state
• DynamoDB streams trigger a lambda to handle game logic and 'broadcast' to all connections
• WebSocket API Gateway with lambda route integrations

GitHub

Github actions used for CI/CD

Name	Reason
AWS_BUCKET_ROLE_ARN	Role for put/delete S3 + invalidate Cloudfront
AWS_BUCKET_PATH	S3 Projects
AWS_DISTRIBUTION_ID	Cloudfront id
AWS_LAMBDA_ROLE_ARN	Role for update lambda code