tornado websocket程式設計 ： 初識websocket ——簡單購物車實
完整代碼：https://github.com/wskssau/my_notespace/tree/master/python/tornado_exercise
WebSocket相關資料，第一次聽過websocket的童鞋可以閱讀下
1. wiki: https://zh.wikipedia.org/wiki/WebSocket#.E5.8E.9F.E7.90.86
2. MDN: https://developer.mozilla.org/zh-CN/docs/WebSockets/Writing_WebSocket_servers
3. 知乎讨論: https://www.zhihu.com/topic/19657811/hot
- app.py 基本結構（或者說是一個手腳架吧，一步一步的添加我們需要的功能）
#!/usr/bin/env python
# -*-coding:utf-8-*-
import os.path
import tornado.web
import tornado.websocket
import tornado.httpserver
import tornado.ioloop
import tornado.options
class Application(tornado.web.Application):
def __init__(self):
handlers = [
]
settings = {
'debug': True,
'template_path': os.path.join(os.path.dirname(__file__),
'templates'),
'static_path': os.path.join(os.path.dirname(__file__),
'static')
}
tornado.web.Application.__init__(self, handlers, **settings)
if __name__ == '__main__':
tornado.options.parse_command_line()
app = Application()
server = tornado.httpserver.HTTPServer(app)
server.listen()
tornado.ioloop.IOLoop.instance().start()
重寫tornado.web.Application用以添加一個全局的Cart類執行個體，
Cart類則以觀察者模式用來注冊每個websocket連接配接
- websocket handler 原型
class CartStatusHandler(tornadowebsocket.WebSocketHandler):
def open(self):
pass
def on_close(self):
pass
def on_message(self, message):
pass
- 編寫Cart類原型，用來注冊websocket連接配接,
通過疊代已注冊的連接配接清單中的回調函數向用戶端傳回消息
class Cart(object):
callbacks = []
def __init__(self):
self.__total =
def register(self, callback):
self.callbacks.append(callback)
def unregister(self, callback):
self.callbacks.remove(callback)
@property
def total(self):
return self.__total
def notify(self):
for callback in self.callbacks:
callback(self.__total)
- 在Application類中添加一個全局Cart執行個體
class Application(tornado.web.Application):
def __init__(self):
self.cart = Cart()
handlers = [
]
settings = {
'debug': True,
'template_path': os.path.join(os.path.dirname(__file__),
'templates'),
'static_path': os.path.join(os.path.dirname(__file__),
'static')
}
tornado.web.Application.__init__(self, handlers, **settings)
-
修改CartStatusHandler類
WebSocket連接配接關聯到Cart: 注冊、取消注冊以及消息推送回調函數
class CartStatusHandler(tornadowebsocket.WebSocketHandler):
def open(self):
self.application.cart.register(self.callback)
def on_close(self):
self.application.cart.unregister(self.callback)
def on_message(self, message):
pass
def callback(self, count):
self.write_message('{"count" :%d}' %count)
到這一步基本websocket後端邏輯實作了
現在開始準備一個前後端通信的場景
- 實作Cart Index
class Index(tornado.web.RequestHandler):
def get(self):
context = {
'total': self.application.cart.total
}
self.render('cart.html', **context)
def post(self):
action = self.get_argument('action')
if action == 'add':
self.add_order()
elif action == 'remove':
self.cancel_order()
else:
self.set_status()
def add_order(self):
self.application.cart.add_order()
self.write('success')
def cancel_order(self):
self.application.cart.cancel_order()
self.write('success')
- 前端準備
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>Test websocket</p>
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
<script src="/static/built/ex1_websocket.js"></script>
</body>
</html>
js
$(function() {
var goodsClient = new WebSocket('ws://127.0.0.1:8000/websocket_goods');
goodsClient.onopen = function(e) {
console.log('connected');
}
goodsClient.onmessage = function(e) {
// 接受websocket消息
var data = null,
message = { data: data };
try {
message.data = JSON.parse(evt.data);
} catch (e) {
message.data = evt;
}
$("#total").text(message.data.count);
}
$("button#add").on("click", function () {
//添加貨物
$.ajax({
'url': '/',
'type': 'POST',
'dataType': 'json',
'data': { 'action': 'add' }
});
});
$("button#del").on("click", function () {
//取消添加
$.ajax({
'url': '/',
'type': 'POST',
'dataType': 'json',
'data': { 'action': 'remove' }
});
});
});
![TestLink導出用例轉換工具(XML2Excel)[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)