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 https://jacobsmedia.com/fans-become-fanatics/twitch-logo-transparent/ https://en.wikipedia.org/wiki/Kahoot!#/media/File:Kahoot_Logo.svg https://en.wikipedia.org/wiki/Virginia_Cavaliers https://img.webnots.com/2013/06/HTTP-Request-and-Response-Over-Web-1.png https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/IETF_Logo.svg/1200px-IETF_Logo.svg.png https://www.pubnub.com/wp-content/uploads/2014/09/WebSockets-Diagram.png https://miro.medium.com/max/1260/1*pxfq-ikL8zPE3RyGB2xbng.png https://www.freepik.com/free-icon/server-client-exchange_739531.htm https://www.freepngimg.com/png/10486-browsers-free-png-image https://www.stickpng.com/img/games/fortnite/fortnite-battle-royale-logo https://www.flaticon.com/authors/freepik https://www.stickpng.com/assets/images/5847f98fcef1014c0b5e48c0.png https://kahoot.com/library/kahoot-logo/ https://www.lifewire.com/what-version-of-flash-do-i-have-2617986 https://www.theverge.com/2016/1/28/10858250/oracle-java-plugin-deprecation-jdk-9
#GHC19 www.linkedin.com/in/rebeccarkern/ THANK YOU! Rebecca Kern CONNECT WITH US www.linkedin.com/in/liusarah1/ Sarah Liu
#GHC19