大屏消息对接

src/App.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import {  RouterView } from 'vue-router'
-
+import {nextTick} from 'vue';
+import signalR from "@/utils/signalR";
+import { RouterView } from "vue-router";
+//  signalR 初始化signalr
+signalR.init();
 </script>
 
 <template>
   <RouterView />
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/utils/signalR.ts

@@ -11,7 +11,7 @@ export default {
 	init() {
 		const token = sessionStorage.getItem('token');
 		const connection = new signalR.HubConnectionBuilder()
-			.withUrl(this.baseUrl, { accessTokenFactory: () => token, skipNegotiation: true, transport: 1 })
+			.withUrl(this.baseUrl, { accessTokenFactory: () => '', skipNegotiation: true, transport: 1 })
 			.withAutomaticReconnect() //自动重新连接
 			.configureLogging(signalR.LogLevel.Warning)
 			.build();
@@ -31,6 +31,10 @@ export default {
 				message: `断线重连成功`,
 			});*/
 		});
+		// 服务端推送消息
+		connection.on('Send', (message: any) => {
+			console.log('加入分组成功:', message);
+		});
 	},
 	/**
 	 * @description 调用 this.signalR.start().then(async () => { await this.SR.invoke("method")})
@@ -69,11 +73,18 @@ export default {
 	async joinGroup(groupName: string) {
 		if (this.SR.state === 'Connected') {
 			// 判断是否已经建立链接 如果没有 先链接
-			await this.SR.invoke('JoinGroupAsync', {GroupName:groupName});
+			await this.SR.invoke('JoinGroupUnauthAsync', {GroupName:groupName});
 		} else {
+			// 等待链接成功再发送
+			if(this.SR.state === 'Connecting') {
+				setTimeout(async () => {
+					await this.SR.invoke('JoinGroupUnauthAsync', {GroupName:groupName});
+				},500)
+				return
+			}
 			await this.start().then(async () => {
 				setTimeout(async () => {
-					await this.SR.invoke('JoinGroupAsync', {GroupName:groupName});
+					await this.SR.invoke('JoinGroupUnauthAsync', {GroupName:groupName});
 				},500)
 			}).catch((err) => {
 				console.log(err);
@@ -90,7 +101,22 @@ export default {
 	async leaveGroup(groupName: string) {
 		if (this.SR.state === 'Connected') {
 			// 判断是否已经建立链接 如果没有 先链接
-			await this.SR.invoke('LeaveGroupAsync', {GroupName:groupName});
+			await this.SR.invoke('LeaveGroupUnauthAsync', {GroupName:groupName});
+		} else {
+			// 等待链接成功再发送
+			if(this.SR.state === 'Connecting') {
+				setTimeout(async () => {
+					await this.SR.invoke('LeaveGroupUnauthAsync', {GroupName:groupName});
+				},500)
+				return
+			}
+			await this.start().then(async () => {
+				setTimeout(async () => {
+					await this.SR.invoke('JoinGroupUnauthAsync', {GroupName:groupName});
+				},500)
+			}).catch((err) => {
+				console.log(err);
+			})
 		}
 	},
 

src/views/index/center-bottom.vue

@@ -2,6 +2,7 @@
 import { ref, reactive, onMounted, nextTick } from "vue";
 import { currentGET } from "@/api";
 import {graphic} from "echarts/core"
+import signalR from "@/utils/signalR";
 const option = ref({});
 const getData = () => {
   currentGET("centerBottom", {}).then((res) => {
@@ -16,6 +17,10 @@ const getData = () => {
     }
   });
 };
+onMounted(() => {
+  // 加入分组
+  signalR.joinGroup("BigScreen-DataShow");
+});
 const setOption =async (newData: any) => {
   option.value = {
     tooltip: {

src/views/index/center-map.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { ref, reactive, nextTick } from "vue";
+import { ref, reactive, nextTick,onMounted } from "vue";
 import { currentGET, GETNOBASE } from "@/api";
 import { registerMap, getMap } from "echarts/core";
 import { optionHandle, regionCodes } from "./center.map";
 import BorderBox13 from "@/components/datav/border-box-13";
 import type { MapdataType } from "./center.map";
+import signalR from "@/utils/signalR";
 const option = ref({});
 const code = ref("511500"); //100000 代表中国 其他地市是行政编码
 withDefaults(
@@ -16,7 +17,10 @@ withDefaults(
     title: "地图",
   }
 );
-
+onMounted(() => {
+  // 加入分组
+  signalR.joinGroup("BigScreen-1");
+});
 const dataSetHandle = async (regionCode: string, list: object[]) => {
   const geojson: any = await getGeojson(regionCode);
   let cityCenter: any = {};

src/views/index/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { nextTick } from "vue";
+import { onMounted } from "vue";
 import ItemWrap from "@/components/item-wrap";
 import LeftTop from "./left-top.vue";
 import LeftCenter from "./left-center.vue";
@@ -9,17 +9,8 @@ import CenterBottom from "./center-bottom.vue";
 import RightTop from "./right-top.vue";
 import RightCenter from "./right-center.vue";
 import RightBottom from "./right-bottom.vue";
-import signalR from '@/utils/signalR';
-//  signalR 初始化signalr
-signalR.init();
-nextTick(() => {
-  // 加入分组
-  // signalR.joinGroup('BigScreen-DataShow');
-  // signalR.SR.on('Send', (data: any) => {
-  //   // 加入分组成功
-  //   console.log(data, '加入分组成功');
-  // });
-});
+
+
 </script>
 
 <template>