2016 - Ramesh Sampath - Building a Tic-Tac-Toe Two-Player Game using Tornado over Websockets

Description
Learn how to build a Two-player game using Python Tornado web framework. We will be using websockets to make the app realtime.
​
Abstract
We will live code and learn how to build a real-time game app using Tornado web framework and websockets. Through this app, we will learn how to write an web app using Tornado web framework (http://www.tornadoweb.org/), and how to communicate over websockets. We will be building a Tic-Tac-Toe two-player game to learn about these concepts. A player can start a new game or accept a challenge from another player.

When a player starts a new game, the app would create a new game channel, provide a handle to the channel that the player can send to his friend to join in and play. We will not be dealing with any authentication or logins to start a new game or to join an existing one. The goal is to show how easy it's to build an realtime app with Tornado.

Bio
Ramesh loves building data products that blend visualization and machine learning. He mostly uses Flask / Tornado to create web apps, Pandas / Scikit-learn for build machine learning models and D3 for visualizations

https://youtu.be/SkETonolR3U

Transcript

1. Tic-Tac-Toe App with Tornado & WebSockets By Ramesh Sampath APP: http://games.sampathweb.com
2. Ramesh Sampath • Engineer ◦ Build Applications ◦ Build Machine Learning models ◦ Deploy @sampathweb (github / twitter / linkedin)
3. Objective Build and Deploy a Tic-Tac-Toe App that we can play with Friends.
4. Audience • New to WebSockets • May have built some Webapps • Want to built a Game / Chat App
5. Agenda • Tic-Tac-Toe - Single Player • Two Player Game • WebSockets • Tornado • Deploy • Scaling
6. Tic-Tac-Toe App (Command Line)
7. Tic Tac Toe Source: Wikipedia
8. Demo Command Line Version
9. Tic-Tac-Toe - Play with Human
10. Two Player Version Web Server Want to Play Other
11. Web App Clients Web Server Request Response Web App (Python)
12. Web App • Request / Response • Scale to lots of connections ◦ Short lived ◦ Isolated • Flask / Django over WSGI / Gunicorn & Nginx
13. Two Player Version Web Server Want to Play Other
14. Web App • Ajax Long Polling ◦ Latency ◦ Polling Frequency ◦ Server cannot initiate Push • Blocking - One Request at a Time.
15. WebSockets
16. WebSockets WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. (RFC 6455)
17. WebSockets • Tunnel Data (String, Blob, ArrayBuffer) ◦ JSON ◦ XML / HTML ◦ Images, Sound, Video
18. WebSockets API • Open ◦ var ws = new WebSocket(ws://<endpoint>) • Send Message ◦ ws.send() • Receive Message ◦ ws.onmessage()
19. WebSockets Handler Open Socket Connection • Send Message • Receive Messages • Close Connection Handler Handler Handler Handler Application G A M E S T A T E
20. WebSockets • Persistent Connection • Two-way communication • Handle Lots of Connections • Non-Blocking (Async)
21. Async Stack Credits: Anton Caceres - Better asynchronous code with Tornado and Python 3 [EuroPython 2015]
22. Tornado • Web Framework • Single Threaded • Non-Blocking I/O Concurrency • Thousands of Requests
23. Tornado - When to use it • Building REST APIs (GET / POST) • Micro Services • Slow database queries • Communicating with external resources • Need to handle large number of connections
24. Demo!
25. Code Walkthrough Open Text Editor
26. Things to Lookout For • Async entire code ◦ Database Calls - Momoko over SqlAlchemy ◦ External HTTP Calls - AsyncHTTP ◦ Non Async Libraries ▪ Wrapped in coroutines / Threadpool
27. Deploy to AWS
28. Deploy Steps • Deploy Notes in the “README.md” file of repo. https://github.com/sampathweb/board-games-app
29. Deployment Handler Application S T A T E Handler Handler Handler Supervisor Process
30. Scaling App Handler Application S T A T E Handler Handler Handler Handler Application S T A T E Handler Handler Handler Not Connected
31. Problems • Single Instance of App ◦ Latency ◦ Number of connections • Source: Singleton Manager to maintain State
32. Scale with Pub/Sub Load Balancer (Nginx) Clients Tornado Process #1 Tornado Process #2 Tornado Process #3 Tornado Process #4 Supervisor Process Pub / Sub (Redis)
33. Thank You! Slides: https://goo.gl/NKzuZB @sampathweb (Github / Twitter / Linkedin)
34. WebSockets Web Server Web App (Python) Client Client Client Client Starts with HTTP Handshake