Leveling Up: Building Multiplayer Games with Web Sockets #GHC19 About Us: #GHC19 Agenda 0. Introduction 1. Simple Chat Application 2. Multiplayer Game 3. Further Applications #GHC19 www.kahoot.com #GHC19 #GHC19 #GHC19 #GHC19 Diagram source: BMC Blog #GHC19 Diagram source: BMC Blog TCP and UDP are the transport level protocols TCP UDP Reliable Unreliable Connection-oriented Connectionless Segment sequencing No sequencing Acknowledge No acknowledgement segments #GHC19 Source: Pluralsight #GHC19 Diagram source: BMC Blog #GHC19 Diagram source: BMC Blog HTTP is used to share information on the application layer #GHC19 Graphic Source: Webnots Alternatives to WebSockets ● Browser Plug-Ins ● Polling ● Long Polling ● Server-Sent Events (SSE) #GHC19 The WebSocket protocol is used for real-time communication RFC-6455 #GHC19 Source: IETF RFC-6455 Some benefits of WebSockets Event driven Reduces network overhead - no need to send full HTTP requests HTTP compatible Co-exists on same port as your web server TLS/SSL compatible Same security as HTTPS #GHC19 WebSocket connection overview #GHC19 Diagram source: PubNub Staff Opening Handshake Client Handshake Server Handshake #GHC19 Source: IETF RFC-6455 Opening Handshake Client Handshake Server Handshake #GHC19 Source: IETF RFC-6455 Opening Handshake Client Handshake Server Handshake #GHC19 Source: IETF RFC-6455 Opening Handshake Client Handshake Server Handshake #GHC19 Source: IETF RFC-6455 Opening Handshake Client Handshake Server Handshake #GHC19 Source: IETF RFC-6455 Data Transfer Base Framing Protocol Data is transferred with a sequence of frames Masking Client must mask all traffic regardless of TLS Sending and Receiving Data Endpoint listens on network connection #GHC19 Source: IETF RFC-6455 Closing Handshake Close Frame messages Each endpoint can initialize and send a close frame message Close Websocket connection Close connection after each endpoint has sent/received the above Close underlying TCP connection Server must close TCP connection immediately #GHC19 Source: IETF RFC-6455 Getting Started #GHC19 Socket.io is a JavaScript library for Node.js #GHC19 Browser Image Source: Free Png Image What dependencies do you need in package.json? express socket.io #GHC19 Get started with three files Client Server HTML file Javascript file Javascript file #GHC19 Icons Source: Freepik from Flaticon Clients, Servers, and Sockets #GHC19 Server User #1 User #2 #GHC19 Icons Source: Freepik from Flaticon Server Clicks Button User #1 User #2 #GHC19 Icons Source: Freepik from Flaticon Server Clicks Button User #1 User #2 #GHC19 Icons Source: Freepik from Flaticon Server User #1 User #2 #GHC19 Icons Source: Freepik from Flaticon Server User #1 User #2 #GHC19 Icons Source: Freepik from Flaticon Server User #1 User #2 #GHC19 Icons Source: Freepik from Flaticon Server User #1 User #2 #GHC19 Icons Source: Freepik from Flaticon Server User #1 User #2 #GHC19 Icons Source: Freepik from Flaticon Server User #1 User #2 #GHC19 Icons Source: Freepik from Flaticon Server User #1 Message Displayed User #2 Message Displayed #GHC19 Icons Source: Freepik from Flaticon Simple Chat Application #GHC19 0. Server-Side Javascript index.js #GHC19 Require appropriate modules #GHC19 Source: socket.io Access files in the directory #GHC19 Source: socket.io Link to initial HTML display #GHC19 Source: socket.io Listen for connection #GHC19 Source: socket.io Start server #GHC19 Source: socket.io 1. Client-Side HTML index.html #GHC19 Tag to update #GHC19 Form with submit button #GHC19 Include sources #GHC19 2. Client-Side Javascript main.js #GHC19 #GHC19 #GHC19 #GHC19 #GHC19 #GHC19 #GHC19 #GHC19 #GHC19 #GHC19 More Advanced Concepts #GHC19 For a more advanced implementation... Broadcasting Sends message to everyone except for one particular socket Namespaces Different endpoints Rooms Separate channels of a namespace #GHC19 Multiplayer Game #GHC19 We started with a simple Frogger homework assignment #GHC19 We started with a simple Frogger homework assignment #GHC19 Our path to enhancing a single player game... Open Source Python WebSocket Client websocket-client Open Source Python WebSocket Server simple-websocket-server (dpallot) Data What should both the clients and the server know? #GHC19 Open Source Projects: SimpleWebSocketServer and websocket-client 0. Server-Side Python server.py #GHC19 Create WebSocket server Require appropriate modules #GHC19 Open Source Project: SimpleWebSocketServer Create WebSocket server Create SimpleWebSocketServer object #GHC19 Open Source Project: SimpleWebSocketServer Create WebSocket server Port 50014 #GHC19 Open Source Project: SimpleWebSocketServer Create WebSocket server FroggerServer #GHC19 Open Source Project: SimpleWebSocketServer Create WebSocket server Start the game and keep the connection open #GHC19 Open Source Project: SimpleWebSocketServer Then define FroggerServer methods #GHC19 Open Source Project: SimpleWebSocketServer Then define FroggerServer methods Handle received messages #GHC19 Open Source Project: SimpleWebSocketServer Then define FroggerServer methods Handle received messages #GHC19 Open Source Project: SimpleWebSocketServer Then define FroggerServer methods Handle received messages #GHC19 Open Source Project: SimpleWebSocketServer Then define FroggerServer methods Handle received messages #GHC19 Open Source Project: SimpleWebSocketServer Then define FroggerServer methods Handle closed connection #GHC19 Open Source Project: SimpleWebSocketServer Then define FroggerServer methods Handle new connections #GHC19 Open Source Project: SimpleWebSocketServer 1. Client-Side Python player1.py #GHC19 Create the persistent client connection Require appropriate modules #GHC19 Open Source Project: websocket-client Create the persistent client connection Create WebSocketApp object #GHC19 Open Source Project: websocket-client Create the persistent client connection Create WebSocketApp object #GHC19 Open Source Project: websocket-client Create the persistent client connection Note: ws vs wss #GHC19 Open Source Project: websocket-client Create the persistent client connection Create WebSocketApp object #GHC19 Open Source Project: websocket-client Create the persistent client connection Open and run forever #GHC19 Open Source Project: websocket-client Then define WebSocket methods Message received action #GHC19 Open Source Project: websocket-client Then define WebSocket methods Print errors #GHC19 Open Source Project: websocket-client Then define WebSocket methods Closed connection action #GHC19 Open Source Project: websocket-client Then define WebSocket methods Run game on connection #GHC19 Open Source Project: websocket-client Also create a short-lived send & receive Require module #GHC19 Open Source Project: websocket-client Also create a short-lived send & receive Create connection #GHC19 Open Source Project: websocket-client Also create a short-lived send & receive Send message #GHC19 Open Source Project: websocket-client Also create a short-lived send & receive Send message #GHC19 Open Source Project: websocket-client Also create a short-lived send & receive Receive message #GHC19 Open Source Project: websocket-client Also create a short-lived send & receive Receive message #GHC19 Open Source Project: websocket-client Also create a short-lived send & receive Close connection #GHC19 Open Source Project: websocket-client Verify that the handshake is successful #GHC19 #GHC19 #GHC19 Further Applications #GHC19 WebSockets come in other languages and frameworks! ● Python: Tornado, pywebsocket ● Node.JS: ws ● Java: Jetty ● Ruby: em-websocket ● PHP: Ratchet, phpws ● Kotlin: WebSocket ● And much more! #GHC19 Source: Matt West’s Blog WebSockets beyond games clickstream data sports updates stock tickers document collaboration #GHC19 Icons Source: Freepik from Flaticon Sources Special thanks to David Kosbie, Associate Teaching Professor at Carnegie Mellon University https://tools.ietf.org/html/rfc645 https://blog.teamtreehouse.com/an-introduction-to-websockets https://en.wikipedia.org/wiki/Discord_(software) https://discordapp.com/developers/docs/reference https://dev.groupme.com/tutorials/push https://api.slack.com/rtm https://dev.twitch.tv/docs/pubsub/ https://en.wikipedia.org/wiki/League_of_Legends https://www.epicgames.com/fortnite/en-US/news/postmortem-of-service-outage-at-3-4m-ccu https://discordapp.com/developers/docs/reference https://technology.riotgames.com/news/running-automated-test-pipeline-league-client-update https://agar.io/ https://news.ycombinator.com/item?id=13266692 https://github.com/uNetworking/uWebSockets https://expressjs.com/ https://socket.io/get-started/chat/ https://socket.io/docs/rooms-and-namespaces/ https://www.tutorialspoint.com/socket.io/socket.io_overview.htm https://www.freecodecamp.org/news/simple-chat-application-in-node-js-using-express-mongoose-and-socket-io-ee62d94f5804/ https://github.com/dpallot/simple-websocket-server https://github.com/websocket-client/websocket-client https://www.infoworld.com/article/2609720/9-killer-uses-for-websockets.html?page=2 https://codeburst.io/polling-vs-sse-vs-websocket-how-to-choose-the-right-one-1859e4e13bd9 https://blog.stanko.io/do-you-really-need-websockets-343aed40aa9b https://stackoverflow.com/questions/35070217/what-technology-does-google-drive-use-to-get-real-time-updates #GHC19 Sources - Graphics https://romannurik.github.io/SlidesCodeHighlighter/ https://www.stickpng.com/img/icons-logos-emojis/tech-companies/slack-logo https://www.behance.net/gallery/70539741/GroupMe-Brand-Context https://www.stickpng.com/img/icons-logos-emojis/tech-companies/whatsapp-logo