利用websocket和stompjs建立多服务器之间的消息传送

weixin_46156770

于 2021-03-08 13:53:26 发布

阅读量450

点赞数

分类专栏： vue 文章标签： websocket

本文链接：https://blog.youkuaiyun.com/weixin_46156770/article/details/114528463

版权

vue 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了如何使用Vue.js结合Vuex和Stomp.js实现WebSocket连接，实现实时消息接收与后台数据同步。通过实例展示了连接初始化、消息订阅与处理以及未读消息数的更新过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

websocket

<script>
  import Stomp from 'stompjs';
  mounted() {
      this.login = this.$store.state.account.id //从vuex  state中获取登录id
      this.initConnect()
    },
    methods:{
  //建立websocket连接
      initConnect() {
        this.socket = new WebSocket('ws://192.168.200.219:20173/ricky-websocket?userId=' + this.login + '&system=mooc');
        this.stompClient = Stomp.over(this.socket);
        this.stompClient.connect({}, (frame) => {
          this.stompClient.subscribe('/ricky/topic/mooc', (greeting) => {
            console.log(JSON.parse(greeting.body).content)
            //获取后台推送前台的消息条数
            userService.unReadNum({
              userId: this.login
            }).then(data => {
              if (data) {
                this.messageNum = data
              }
            })
            //发送消息
            // this.stompClient.send("/app/msg/mooc", {}, Number(JSON.parse(JSON.parse(greeting.body).content).id));
          });
        });
      },
}
</script>