在vue中使用WebSocket、stompjs实时接收消息

最新推荐文章于 2024-06-06 14:49:19 发布
最新推荐文章于 2024-06-06 14:49:19 发布
阅读量1.2k 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kitty_ELF/article/details/117256713
版权

背景是这样的公司车间需要电子看板想使用stompjs消息队列发送数据，而我就是在vue中接收数据，核心代码如下：


var app = new Vue({
   
   el: "#main",
   data: {
   
       client: Stomp.over(new WebSocket('ws://1.1.1.1:1000/ws'
最低0.47元/天 解锁文章
kitty_ELF
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue使用stompjs实现mqtt消息推送通知
10-19
主要为大家详细介绍了vue中使用stompjs实现mqtt消息推送通知，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中使用stomp.js
zhang_zan
01-31 1781
vue中使用stomp.js
vue实现stompjs+websocket和后端通信(二)
最新发布
毅香雪海的博客
06-06 954
vue实现stompjs+websocket和后端通信
Stompjs websocket vue
asdfghjk11111111的博客
01-25 229
公司项目要求要有消息提醒机制 ， 多方面考虑用了ActiveMQ ，基本上现在主流的后台语言都没啥问题 ， phpphthon java nodejs ， 等等都没问题 ， 各位道友可以去查阅相关资料 ， 我这里只粘贴出前端的代码 <template> <div></div> </template> <scri...
vue中使用websocket
热门推荐
菜鸡奋斗ing的博客
12-26 2万+
最近项目需求需要实现账号唯N性。同一账号允许多窗口、多台电脑登录上限。 由项目需求所得，想用websocket实现看下。以前也没正式玩过。 项目结构-login登录成功后会跳转到以main.vue为基础页面的界面上，所以我只要在main.vue页面的mounted中去创建以及在beforeDestroy中去销毁websocket基本就可以了。 因为在vue中有多个方法地方需要用到同一个websoc...
使用消息队列轻松实现 分布式 webSocket
emprere的博客
07-30 792
点击关注公众号：互联网架构师，后台回复2T获取2TB学习资源！上一篇：Alibaba开源内网高并发编程手册.pdf分布式下WebSocket如何实现？一个服务中建立了链接，另一个服务的用户怎么获取消息？如果我们的项目是分布式环境，登录的用户被Nginx的反向代理分配到多个不同服务器，那么在其中一个服务器建立了WebSocket连接的用户如何给在另外一个服务器上建立了WebSocket连接的用户发...
vue 实现websocket发送消息并实时接收消息
10-15
主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建，本文给大家分享实例代码，需要的朋友可以参考下
websocket在springboot+vue中的使用教程
08-25
在本教程中，我们将详细介绍如何在Spring Boot和Vue中使用WebSocket。WebSocket是一种实时通信协议，允许服务器推送数据到客户端，而不需要客户端不断地请求服务器。下面，我们将通过实例代码，展示如何在Spring ...
在vue中使用SockJS实现webSocket通信的过程
12-03
总的来说，在Vue中使用SockJS和STOMP实现WebSocket通信，不仅解决了浏览器兼容问题，还提供了消息级别的语义，使通信更加规范。通过合理的错误处理和重连机制，可以确保实时通信的稳定性和可靠性。
Vue+websocket+stompjs实现长连接（用于实时接收消息）
m0_45857808的博客
03-10 1870
参考 1、安装 yarn add stompjs 2、引入 import Stomp from "stompjs"; 3、使用 <template> <!--通过点击消息图标来触发事件--> <img src="message.png" alt="" @click="openMessage" /> </template> <script> import Stomp from "stompjs"; export default {
vue 中如何使用rabbitMQ 监听消息队列
01-20
一、先安装依赖插件 // 先安装stompjs npm install stompjs 二、组件中的使用 import Stomp from “stompjs”; import { MQTT_SERVICE, MQTT_USERNAME, MQTT_PASSWORD } from “../config/mqtt”; config文件中的mqtt.js内容： export const MQTT_SERVICE = ‘ws://25.30.9.137:15674/ws’ // mqtt服务地址 export const MQTT_USERNAME = ‘guest’ // mqtt连接用户名 e
webSocket 消息推送
12-27
webSocket 消息推送 eclipse+springMVC+websocket+sockjs(非maven项目)，直接部署就能跑起用，jdk1.7，tomcat7.0以上
vue集成stompjs实现消息推送
BUG指挥课堂
05-27 1677
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中方法如下： // ****************...
Vue使用Stompjs监听并接收Activemq的信息
蜗牛~~
12-17 4708
第一步：安装Stompjs和net npm install stompjs npm install net 第二步：新建连接Activemq参数文件 在config文件夹下新建一个linkparam文件 里面复制下面三句话 export const MQ_SERVICE = 'ws://192.168.x.x:61614/stomp' // mq服务地址 export const MQ_USERNAME = 'xx' // mq连接用户名 export const MQ_PASSWORD.
java vue消息推送_Vue使用stompjs实现mqtt消息推送通知_放手_前端开发者
weixin_36488250的博客
02-27 337
最近在研究开发的语言无关，客户端既可以是安卓也可以是ios，也可以是java或者c#,python等。闲话不多扯，这里只是实现了在第一步：安装依赖npm install stompjs运行npm run dev可能会报错，提示安装net，执行命令npm install --save net第二部：组件中应用stompjs组件中的import Stomp from 'stompjs'---在sysc...
rabbitmq+vue实现stomp协议消息推送
yangxx的博客
01-15 944
工作中遇到了，记录下 先下载插件 npm install stompjs 在组件中引用 import Stomp from 'stompjs' 程序代码 destroyed(){ this.disconnect() }, methods:{ onConnected(frame) { console.log("Connected: " + frame); var topic = 'stomp'+ t
Springboot + vue3 + vite 实现 Redis消息订阅 + WebSocket
u014212540的博客
05-31 2676
项目背景： 最近在做驿站的项目，前端展示设备列表，包括设备名称、编号、是否在线、开关状态。通过网页上的开关按钮来实现远程控制设备的开关功能。 架构介绍： 后端采用SpringBoot + redis + stomp 实现跟设备的消息订阅。 前端采用：Vue3 +Vite + sockjs-client + stompjs 流程介绍： 后端设备服务将设备的所有信息都存到redis 里面， web 服务取出所有设备最新信息展示到前台。点击开关按钮，将开关状态发送到后台controller, 在controll
vue2若依项目前端websocket实时推送
07-12
在Vue2若依项目中实现前端WebSocket实时推送可以通过以下步骤进行： 1. 安装依赖：首先，你需要安装WebSocket相关的依赖库。Vue2若依项目中常用的WebSocket库有sockjs和stompjs。可以通过以下命令进行安装： ```bash npm install sockjs-client stompjs --save ``` 2. 创建WebSocket连接：在需要使用WebSocket的组件中，可以创建一个WebSocket连接。例如： ```javascript import SockJS from 'sockjs-client' import Stomp from 'stompjs' export default { data() { return { stompClient: null } }, methods: { connect() { const socket = new SockJS('/ws') // WebSocket端点，根据后端配置进行调整 this.stompClient = Stomp.over(socket) this.stompClient.connect({}, this.onConnected, this.onError) }, onConnected() { // 连接成功回调函数 this.stompClient.subscribe('/topic/yourTopic', this.onMessageReceived) }, onError(error) { // 连接错误回调函数 console.error(error) }, onMessageReceived(message) { // 接收到消息回调函数 const data = JSON.parse(message.body) // 处理接收到的消息 } }, mounted() { this.connect() }, beforeDestroy() { if (this.stompClient) { this.stompClient.disconnect() } } } ``` 3. 发送消息：如果需要向服务器发送消息，可以调用`this.stompClient.send(destination, headers, body)`方法发送消息。其中，`destination`为目标地址，`headers`为请求头，`body`为消息体。 4. 接收消息：在`onMessageReceived`回调函数中处理接收到的消息。根据实际情况，可以将消息存储到Vue组件的data中，并在模板中进行展示。 5. 后端配置：确保后端服务器（如Spring Boot）配置了WebSocket支持，并提供了相应的WebSocket端点。 以上是在Vue2若依项目中实现前端WebSocket实时推送的简单流程和代码示例。具体的配置和实现方式可能会因项目的具体需求和后端技术栈而有所不同，请根据实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值