vue项目中如何使用控制端去控制展示的内容

最新推荐文章于 2024-06-06 10:38:59 发布

原创最新推荐文章于 2024-06-06 10:38:59 发布 · 241 阅读

1 ·

CC 4.0 BY-SA版权

其他专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用STOMPJS库在Node.js服务器和Vue前端应用之间建立WebSocket通信。首先引入并配置STOMP客户端，然后通过WebSocket连接到服务器，并订阅指定的队列以接收消息。此外，还展示了在Vue中如何监听事件并触发路由跳转，同时发送消息到服务器。

我们应该首先想的的是控制端和展示端是如何通信的
stompJS的使用

首先引入stompJS

import Stomp from "stompjs"; //引入stomp

STOMP javascript 客户端会使用ws://的URL与STOMP 服务端进行交互。
```
this.client = Stomp.client('ws://localhost:8081/stomp');
```

node创建server服务建立链接

var Stomp = require('stompjs');
var client = Stomp.overWS('ws://localhost:8081/stomp');

链接服务端

let connectCallback= () => {
  this.client.subscribe("/queue/test", (data) => {
    this.handleSubscribe(data); //处理接收到的信息
  });
};
this.client.connect(login='', passcode='', connectCallback, errorCallback, host);

发送信息

 this.client.send(
     'ws://localhost:8081/stomp',
      { "content-type": "text/plain" },
      JSON.stringify(data)
    );

vue项目中控制路由跳转

created() {
    this.$bus.$on("SCENE_SWITCH", (msg) => {
      this.$router.push({ name: msg });
    });
  },
 methods: {
    goTo(param) {
      try {
        this.client.send({ event: "SCENE_SWITCH", detail: param });
        this.$router.push({ name: param });
      } catch (error) {
        console.log(error);
      }
    },
  },