vue3中的使用

import socketio from 'socket.io-client'

setup() {
	function socketUrl(){
	     let socketUrl = `https://xxx.com/naas`
	     if(process.env.NODE_ENV === 'development') {
	         socketUrl = `https://xxx.com/naas`
	     }else if(process.env.NODE_ENV === 'production'){
	         // socketUrl = `https://socket.uniner.com`
	         socketUrl = `https://socket-tst.uniner.com/naas`
	     }
	     return socketUrl
	 }

	// 连接服务器
	 const sockets= socketio.connect(socketUrl(), {
	     transports: ['websocket','xhr-polling','jsonp-polling'],
	     transportOptions: {
	         polling: {
	             extraHeaders: {
	                 authorization: 'Bearer ' + window.localStorage.token
	             }
	         }
	     }
	 })
	 const handleAction=()=>{
	 	//离开方法触发自定义事件，跟后端约定一致
		sockets.emit('leave', {
	       room: robotInfo.data.robotNo,
	       flow_id: flowId,
	       flowVersion
	    })
	    //开启长连接触发自定义事件，跟后端约定一致
	   sockets.emit('join', {
	       room: robotInfo.data.robotNo,
	       flow_id: flowId,
	       // flowVersion: workflowListChecked.data.flowVersion
	       flowVersion
	   })
	}
	
	//监听socket.io推送的数据，on监听的事件是后端自定义的事件
	const getData=()=>{
		sockets.on('connect', (data: any) => {
        })

        sockets.on('disconnect', (data: any) => {
        })

        sockets.on('reconnect', (data: any) => {
            join()
        })

        sockets.on('room_response', (data: any) => {})

        sockets.on('start_task_response', (data: any) => {
            console.log(data)
        })
        sockets.on('start_task', (data: any) => {
            console.log(data)
        })

        sockets.on('cpu_response', async(data: any) => {
        })
	}
 }

vue2中的socket实例

import VueSocketio from 'vue-socket.io'
import socketio from 'socket.io-client'
Vue.use(
  new VueSocketio({
    connection: socketio.io(process.env.VUE_APP_SOCKET_BASEURL + '/naas', {
      transports: ['websocket', 'xhr-polling', 'jsonp-polling'],
      transportOptions: {
        polling: {
          extraHeaders: {
            authorization: 'Bearer ' + store.state.user.access_token
          }
        }
      }
    }),
    debug: false
  })
)

// 组件实例中直接用 this.$socket就可以完成

this.$socket.emit('join', {
//触发后端事件
  room: this.robotInfo.robotNo,
  flow_id: this.workflowListChecked.id,
  flowVersion: this.workflowListChecked.flowVersion
})

//监听后端的推送
this.$socket.on('connect', (data: any) => {})
this.$socket.on('disconnect', (data: any) => {
  // this.$socket.connect()
})