WebSocket 101 in Python

PyCon Japan 2014!September 14, 2014 15:35 - 16:05 JST Tokyo, Japan

Juti Noppornpitak!Senior Software Developer

Instaclick Inc. Toronto, Canada

shiroyuki on twitter and github http://www.shiroyuki.com

1

Juti Noppornpitak This Session’s Speaker

2

What’s on the menu?

3

What is WebSocket?

4

WebSocket

• A protocol provides full-duplex communication channels between processes (or machines).

• It is standardized as RFC 6455 in 2011.

• It is design for web development.

• It utilizes HTTP for the handshake process. This means WebSocket apps can operate on normal HTTP ports (80 or 443).

• Supported in all modern browsers.

5

HTTP Server

WS Server

Browser

HTTP

WebSocket!Protocol

6

Why develop a WebSocket server in Python?

7

Why develop a WebSocket server in Python?

• Lots of third-party libraries that we can use are available and mature.

• Easily integrate with any home-grown modules.

• Simplify the deployment as the whole app can be shipped in a single package.

• We have full control on how it works and how it integrates with other components and services.

8

Now, it is the time for the demo.

9

What do we use to make a demo app?

10

Flask Tornado

RabbitMQjQuery

Vanilla JavaScript

FlexboxSCSS

Pika

http ws

11

Now, let’s see WebSocket in action!

12

I know that some of you might want to see the code I use for the live demonstration.

13

It is on GitHub. (> <)https://github.com/shiroyuki/pyconjp-2014-ws-demo

!Sorry, BitBucket sport fans. I am too lazy

to mirror the code on BitBucket.

14

This demo is only compatible with Python 2.7.5 or older.Or use my patch for Pika if you want to use with Python 2.7.6 or newer.

If you try on OS X 10.9, there should be no problem. !

The fork of Pika with the patch to accommodate Python ticket 8865 is available https://github.com/shiroyuki/pika.

Step 0 - MockupBefore we start, let’s see what the UI looks like.

(Branch: step-0-mockup)

16

Demo

17

Step 1 - Basic WebSocket IntegrationWe start the basic integration with WebSocket.

(Branch: step-1-basic-ws)

18

19

Demo

20

What just happened?

21

A handshake with HTTP from the client

GET ws://localhost:8080/relay HTTP/1.1 Host: localhost:8080 Upgrade: websocket Connection: Upgrade Origin: http://localhost:8000 ...

this.client = new WebSocket("ws://localhost:8080/relay");

22

A handshake with HTTP from the server

HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade ...

The client (browser) switches to use the WebSocket protocol.

23

How do the client and the server talk to each other at this step?

24

Step 2 - Chat app without RabbitMQWe start making it work without RabbitMQ. (Branch: step-2-work-without-rabbitmq)

25

The features of the demo chat app

• No registration needed. Just say who you are every time you load the interface.

• It is like an Internet Relay Chat app. The difference is that the app does not use the IRC protocol.

• All identities must be unique.

• The identification is needed before users can send or receive messages.

26

Identification ProcessThis diagram shows the procedure of user identification which is similar to the process of notifying when a user leaves the chat room.

27

Message Exchange

28

DemoYou may now join the conversation at

http://home.shiroyuki.com:8000/. Please be nice to each other.

29

The differences from the previous step

• Git Diff: https://github.com/shiroyuki/pyconjp-2014-ws-demo/compare/step-1-basic-ws...step-2-work-without-rabbitmq

• The communication is changed from raw string to JSON-RPC, which is more flexible.

• The Tornado app (ws.py) has the ability to broadcast messages to other clients.

30

Step 3 - Work with RabbitMQNow, we make it work with RabbitMQ. (Branch: step-3-work-with-rabbitmq)

31

Has anyone missed Pika?

32

Don’t worry. We are using it in this step with RabbitMQ.

33

How do we use Pika for this application?

• Design to use one blocking connection, which is the simplest setup for AMQP with Pika.

• Use only one durable fan-out exchange, called demo-chat, which is automatically declared if the exchange does not exists.

• Each socket connection has its own temporary queue (only one) bound with the demo-chat exchange.

34

Necessary changes to make

• The procedures to consume and publish messages are asynchronous. Because we are using a blocking connection which can block the event loop of the main thread (the Tornado app).

• This app is now multi-threading.

• RabbitMQ is used only for broadcasting messages to multiple users.

35

Comparing with the previous step…

• Cons: The nature of multi-threading applications leads to complexity and potential freeze.

• Pros: Scalability as RabbitMQ handles the message queues.

• Pros: Slightly increase the turnover rate in the communication between the client and the server.

36

DemoFor the last time… Trust me.

37

As you can see, from the user perspective,

nothing changes.

38

Only the method of exchanging messages!

are different.

39

Just to be clear, this demo app may not use libraries properly and efficiently.

40

What more can you improve the demo app?

• Off-load the Tornado app by letting the Flask app asynchronously publish the message in order to increase the message turnover rate in Tornado app.

• Use pika.adapters.TornadoConnection for proper integration with Tornado Framework.(http://pika.readthedocs.org/en/latest/examples/tornado_consumer.html)

• and many more.

41

And, no more demoOtherwise, this will be WebSocket 102.

42

Alternatives?

flask-sockets

gevent-websocket

flask-socketio

autobahn

your imagination

43

The end最後まで聞いてくれて、どうもありがとうございました。

44 Taken in Montréal, Quebec, Canada on April, 2014

All photographs are taken and copyrighted by Juti Noppornpitak.