js自定义websocket连接（js利用WebSocket链接后端并获取数据的方法）
js自定义websocket连接（js利用WebSocket链接后端并获取数据的方法）代码如下：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)); //通过
在切图网的网站切图项目开发中也会经常遇到一些数据接口处理，数据联调的需求，通常情况下大部分是用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
