Slide 1

Slide 1 text

Tic-Tac-Toe App with Tornado & WebSockets By Ramesh Sampath APP: http://games.sampathweb.com

Slide 2

Slide 2 text

Ramesh Sampath ● Engineer ○ Build Applications ○ Build Machine Learning models ○ Deploy @sampathweb (github / twitter / linkedin)

Slide 3

Slide 3 text

Objective Build and Deploy a Tic-Tac-Toe App that we can play with Friends.

Slide 4

Slide 4 text

Audience ● New to WebSockets ● May have built some Webapps ● Want to built a Game / Chat App

Slide 5

Slide 5 text

Agenda ● Tic-Tac-Toe - Single Player ● Two Player Game ● WebSockets ● Tornado ● Deploy ● Scaling

Slide 6

Slide 6 text

Tic-Tac-Toe App (Command Line)

Slide 7

Slide 7 text

Tic Tac Toe Source: Wikipedia

Slide 8

Slide 8 text

Demo Command Line Version

Slide 9

Slide 9 text

Tic-Tac-Toe - Play with Human

Slide 10

Slide 10 text

Two Player Version Web Server Want to Play Other

Slide 11

Slide 11 text

Web App Clients Web Server Request Response Web App (Python)

Slide 12

Slide 12 text

Web App ● Request / Response ● Scale to lots of connections ○ Short lived ○ Isolated ● Flask / Django over WSGI / Gunicorn & Nginx

Slide 13

Slide 13 text

Two Player Version Web Server Want to Play Other

Slide 14

Slide 14 text

Web App ● Ajax Long Polling ○ Latency ○ Polling Frequency ○ Server cannot initiate Push ● Blocking - One Request at a Time.

Slide 15

Slide 15 text

WebSockets

Slide 16

Slide 16 text

WebSockets WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. (RFC 6455)

Slide 17

Slide 17 text

WebSockets ● Tunnel Data (String, Blob, ArrayBuffer) ○ JSON ○ XML / HTML ○ Images, Sound, Video

Slide 18

Slide 18 text

WebSockets API ● Open ○ var ws = new WebSocket(ws://) ● Send Message ○ ws.send() ● Receive Message ○ ws.onmessage()

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

WebSockets ● Persistent Connection ● Two-way communication ● Handle Lots of Connections ● Non-Blocking (Async)

Slide 21

Slide 21 text

Async Stack Credits: Anton Caceres - Better asynchronous code with Tornado and Python 3 [EuroPython 2015]

Slide 22

Slide 22 text

Tornado ● Web Framework ● Single Threaded ● Non-Blocking I/O Concurrency ● Thousands of Requests

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Demo!

Slide 25

Slide 25 text

Code Walkthrough Open Text Editor

Slide 26

Slide 26 text

Things to Lookout For ● Async entire code ○ Database Calls - Momoko over SqlAlchemy ○ External HTTP Calls - AsyncHTTP ○ Non Async Libraries ■ Wrapped in coroutines / Threadpool

Slide 27

Slide 27 text

Deploy to AWS

Slide 28

Slide 28 text

Deploy Steps ● Deploy Notes in the “README.md” file of repo. https://github.com/sampathweb/board-games-app

Slide 29

Slide 29 text

Deployment Handler Application S T A T E Handler Handler Handler Supervisor Process

Slide 30

Slide 30 text

Scaling App Handler Application S T A T E Handler Handler Handler Handler Application S T A T E Handler Handler Handler Not Connected

Slide 31

Slide 31 text

Problems ● Single Instance of App ○ Latency ○ Number of connections ● Source: Singleton Manager to maintain State

Slide 32

Slide 32 text

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)

Slide 33

Slide 33 text

Thank You! Slides: https://goo.gl/NKzuZB @sampathweb (Github / Twitter / Linkedin)

Slide 34

Slide 34 text

WebSockets Web Server Web App (Python) Client Client Client Client Starts with HTTP Handshake