关于在vue中如何正确的使用websocket

<script type="text/ecmascript-6">
import { getGrouplist, getSessions, getConferencerooms } from '@/api/service/getData'
// import { docall, hangup, answer, callbacks } from '@/api/call'
import verto, {Verto} from '@/api/verto/verto'
export default {
name: 'Home',
data () {

return {
  extn: this.$store.state.data.extn,
  password: this.$store.state.data.password,
  domain: this.$store.state.data.domain,
  local: this.$store.state.data.local,
  login: this.$store.state.data.login,
  grouplist: [],
  curCall: null,
  ringing: false,
  destination_number: ''
}

},
mounted () {

console.log(this.extn)
getSessions(this.extn, this.password).then(res => {
  console.log(res.data.token)
  this.token = res.data.token
  if (res.data.code === 200) {
    console.log('登录成功')
    this.loginVerto()
    getGrouplist(this.extn).then((res) => {
      console.log(res)
      this.grouplist = res.data
      this.destination_number = res.data[3].extn
    }).catch(err => {
      console.log(err.message)
    })
  }
}).catch(err => {
  console.log(err.message)
})
getConferencerooms().then(res => {
  console.log(res)
})

},
computed: {

},
methods: {

loginVerto () {
  if (verto != null) {
    if (verto.rpcClient.socketReady() === true) {
      verto.logout()
      verto.rpcClient.closeSocket()
    }
  }
  verto.connect(this.init())
  verto.login()
},
init () {
  return {
    login: this.extn + '@' + this.domain,
    passwd: this.password,
    socketUrl: 'ws://192.168.101.20:8081',
    tag: 'webcam',
    ringFile: './sounds/bell_ring2.wav',
    audioParams: {
      googAutoGainControl: false,
      googNoiseSuppression: false,
      googHighpassFilter: false
    },
    deviceParams: {
      useCamera: 'any',
      useMic: 'any',
      useSpeak: 'any',
      onResCheck: null
    },
    iceServers: false
  }
},
onMessage (verto, dialog, msg, data) {
  console.log('data', data)
  console.log('msg', msg)
  console.log('verto', verto)
  switch (msg) {
    case Verto.enum.message.pvtEvent:
      break
    case Verto.enum.message.clientReady:
      break
    case Verto.enum.message.info:
      break
    case Verto.enum.message.display:
      break
    default:
      break
  }
},
onDialogState (d) {
  this.curCall = d

  if (d.state === Verto.enum.state.ringing) {
    this.ringing = true
  } else {
    this.ringing = false
  }
  switch (d.state) {
    case Verto.enum.state.ringing:
      this.display('Call From: ' + d.cidString())
      this.hangupClick()
      this.answerClick()
      break
    case Verto.enum.state.trying:
      this.display('Calling: ' + d.cidString())
      this.docallClick()
      break
    case Verto.enum.state.early:
    case Verto.enum.state.active:
      this.display('Talking to: ' + d.cidString())
      break
    case Verto.enum.state.hangup:
      this.display('Call ended with cause: ' + d.cause)
      break
    case Verto.enum.state.destroy:
      this.curCall = null
      break
    case Verto.enum.state.held:
      break
    default:
      break
  }
},
onWSLogin (v, success) {
  this.curCall = null
  this.ringing = false

  if (success) {
    this.display('login success')
  }
},

onWSClose (v, success) {
  var today = new Date()
  this.display('Connection Error.<br>Last Attempt: ' + today)
},

onEvent (v, e) {
  console.debug('GOT EVENT', e)
},

display (s) {
  console.log(s)
},
hangupClick () {
  this.curCall = verto.hangup()
},
answerClick () {
  this.curCall.answer()
},
docallClick () {
  if (this.curCall) {
    return
  }
  this.curCall = verto.newCall({
    destination_number: this.destination_number,
    useVideo: false, // 待定
    useStereo: false
  })
}

}
}
</script>

我在.vue文件中使用websocket登录verto模块
但是callbacks返回的onMessage,onDialogState等可能没有完全生效有些bug,是不是我的写法有问题。

阅读 4.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题