关闭

Tornado WebSocketce编程(三)

标签: tornadowebsocket编程javascriptjs
266人阅读 评论(0) 收藏 举报
分类:

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11106次
    • 积分:198
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:1篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论