tornado websocket编程(1) 初识websocket ——简单购物车实现
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(8000)
tornado.ioloop.IOLoop.instance().start()重写tornado.web.Application用以添加一个全局的Cart类实例，
Cart类则以观察者模式用来注册每个websocket连接
- websocket handler 原型
class CartStatusHandler(tornado.1websocket.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 = 100
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(tornado.1websocket.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(400)
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<p>Test websocketp>
<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' }
});
});
});