前端WebSocket封装使用

1.什么是websocket

1.WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
2.它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的
3.Websocket是一个持久化的协议

2.websocket的原理

1.websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信
2.在websocket出现之前，web交互一般是基于http协议的短连接或者长连接
3.websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"

3.websocket与http的关系

相同点：

1.都是基于tcp的，都是可靠性传输协议
2.都是应用层协议

不同点：

1.WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息
2.HTTP是单向的
3.WebSocket是需要浏览器和服务器握手进行建立连接的
4.而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接

联系：

WebSocket在建立握手时，数据是通过HTTP传输的。但是建立之后，在真正传输时候是不需要HTTP协议的

4.总结（总体过程）

1.首先，客户端发起http请求，经过3次握手后，建立起TCP连接；http请求里存放WebSocket支持的版本号等信息，如：Upgrade、Connection、WebSocket-Version等；
2.然后，服务器收到客户端的握手请求后，同样采用HTTP协议回馈数据；
3.最后，客户端收到连接成功的消息后，开始借助于TCP传输信道进行全双工通信

5.websocket解决的问题

1.http存在的问题

http是一种无状态协议，每当一次会话完成后，服务端都不知道下一次的客户端是谁，需要每次知道对方是谁，才进行相应的响应，因此本身对于实时通讯就是一种极大的障碍
http协议采用一次请求，一次响应，每次请求和响应就携带有大量的header头，对于实时通讯来说，解析请求头也是需要一定的时间，因此，效率也更低下
最重要的是，需要客户端主动发，服务端被动发，也就是一次请求，一次响应，不能实现主动发送

2.long poll(长轮询)

long poll长轮询原理其实跟Ajax轮询差不多，但是区别在于，在长轮询这种方式下，客户端与服务端建立连接后，服务端如果没有东西要发送，则一直不返回Response给客户端，直至有东西发送才返回，然后重新建立连接，周而复始。

以上可以看出，长轮询需要服务器有很强的同时容纳多个请求的能力，即并发处理能力。

3.Ajax轮询

Ajax轮询指的是，客户端每隔一段时间就向服务端发送一个请求，定时的询问服务端是否有东西要发送，无论服务端是否有东西要发送，服务端都需要一个Response对应一个Request的去回应客户端，随后重新建立连接，重复以上操作。

以上可以看出，Ajax轮询是属于比较消耗资源的一种方式，并且需要服务器有很快的处理速度和资源

6.websocket的改进

一旦WebSocket连接建立后，后续数据都以帧序列的形式传输。在客户端断开WebSocket连接或Server端中断连接前，不需要客户端和服务端重新发起连接请求。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实现了“真·长链接”，实时性优势明显。

image

WebSocket有以下特点：

• 是真正的全双工方式，建立连接后客户端与服务器端是完全平等的，可以互相主动请求。而HTTP长连接基于HTTP，是传统的客户端对服务器发起请求的模式。
• HTTP长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换HTTP header，信息交换效率很低。Websocket协议通过第一个request建立了TCP连接之后，之后交换的数据都不需要发送 HTTP header就能交换数据，这显然和原有的HTTP协议有区别所以它需要对服务器和客户端都进行升级才能实现（主流浏览器都已支持HTML5）

7.封装WebSoket.js及使用

var websock = null;
let rec; //断线重连后，延迟5秒重新创建WebSocket连接  rec用来存储延迟请求的代码
let isConnect = false; //连接标识 避免重复连接
let checkMsg = "heartbeat"; //心跳发送/返回的信息 服务器和客户端收到的信息内容如果如下 就识别为心跳信息 不要做业务处理

var globalCallback = function () { };

let createWebSocket = () => {
    try {

        initWebSocket(); //初始化websocket连接
    } catch (e) {
        console.log("尝试创建连接失败");
        reConnect(); //如果无法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断网等导致无法创建连接
    }
};

//定义重连函数
let reConnect = () => {
    console.log("尝试重新连接");
    if (isConnect) return; //如果已经连上就不在重连了
    rec && clearTimeout(rec);
    rec = setTimeout(function () { // 延迟5秒重连  避免过多次过频繁请求重连
        createWebSocket();
    }, 5000);
};
//设置关闭连接
let closeWebSocket = () => {
    websock.close();
};
//心跳设置
var heartCheck = {
    timeout: 20000, //每段时间发送一次心跳包 这里设置为20s
    timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）

    start: function () {
        this.timeoutObj = setTimeout(function () {
            if (isConnect) websock.send(checkMsg);
        }, this.timeout);
    },

    reset: function () {
        clearTimeout(this.timeoutObj);
        this.start();
    }
};

// 初始化websocket
function initWebSocket() {
    // ws地址 -->这里是你的请求路径

    var ws = "ws://api.dczn.com.cn:8098/ws/client?req=dczn"
    websock = new WebSocket(ws)
    websock.onmessage = function (e) {
        websocketonmessage(e)
    }
    websock.onclose = function (e) {
        websocketclose(e)
    }
    websock.onopen = function () {
        websocketOpen()
        // heartCheck.start();
    }

    // 连接发生错误的回调方法
    websock.onerror = function () {
        console.log('WebSocket连接发生错误')
        isConnect = false; //连接断开修改标识
        reConnect(); //连接错误 需要重连
    }
}



// 实际调用的方法
function sendSock(agentData, callback) {
    globalCallback = callback
    // console.log(globalCallback)
    if (websock.readyState === websock.OPEN) {
        // 若是ws开启状态
        websocketsend(agentData)
    } else if (websock.readyState === websock.CONNECTING) {
        // 若是 正在开启状态，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback)
        }, 1000)
    } else {
        // 若未开启 ，则等待1s后重新调用
        setTimeout(function () {
            sendSock(agentData, callback)
        }, 1000)
    }
}

function getSock(callback) {
    globalCallback = callback
}
// 数据接收
function websocketonmessage(e) {
    // console.log(e.data)



    let O_o = JSON.parse(decodeUnicode(e.data))

    if (!O_o) {
        heartCheck.reset();
    } else {
        if (O_o.msg == "open success") {
            sessionStorage.setItem("wid", O_o.wid);
        } else {
            // console.log(O_o);
            globalCallback(O_o);
        }
    }


    // globalCallback(JSON.parse(e.data))
    function decodeUnicode(str) {
        str = str.replace(/\\/g, "%");
        //转换中文
        str = unescape(str);
        //将其他受影响的转换回原来
        str = str.replace(/%/g, "\\");
        //对网址的链接进行处理
        str = str.replace(/\\/g, "");
        return str;
    }
}

// 数据发送
function websocketsend(agentData) {
    console.log(JSON.stringify(agentData))
    websock.send(JSON.stringify(agentData))
}

// 关闭
function websocketclose(e) {
    console.log(e)
    isConnect = false; //断开后修改标识
    console.log('connection closed (' + e.code + ')')
}

// 创建 websocket 连接
function websocketOpen(e) {
    console.log('连接成功')
}

initWebSocket()

// 将方法暴露出去
export {
    sendSock,
    getSock,
    createWebSocket,
    closeWebSocket
}

使用
提示：使用前必须在main中注入js文件

1.使用前必须在main中注入js文件

// WebSocket封装方法
import * as socketApi from './libs/socket'
Vue.prototype.socketApi = socketApi

  created() {
    this.socketApi.sendSock({ cmd: "startReport" }); //发送指令，指令是跟后端人员协定的
    this.socketApi.getSock(this.getConfigResult); //接收后端大佬推送过来的数据
  },

    getConfigResult(res) {
      //sock接收到的数据
      console.log(res);
    },