tornado websocket编程(1) 初识websocket ——简单购物车实现

来源：互联网发布：httpclient java 编辑：程序博客网时间：2024/05/17 04:14

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.pathimport tornado.webimport tornado.websocketimport tornado.httpserverimport tornado.ioloopimport tornado.optionsclass 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

<!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' }        });    });});

0 0

tornado websocket编程(1) 初识websocket ——简单购物车实现

tornado websocket编程 ： 初识websocket ——简单购物车实

html

js

tornado websocket编程：初识websocket ——简单购物车实