2021年8月31日

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);
};

标签:

微信扫一扫二维码访问