1 of 34

Tic-Tac-Toe App with Tornado & WebSockets

By Ramesh Sampath

​

APP: http://games.sampathweb.com

​

2 of 34

Ramesh Sampath

  • Engineer
    • Build Applications
    • Build Machine Learning models
    • Deploy

@sampathweb (github / twitter / linkedin)

​

​

3 of 34

Objective

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

4 of 34

Audience

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

5 of 34

Agenda

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

6 of 34

Tic-Tac-Toe App (Command Line)

7 of 34

Tic Tac Toe

​

​

​

​

​

​

Source: Wikipedia

​

8 of 34

Demo

​

​

Command Line Version

​

9 of 34

Tic-Tac-Toe - Play with Human

10 of 34

Two Player Version

Web Server

Want to Play Other

11 of 34

Web App

Clients

Web Server

Request

Response

Web App (Python)

12 of 34

Web App

  • Request / Response
  • Scale to lots of connections
    • Short lived
    • Isolated�
  • Flask / Django over WSGI / Gunicorn & Nginx

13 of 34

Two Player Version

Web Server

Want to Play Other

14 of 34

Web App

  • Ajax Long Polling
    • Latency
    • Polling Frequency
    • Server cannot initiate Push�
  • Blocking - One Request at a Time.

15 of 34

WebSockets

16 of 34

WebSockets

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

​

17 of 34

WebSockets

  • Tunnel Data (String, Blob, ArrayBuffer)
    • JSON
    • XML / HTML
    • Images, Sound, Video

18 of 34

WebSockets API

  • Open
    • var ws = new WebSocket(ws://<endpoint>)
  • Send Message
    • ws.send()
  • Receive Message
    • ws.onmessage()

19 of 34

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 of 34

WebSockets

  • Persistent Connection
  • Two-way communication
  • Handle Lots of Connections

​

  • Non-Blocking (Async)

21 of 34

Async Stack

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

22 of 34

Tornado

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

23 of 34

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 of 34

Demo!

25 of 34

Code Walkthrough

Open Text Editor

26 of 34

Things to Lookout For

  • Async entire code
    • Database Calls - Momoko over SqlAlchemy
    • External HTTP Calls - AsyncHTTP
    • Non Async Libraries
      • Wrapped in coroutines / Threadpool

27 of 34

Deploy to AWS

28 of 34

Deploy Steps

  • Deploy Notes in the “README.md” file of repo.

​

https://github.com/sampathweb/board-games-app

​

​

29 of 34

Deployment

Handler

Application

​

S

T

A

T

E

Handler

Handler

Handler

Supervisor Process

30 of 34

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 of 34

Problems

  • Single Instance of App
    • Latency
    • Number of connections

​

  • Source: Singleton Manager to maintain State

32 of 34

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 of 34

Thank You!

​

Slides: https://goo.gl/NKzuZB

​

@sampathweb (Github / Twitter / Linkedin)

34 of 34

WebSockets

Starts with HTTP Handshake

Web Server

Web App (Python)

Client

Client

Client

Client