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