websocket 101 in python
DESCRIPTION
A slide from the talk at PyCon JP 2014 (September 14, 2014)TRANSCRIPT
![Page 1: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/1.jpg)
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
![Page 2: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/2.jpg)
Juti Noppornpitak This Session’s Speaker
2
![Page 3: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/3.jpg)
What’s on the menu?
3
![Page 4: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/4.jpg)
What is WebSocket?
4
![Page 5: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/5.jpg)
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
![Page 6: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/6.jpg)
HTTP Server
WS Server
Browser
HTTP
WebSocket!Protocol
6
![Page 7: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/7.jpg)
Why develop a WebSocket server in Python?
7
![Page 8: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/8.jpg)
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
![Page 9: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/9.jpg)
Now, it is the time for the demo.
9
![Page 10: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/10.jpg)
What do we use to make a demo app?
10
![Page 11: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/11.jpg)
Flask Tornado
RabbitMQjQuery
Vanilla JavaScript
FlexboxSCSS
Pika
http ws
11
![Page 12: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/12.jpg)
Now, let’s see WebSocket in action!
12
![Page 13: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/13.jpg)
I know that some of you might want to see the code I use for the live demonstration.
13
![Page 14: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/14.jpg)
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
![Page 15: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/15.jpg)
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.
![Page 16: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/16.jpg)
Step 0 - MockupBefore we start, let’s see what the UI looks like.
(Branch: step-0-mockup)
16
![Page 17: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/17.jpg)
Demo
17
![Page 18: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/18.jpg)
Step 1 - Basic WebSocket IntegrationWe start the basic integration with WebSocket.
(Branch: step-1-basic-ws)
18
![Page 19: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/19.jpg)
19
![Page 20: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/20.jpg)
Demo
20
![Page 21: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/21.jpg)
What just happened?
21
![Page 22: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/22.jpg)
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
![Page 23: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/23.jpg)
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
![Page 24: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/24.jpg)
How do the client and the server talk to each other at this step?
24
![Page 25: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/25.jpg)
Step 2 - Chat app without RabbitMQWe start making it work without RabbitMQ. (Branch: step-2-work-without-rabbitmq)
25
![Page 26: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/26.jpg)
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
![Page 27: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/27.jpg)
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
![Page 28: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/28.jpg)
Message Exchange
28
![Page 29: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/29.jpg)
DemoYou may now join the conversation at
http://home.shiroyuki.com:8000/. Please be nice to each other.
29
![Page 30: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/30.jpg)
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
![Page 31: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/31.jpg)
Step 3 - Work with RabbitMQNow, we make it work with RabbitMQ. (Branch: step-3-work-with-rabbitmq)
31
![Page 32: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/32.jpg)
Has anyone missed Pika?
32
![Page 33: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/33.jpg)
Don’t worry. We are using it in this step with RabbitMQ.
33
![Page 34: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/34.jpg)
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
![Page 35: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/35.jpg)
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
![Page 36: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/36.jpg)
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
![Page 37: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/37.jpg)
DemoFor the last time… Trust me.
37
![Page 38: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/38.jpg)
As you can see, from the user perspective,
nothing changes.
38
![Page 39: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/39.jpg)
Only the method of exchanging messages!
are different.
39
![Page 40: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/40.jpg)
Just to be clear, this demo app may not use libraries properly and efficiently.
40
![Page 41: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/41.jpg)
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
![Page 42: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/42.jpg)
And, no more demoOtherwise, this will be WebSocket 102.
42
![Page 43: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/43.jpg)
Alternatives?
flask-sockets
gevent-websocket
flask-socketio
autobahn
your imagination
43
![Page 44: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/44.jpg)
The end最後まで聞いてくれて、どうもありがとうございました。
44 Taken in Montréal, Quebec, Canada on April, 2014
![Page 45: Websocket 101 in Python](https://reader033.vdocument.in/reader033/viewer/2022061214/549aa524b4795906098b457b/html5/thumbnails/45.jpg)
All photographs are taken and copyrighted by Juti Noppornpitak.