js利用WebSocket链接后端并获取数据的方法

在切图网的网站切图项目开发中也会经常遇到一些数据接口处理，数据联调的需求，通常情况下大部分是用ajax去传输json数据，然后渲染到页面，链接的协议是http(s)，方法可以用jquery的ajax，vue的axios等等，都封装好的上手比较简单，但是最近遇到的一个是利用ws协议，需要用WebSocket来链接获取，期间遇到了不少问题，比如blob大数据的处理，WebSocket链接方法，是否有好的WebSocket插件等等，这里做个简单的普及。

ws协议：另外一种协议，和http的最大优势是，不需要前端往后端发送请求，后端可以直接向前端发送数据，可能你已经想到了，用来做即时聊天在合适不过了

blob：大数据的一种格式，通常没有json的那么好的格式规范，类似一种二进制数据（像是乱码），需要自己去解析和截取需要的字符串，解析方法可以利用FileReader

ws链接插件：有没有一款和jquery封装ajax一样的插件呢，我以为有，但是实际没有（没有主流的），后来才发现链接ws原生也只需要几行简单代码，所以基本上告别插件了

代码如下：

ws = new WebSocket('ws://trade.xxx.com:3100/qt123_m6fk');
ws.onopen = function(evt) {
console.log(evt);

//console.log(ws.readyState);
if (ws.readyState===1) {

ws.send('sub|EURUSD|GBPUSD');

}

};
ws.onclose = function(evt) {
console.log(2);
};
ws.onmessage = function(evt) {
//console.log(1);
//console.log(evt.data);
var blob = evt.data;

//console.log(parseBlob(blob));

//通过FileReader读取数据
var reader = new FileReader();

//以下这两种方式我都可以解析出来，因为Blob对象的数据可以按文本或二进制的格式进行读取
//reader.readAsBinaryString(blob);
//reader.readAsText(blob, 'gbk2312');
reader.readAsArrayBuffer(blob);

reader.onload = function(){
//这个就是解析出来的数据
//console.log(this.result);
var dataview = new DataView(this.result);
//var pz = dataview.substring(0);
var bid = dataview.getFloat64(7,true).toFixed(5);
var ask = dataview.getFloat64(15,true).toFixed(5);
var last = dataview.getFloat64(23,true).toFixed(5);
var volume = dataview.getBigUint64(31,true);
//var datetime_msc = dataview.getBigInt64(39,true);
var datetime_msc = dataview.getInt32(39,true);
//var t = getUint64(dataview,39,true);
console.log(bid,ask,last,volume,new Date(datetime_msc).toISOString());

}
};
ws.onerror = function(evt) {
console.log(4);
};

标签：websocket