This document discusses server-sent events (SSE) and provides examples of using SSE with Flask and Python. SSE allows for single-connection server push capabilities in HTML5. It then demonstrates how to build a simple SSE example using Flask, Redis, and an asynchronous WSGI server like Gunicorn. The example shows how updated text can be pushed from the server in real-time to the browser without reloading the page. Finally, potential other uses of SSE like dynamic website updates and real-time games are mentioned.

1. with
Server-Sent Events
@cppgohan

2. Flask?

3. Flask?
MicroFramework again...

4. Flask?
MicroFramework again...
Written in Python

5. =

6. =

7. =
Werkzeug
WSGI utility library

8. =
+
Werkzeug
WSGI utility library

9. =
+
Werkzeug
WSGI utility library

10. =
+
Werkzeug Jinja2
WSGI utility library template engine

11. Demo
Hello.py

12. Demo
Hello.py

13. Demo
Hello.py

14. Demo
index.html

15. Demo
index.html
result???

16. Demo
index.html
result???
• terminal run: python hello.py
• open http://localhost:5000

17. Server-Sent Event
server push的html5标准, 用法简易, 单次连接比polling高效些.
相比websocket的双向二进制数据, Server-Sent Event只是单向, HTTP协议.
(但浏览器调试工具往往没法看到服务器发来的数据, X_X)
Server对Client的请求,
做stream方式的响应.

18. Server-Sent Event

19. Server-Sent Event
支
持
率
不
要 能 高, 暂
兼 ”玩” 时
容 只
处
理

20. Demo
index.html

21. Demo
hello.py

22. Demo
redis:

23. Demo
redis:
demo:FILE_TEXT -- 每次python读出来的文本
demo:FILE_TEXT_SEQ -- 为文本版本号, 每次文本更新, 版本号+1
/sever_push响应 -- 当FILE_TEXT_SEQ增加时, 将最新的文本返回给浏览器

24. Demo
result???

25. Demo
result???
• terminal run: python hello.py

26. Demo
result???
• terminal run: python hello.py
• open http://localhost:5000

27. Demo
result???
• terminal run: python hello.py
• open http://localhost:5000
• block!!!

28. Demo
result???
• terminal run: python hello.py
• open http://localhost:5000
• block!!!
solution???

29. Demo
result???
• terminal run: python hello.py
• open http://localhost:5000
• block!!!
solution???
• async WSGI server! (eg. gunicorn + gevent, gevent)

30. Demo
result???
• terminal run: python hello.py
• open http://localhost:5000
• block!!!
solution???
• async WSGI server! (eg.-kgunicorn-bgevent, gevent)hello:app
+
• terminal run: gunicorn gevent '0.0.0.0:5000'

31. Demo
result???
• terminal run: python hello.py
• open http://localhost:5000
• block!!!
solution???
• async WSGI server! (eg.-kgunicorn-bgevent, gevent)hello:app
+
• terminal run: gunicorn gevent '0.0.0.0:5000'
• open http://localhost:5000

32. Demo
result???
• terminal run: python hello.py
• open http://localhost:5000
• block!!!
solution???
• async WSGI server! (eg.-kgunicorn-bgevent, gevent)hello:app
+
• terminal run: gunicorn gevent '0.0.0.0:5000'
• open http://localhost:5000 again!
• open http://localhost:5000

33. More Demo
Server下发代码示例

34. More Demo
Server下发代码示例
• start http://localhost:5000
web server
• open push js script...
• server excute js script...
• browser
• ...

35. More Usage
• 网站动态更新
• 区分客户端推送
• 微博墙实现
• webgame服务器推送
• 浏览器插件

36. Resources
• http://www.python.org/dev/peps/pep-0333/
• http://werkzeug.pocoo.org/
• http://jinja.pocoo.org/
• http://flask.pocoo.org/
• http://www.gevent.org/
• http://gunicorn.org/
• http://dev.w3.org/html5/eventsource/
• http://www.html5rocks.com/en/tutorials/eventsource/basics/
• http://www.w3schools.com/html/html5_serversentevents.asp

37. END; 2013, 分享不止!