webSoket的封装

什么是webSoket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。	
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。
在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

简言而知：目前普通的请求，只是请求一次获取一次的数据，而websoket只需要连接一次，便可以一直获取后端返回的数 据，在响应代码上可以实时刷新数据，像一些实时性特别强的功能就需要websoket，但你说来个setInterval进行循环请求的话，不推荐这种，这样会频繁发起请求，会对网页造成卡顿，也会增加服务器的压力。所以这种情况还是使用websoket会好很多。接下来就介绍websoket的一些api

webSoket Api

new 一个websoket对象

let websock =new WebSocket(url[, protocols])			//返回一个 WebSocket 对象。
//url不在是以http开头而是ws:// + 地址

监听连接是否成功

websock .onopen = () => { console.log("成功") }
websock .onerror = () => { console.log("失败") }

监听数据返回

websock.onmessage = data =>{ console.log(data) }

发送数据

websock.send(msg)

接下来直接将这些内容封装起来

class  Socket {
    constructor(param){
        this.url =  param.url		//根据new传的url
        this.timeout = 2000
    }
    // 初始化websocket,进行promise封装
    initSocket(){
        var pro = new Promise((resolve,reject)=>{			
            this.websock = new WebSocket(this.url)
            this.websock.onopen = ()=>{
                console.log('连接成功！');
                resolve()				//连接成功的回调
            }
            this.error()				//调用连接失败
            this.websock.onclose = (e)=>{
                reject()
            }
        })
        return pro
    }
    /**
		以下的方法都是initSoket执行后才可以执行的方法，所以这里设置了promise异步变同步
	*/
    error(){							//连接失败的方法
        this.websock.onerror = () =>{
            console.log("WebSocket连接发生错误");
        }
    }
    sendMsg(msg){						//发送数据的方法
        this.websock.send(msg)
    }
    getStatus(){						//获取当前websoket的连接状态码
        return this.websock.readyState
    }
    getMsg(cellback){					//获取websoket数据的方法，添加了回调
        this.websock.onmessage = (data)=>{
            cellback(data)
        }
    }
    closeSocket(){					//关闭soket的方法
        this.websock.close()
        this.websock.onclose = ()=>{
            console.log('成功关闭');
        }
    }
    reConnect(callback){		//对于连接失败或者断开进行重新连接的方法
       this.initSocket().then(res=>{
            callback(res)
       }).catch(()=>{
           callback('连接失败！')
       })
    }
}




//使用


export default Socket

import socket from 'url'
let mysocket = new soket({				//new一个封装的对象
      url: '/ws/' + url
 })				
mysoket.initSocket().then(()=>{		//进行websoket的初始化连接
	mysoket.getMsg(data => {		//从这里就可以拿到数据进行处理
		console.log(data)
	})
})