Tornado WebSocketce编程(三)

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的原因了。