websocket使用

一、封装一个socket.js文件

export function socketLink (url, params, callback) {
// url websocket的连接地址
// params 传递参数
// callback 连接成功之后的回调函数
  let socket = null
  if (typeof WebSocket === 'undefined') {
    console.log('您的浏览器不支持WebSocket')
  } else {
    // 初始化 WebSocket 对象，指定要连接的服务器地址与端口建立连接
    socket = new WebSocket(url)
    // 打开
    socket.onopen = function (e) {
      console.log('Socket 已打开',e)
      socket.send(params)
      heartCheck.start(params);//订阅业务发送之后启动心跳检测机制
    }
    //  socket中的readyState实例对象的当前状态
    //readyState 0：正在连接，1：连接成功，2：正在关闭，3：已关闭或连接失败
    // 获得消息事件
    socket.onmessage = function (msg) {
      // 发现消息进入, 开始处理前端触发逻辑
      callback(msg, socket)
      heartCheck.reset();//接收一次后台推送的消息，即进行一次心跳检测重置
    }
    // 关闭事件
    socket.onclose = function (e) {
      console.log('Socket 已关闭',e)
    }
    // 发生了错误事件
    socket.onerror = function (e) {
      console.log('Socket 发生了错误,请刷新页面',e)
    }
    //加入心跳机制
   //心跳检测：所谓的心跳检测，就是隔一段时间向服务器仅限一次数据访问，因为长时间不使用会导致ws自动断开，一般是间隔90秒内无操作会自动断开，因此，在间隔时间内进行一次数据访问，以防止ws断开即可，
//这里选择60秒，倒计时60秒内无操作则进行一次访问，有操作则重置计时器
	let heartCheck={
	    timeout: 60000,//60秒
	    timeoutObj :null,
	    reset: function(){//接收成功一次推送，就将心跳检测的倒计时重置为60秒
	           clearTimeout(this.timeoutObj);//重置倒计时
	           this.start();
		},
		 start: function(params){//启动心跳检测机制，设置倒计时30秒一次
			this.timeoutObj = setTimeout(function(){
			      console.log("心跳一次");
			      socket.send(params);//启动心跳
			  },this.timeout)
		 }
	 };
  }

}

在页面中使用：

<script>
import { socketLink } from '@/utils/socket.js'
export default {
  data () {
    return {
      webSocket: null,
    }
  },
  methods: {
      //webSocket连接
	   webSocketLink () {
		     // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
		     const baseUrl = process.env.VUE_APP_API_BASE_URL
		     const preFix = baseUrl.includes('https') ? 'wss://' : 'ws://'
		     let wsUrl = preFix + baseUrl.split('//')[1] + `/websocket/websocket/${id}`
		     socketLink(wsUrl, '', (res, ws) => {
		        console.log(res, ws,)
		        const data = res.data || ''
		        this.webSocket = ws
		      })
		   }
     },
  beforeDestroy () {
	 if (this.webSocket) {
	    this.webSocket.close()
	  }
  }     
}
</script>