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

最新推荐文章于 2024-02-06 09:00:00 发布

danny_amos

最新推荐文章于 2024-02-06 09:00:00 发布

阅读量3.3k

点赞数

分类专栏： python tornadao websocket 文章标签： websocket tornado

本文链接：https://blog.csdn.net/danny_amos/article/details/52296115

版权

python 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

tornadao

4 篇文章 0 订阅

订阅专栏

websocket

3 篇文章 0 订阅

订阅专栏

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

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

danny_amos

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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.or
复制链接

扫一扫