Vue+websocket+stompjs实现长连接（用于实时接收消息）

最新推荐文章于 2024-12-25 20:57:38 发布

liminla!

最新推荐文章于 2024-12-25 20:57:38 发布

阅读量2k

点赞数

文章标签： vue.js websocket javascript

原文链接：https://www.cnblogs.com/goloving/p/10746378.html

版权

本文档展示了如何在Vue项目中使用Stompjs库来实现WebSocket长连接，通过`yarn add stompjs`安装依赖，然后在组件的`mounted`阶段建立连接。在`onConnected`回调中订阅指定的消息交换，当收到消息时更新通知计数。此外，还包含了断开连接的方法以及在组件销毁时解除监听的逻辑。

摘要由CSDN通过智能技术生成

参考

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 {
		data() {
			return {
				client: undefined
			}
		},
		mounted() {
			this.connect() //页面挂载触发长连接
		},
		methods: {
			openMessage() {
				NoticeCount().then(res => {
					if (res.success) {
						this.num = res.data;
					}
				});
			},
			connect() {
				//VUE_APP_URL="wss://abcd.net/ws";   //后端提供
				const url = process.env.VUE_APP_URL;
				this.client = Stomp.client(url);
				const headers = {
					login: "admin",
					passcode: "admin",
					host: "/",
					"heart-beat": "0,0"
				};
				//client.connect(login, passcode, connectCallback, errorCallback, host);
				this.client.connect(headers, this.onConnected, this.onFailed);
			},
			onConnected() {
				const id = window.localStorage.id;
				const exchange = `/long/connection/${id}`;//后端提供
				//目的地(destination)，回调函数(callback)；还有一个可选的参数headers
				//client.subscribe(destination, successCallback, errorCallback);
				this.client.subscribe(exchange, this.responseCallback, this.onFailed);//订阅消息
			},
			onFailed() {
				setTimeout(() => {
					this.connect();
				}, 5000);
			},
			responseCallback() {
				NoticeCount().then(res => {
					if (res.success) {
						this.num = res.data;
					}
				});
			},
			disconnect() {
				if (this.client != null) {
					this.client.disconnect();
				}
			},
		},
		destroyed() {
			// 销毁监听
			this.disconnect();
		}
	}
</script>