A slide from the talk at PyCon JP 2014 (September 14, 2014)

1. shiroyuki on twitter and github http://www.shiroyuki.com
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
1

2. Juti Noppornpitak This Session’s Speaker
2

3. What’s on the menu?
3

4. What is WebSocket?
4

5. 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

6. HTTP Server
WS Server
Browser
HTTP
WebSocket!
Protocol
6

7. Why develop a WebSocket server in Python?
7

8. 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

9. Now, it is the time for the demo.
9

10. What do we use to make a demo app?
10

11. http ws
Flask Tornado
RabbitMQ
Vanilla JavaScript
jQuery
SCSS
Flexbox
Pika
11

12. Now, let’s see WebSocket in action!
12

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

14. 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

15. 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.

16. Step 0 - Mockup
Before we start, let’s see what the UI looks like.
(Branch: step-0-mockup)
16

17. Demo
17

18. Step 1 - Basic WebSocket Integration
We start the basic integration with WebSocket.
(Branch: step-1-basic-ws)
18

19. 19

20. Demo
20

21. What just happened?
21

22. A handshake with HTTP from the client
this.client = new WebSocket("ws://localhost:8080/relay");
GET ws://localhost:8080/relay HTTP/1.1
Host: localhost:8080
Upgrade: websocket
Connection: Upgrade
Origin: http://localhost:8000
...
22

23. 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

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

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

26. 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

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

28. Message Exchange
28

29. Demo
You may now join the conversation at
http://home.shiroyuki.com:8000/.
Please be nice to each other.
29

30. 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

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

32. Has anyone missed Pika?
32

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

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

35. 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

36. 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

37. Demo
For the last time… Trust me.
37

38. As you can see, from the user perspective,
nothing changes.
38

39. Only the method of
exchanging messages!
are different.
39

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

41. 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

42. And, no more demo
Otherwise, this will be WebSocket 102.
42

43. Alternatives?
flask-sockets
gevent-websocket
flask-socketio
autobahn
your imagination
43

44. The end
最後まで聞いてくれて、どうもありがとうございました。
44 Taken in Montréal, Quebec, Canada on April, 2014

45. All photographs are taken and copyrighted by Juti Noppornpitak.