vue3使用@microsoft/signalr通讯-基础自写

• 需求：使用@microsoft/signalr进行前后端数据实时通讯（每秒）

• 环境：vue3 typescript @microsoft/signalr

• 安装：npm install @microsoft/signalr

• 代码

  <script lang="ts" setup>
  import {ref, reactive, computed,onMounted,watch , onUnmounted } from 'vue'
  import { HubConnectionBuilder } from '@microsoft/signalr';
  import {Local, Session} from '/@/utils/storage'; // 缓存方法
  
  
  const message = ref(''); // 用于显示从服务器接收的消息
  const token = Session.get('token')
  const connection = new HubConnectionBuilder().withUrl("你的后端地址", {
  		withCredentials: false,//不发送cookie
  		accessTokenFactory: () => token // 登录token，用于辨别用户是谁
  		}).build();
  
  const startConnection = () =>{ // 定义一个实例
  		connection.start().then(function () {// 开始连接
  			console.log('1 连接成功',connection)
  			// 客户端与服务端进行沟通（客户端-->服务端），客户端调取后端的方法进行通讯，后端返回信息
  			connection.invoke("后端命名的方法A", "一些后端需要的变量根据自己需求填写").catch(function (err) {
  				return console.log(err,'获取服务器方法失败');
  			});
  
  		}).catch(function (err) {
  			return console.log('连接失败！！！',err);
  		});
  
  		// 实时接收服务端信息（服务端-->客户端）
  		connection.on('监听后端命名的方法A返回的数据：名称一般和上面invoke配套', (message) => {
  				console.log('接受的信息Info message:', message);
  				// 做一些赋值操作，把后端传来的数据渲染到页面
  			});
      }
  
  // 在组件挂载时连接到 SignalR 服务器
  onMounted(() => {
  	startConnection()
  })
  // 在组件卸载时断开连接
  onUnmounted(() => {
    console.log('停止！！！！')
    connection.stop().catch((e) => console.error('停止失败-Failed to disconnect:', e));
  
  });
  
  </script>