vue集成stompjs实现消息推送

1. 安装依赖

npm install stompjs

2. 在vue中使用

2.1 在main.js中定义websocket连接地址:
    Vue.prototype.$globalWebsocketUrl= ws://localhost:8080/wisdom-classrome/webSocketServer
2.2 在<script>标签中:
    import Stomp from 'stompjs'
2.3 method中方法如下:
// ***************** webSocket *****************
onConnected (globalWebsocketUrl, frame) {
  let _that = this
  _that.stompClient = Stomp.client(globalWebsocketUrl, this.responseCallback(), this.onFailed())
  console.log('连接已建立--------------')
  // 向服务器发起websocket连接
  _that.stompClient.connect({}, (frame) => {
    _that.stompClient.subscribe('/user/' + student.id + '/handsUp', (msg) => { 
    console.log('msg-----------', msg)   
    }) 
  }, (err) => {
    console.log(err)
  })
  // 断开连接
  _that.disconnect = () => {
    if (_that.stompClient != null) {
      _that.stompClient.disconnect()
    }
  }
},
onFailed (frame) {
  console.log('Failed: ' + frame)
},
responseCallback (frame) {
  console.log('responseCallback msg=>' + frame)
},
// 关闭连接
closeWebSocket () {
  this.disconnect()
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值