Tornado WebSocketce编程(三)

原创 2016年08月29日 01:16:44

Tornado WebSocketce编程番外篇——聊聊前端

js WebSocket对象介绍

WebSocket WebSocket(
   in DOMString url,
   in optional DOMString protocols
);

摘自MDN

实例化WebSocket

在构造一个websocket实例,会返回一个WebSocket对象(url为必要参数)。但是由于
WebSocket并非是所有浏览器都支持,或者说浏览器中较新的版本大多都支持,版本较低则
可能不支持。推荐如下的写法:

var ws;

if (!window.WebSocket) {
    try {
        ws = new WebSocket('ws://expmples.com');
    } catch (e) {
        // 处理异常
    }
}

当握手成功后则触发onopen方法, 我们可以定义当连接建立时如处理

var ws;

function onopen(evt) {
    alert('连接成功');
}

if (!window.WebSocket) {
    try {
        ws = new WebSocket('ws://expmples.com');
        ws.onopen = function(evt) {
            onopen(evt);
        };
    } catch (e) {
        // 处理异常
    }
}

与服务端通信

onmessage()

服务端发送数据时会响应此方法,并被传入一个MessageEvent对象,服务端所发送的数据则在
MessageEvent的data属性中

var ws;

function onmessage(evt) {
    console.log(evt.data);
}

function onopen(evt) {
    alert('连接成功');
}

if (!window.WebSocket) {
    try {
        ws = new WebSocket('ws://expmples.com');
        ws.onopen = function(evt) {
            onopen(evt);
        };
        ws.onmessage = function(evt) {
            onmessage(evt);
        };
    } catch (e) {
        // 处理异常
    }
}

send

通过WebSocket连接向服务器发送数据

void send(
    in DOMString data
);
void send(
    in ArrayBuffer data
);

void send(
    in Blob data
);

摘自MDN

从send方法的声明可知该方法接受一个string类型参数

...省略代码
ws.send('hello world');

然而在实际当中,前后端通信基本都是通过json进行数据传输

var msg = {
    type: "message",
    text: document.getElementById("text").value,
    id:   clientID,
    date: Date.now()
};

// 将其作为 JSON 格式字符串发送。
exampleSocket.send(JSON.stringify(msg));}

懒癌发作,来源额还是MDN

下期预告

加点料: 尝试TypeScript——js超集

以下是一个最小完整的websocket连接代码段:

var ws;

function onopen(evt) {
    console.log('connected');
}

function onmessage(evt) {
    console.log(evt.data);
}

if (!window.WebSocket) {
    try {
        ws = new WebSocket('ws://expmples.com');
        ws.onopen = function(evt) {
            onopen(evt);
        };
        ws.onmessage = function(evt) {
            onmessage(evt);
        };
    } catch (e) {
        // 处理异常
    }
}

难道你不觉得操蛋么,首先每次都要啰里啰嗦的判断是否支持websocket;其次如果一个js文
件中需要连接多个websocket,那么每个自定义的onpen/onmessage都要加上一堆莫名其妙的
前缀。那么我们来封装下吧。

var Client = (function() {}(
    function Client(url) {
        if (!window.WebSocket) {
            try {
                this.ws = new WebSocket('ws://expmples.com');
            } catch (e) {
                // 处理异常
            }
        }
    };

    Client.prototype.loop() {
        if (!this.ws) {
            this.ws.onopen = function(evt) {
                this.onopen(evt);
            }.bind(evt);

            this.ws.onmessage = function(evt) {
                this.onmessage(evt);
            }.bind(evt);
        }
    };

    Client.prototype.onOpen = function(evt) {
        // ...
    };

    Client.prototype.onOpen = function(evt) {
        // ...
    };

    return Client;
));

var client = new Client('ws://expmples.com');
client.loop();

看起来还不错不是吗?
—— 等等!我怎么重写每个实例的onOpen/onMessage方法呢?
—— 那就继承多态呗

麻烦来了,如果你了解一点js的话,你知道麻烦在哪了?其实js的麻烦有太多,尽管在es6规
范已经得到了改善,不过你试试在项目使用下es6的新特性试试。测试人员回给你反馈一批由
浏览器兼容而导致的问题。
这也就是为什么需要引入TypeScript的原因了。

使用Tornado进行网络异步编程

最近在前辈的感染下,开始学习Tornado,然后从他的博客上转载来一篇初步的demo教程,原文出处为使用Tornado进行网络异步编程,欢迎大家转载,不过请尊重原创,标注出处。 Tornad...
  • jeepxiaozi
  • jeepxiaozi
  • 2013年06月11日 16:41
  • 6566

3.大概了解Tornado框架的设计模型

Tornado框架设计模型 从上面的图可以看出,Tornado 不仅仅是一个WEB框架,它还完整地实现了HTTP服务器和客户端,在此基础上提供WEB服务。它可以分为四层: 最底层的EVENT层处...
  • u014252563
  • u014252563
  • 2016年05月29日 13:34
  • 1492

一个tornado项目的大体结构

主要结构下面进行解释。App目录职责app用于存放程序需要运行的逻辑。 如下: common里面是通用的函数及方法。 business用于存放业务逻辑 dal专门用于数据库读写 db是数...
  • cdnight
  • cdnight
  • 2015年11月03日 17:12
  • 8079

嵌入式项目分析VxWorks编程介绍Tornado使用

  • 2009年06月21日 01:15
  • 3.03MB
  • 下载

tornado模板机制_在模板里面编程

tornado的模板机制是出了名的灵活. 我以前
  • qiya2007
  • qiya2007
  • 2014年05月20日 00:03
  • 1091

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

tornado websocket编程 : 初识websocket ——简单购物车实 完整代码:https://github.com/wskssau/my_notespace/tree/maste...
  • danny_amos
  • danny_amos
  • 2016年08月24日 01:37
  • 1282

Tornado编程基础

Tornado是使用Python编写的一个强大的、可扩展的Web服务器。它在处理严峻的网络流量时表现得足够强健,但却在创建和编写时有着足够的轻量级,并能够被用在大量的应用和工具中。...
  • u011715678
  • u011715678
  • 2015年09月17日 15:00
  • 1558

tornado websocket编程 (2): 简单购物车改进

tornado websocket编程 : 简单购物车改进上面例子显然有个问题:无法知道是哪些用户下了订单/取消订单。现在我们对其相关的修改 ——记录用户,使其更加像一个真实的购物车应用。可选的解决...
  • danny_amos
  • danny_amos
  • 2016年08月26日 22:09
  • 351

使用Tornado进行网络异步编程

最近在前辈的感染下,开始学习Tornado,然后从他的博客上转载来一篇初步的demo教程,原文出处为使用Tornado进行网络异步编程,欢迎大家转载,不过请尊重原创,标注出处。 Tornado ...
  • joeyon
  • joeyon
  • 2014年12月18日 09:33
  • 439

使用Tornado进行网络异步编程

最近在前辈的感染下,开始学习Tornado,然后从他的博客上转载来一篇初步的demo教程,原文出处为使用Tornado进行网络异步编程,欢迎大家转载,不过请尊重原创,标注出处。 Tornad...
  • jeepxiaozi
  • jeepxiaozi
  • 2013年06月11日 16:41
  • 6566
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Tornado WebSocketce编程(三)
举报原因:
原因补充:

(最多只允许输入30个字)