vue中使用webSocket教程

vue中使用webSocket教程

开发项目中要实时更新上传进度，利用组件使用进度条后，但是里面绑定的值要随时更新

例如：进度条实时更新上传进度，展示失败或者上传到百分之多少，方便用户看见进度好操作下一步功能

---

什么是webSocket

1.Websocket是一个持久化的协议
2.说它是TCP传输，主要体现在建立长连接后，浏览器是可以给服务器发送数据，服务器也可以给浏览器发送请求的。当然它的数据格式并不是自己定义的，是在要传输的数据外层有ws协议规定的外层包的。
3.websocket是一种全新的协议，不属于http无状态协议，协议名为"ws"

webSocket和http的区别

相同点：都是基于tcp的，都是可靠性传输协议，都是应用层协议

不同点：
1.WebSocket是双向通信协议，模拟Socket协议，可以双向发送或接受信息，HTTP是单向的

2.WebSocket是需要浏览器和服务器握手进行建立连接的，而http是浏览器发起向服务器的连接，服务器预先并不知道这个连接

联系：

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

效果如下

代码如下：

项目中不需要下载任何东西，注意url前面加上 ‘ws:’,如果配置代理跨域那里写了ws：true的话，那这里的url可以不用写了

		initWebSocket(jobId) {
            const _this = this
            var websocket = null;
            if('WebSocket' in window) {
            	//这里写链接接口url
                websocket = new WebSocket("ws://xx.xx.x.xx:xxxx/websocket?jobId="+jobId);
            } else {
                alert("该浏览器不支持websocket！");
            }
            websocket.onopen = function(event) {
                console.log("建立连接");
                websocket.send('Hello WebSockets!');
            }
            websocket.onclose = function(event) {
                console.log('连接关闭')
                 _this.reconnect()//尝试重连websocket
            }
            websocket.onmessage = function(event) {
                console.log('业务处理中')
                //接收后端发送的数据
                _this.webData = JSON.parse(event.data);
                _this.tatleData.push(_this.webData.classCount)
                _this.tatleData.push(_this.webData.methodCount)
                //判断如果接口参数finish等于true，就可以断开连接了，代表数据发送完毕
                if(_this.webData.finish == true){
                    websocket.close();
                }
           }
           websocket.onerror = function() {
                // notify.warn("websocket通信发生错误！");
                // ——this.initWebSocket()
           }
           window.onbeforeunload = function() {
                websocket.close();
          }
     },

---