下面给你一份 前端 Vue 中使用 SignalR 的方法与完整示例详解（适用于 Vue2 / Vue3、TypeScript / JavaScript）。

内容包括：
✔ 如何安装并初始化 SignalR
✔ Vue3 + Composition API 示例
✔ Vue2 + Options API 示例
✔ 自动重连、断线处理
✔ 封装成可复用的模块
✔ 使用 Element Plus 做简单 UI 提示（可选）

✅ 一、SignalR 简介（前端视角）

SignalR 是微软推出的 实时通讯框架，可以让前端实时接收后端的消息推送，例如：

  • 实时消息通知
  • 在线用户状态
  • 聊天室
  • 实时监控面板
  • 数据更新的实时广播

✅ 二、安装 SignalR 客户端

npm install @microsoft/signalr

Vue2 / Vue3 都一样。

✅ 三、Vue3 + Composition API 使用 SignalR（推荐）

下面是最简示例（连接、接收消息、发送消息）。

📌 1. 创建一个 SignalR 连接模块（可复用）

src/utils/signalr.js

import * as signalR from "@microsoft/signalr";

let connection = null;

export function initSignalR(url) {
  connection = new signalR.HubConnectionBuilder()
    .withUrl(url)
    .withAutomaticReconnect()
    .configureLogging(signalR.LogLevel.Information)
    .build();

  return connection;
}

export function getConnection() {
  return connection;
}

📌 2. 在 Vue3 组件中使用

<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { initSignalR, getConnection } from '@/utils/signalr';

const messages = ref([]);

onMounted(async () => {
  const connection = initSignalR("https://localhost:5001/chatHub");

  // 接收后端推送的消息
  connection.on("ReceiveMessage", (user, message) => {
    messages.value.push(`${user}: ${message}`);
  });

  // 启动连接
  try {
    await connection.start();
    console.log("SignalR 已连接");
  } catch (err) {
    console.log("连接失败:", err);
  }
});

onBeforeUnmount(() => {
  const connection = getConnection();
  connection?.stop();
});
</script>

<template>
  <div>
    <h3>SignalR 消息： </h3>
    <p v-for="msg in messages" :key="msg">{{ msg }}</p>
  </div>
</template>

📌 3. 前端发送消息（调用 server 方法）

const sendMessage = async () => {
  const connection = getConnection();
  await connection.invoke("SendMessage", "阿杰", "你好！");
};

后端 SignalR Hub 需要有对应方法：

public async Task SendMessage(string user, string message)
{
    await Clients.All.SendAsync("ReceiveMessage", user, message);
}

✅ 四、Vue2 + Options API 示例

<script>
import * as signalR from '@microsoft/signalr';

export default {
  data() {
    return {
      messages: [],
      connection: null
    };
  },
  created() {
    this.connection = new signalR.HubConnectionBuilder()
      .withUrl("https://localhost:5001/chatHub")
      .withAutomaticReconnect()
      .build();

    this.connection.on("ReceiveMessage", (user, msg) => {
      this.messages.push(`${user}: ${msg}`);
    });

    this.connection.start().catch(err => console.error(err));
  },
  beforeDestroy() {
    this.connection?.stop();
  }
}
</script>

<template>
  <div>
    <h3>消息</h3>
    <p v-for="(msg,i) in messages" :key="i">{{ msg }}</p>
  </div>
</template>

✅ 五、自动重连 / 断线处理

SignalR 内置自动重连，只需要：

.withAutomaticReconnect()

你可以监听事件：

connection.onreconnecting(error => {
  console.log("正在重连...", error);
});

connection.onreconnected(connectionId => {
  console.log("重连成功", connectionId);
});

connection.onclose(error => {
  console.log("连接已关闭", error);
});

✅ 六、将 SignalR 封装成全局插件（Vue3）

src/plugins/signalr.js

import * as signalR from "@microsoft/signalr";

export default {
  install(app, options) {
    const connection = new signalR.HubConnectionBuilder()
      .withUrl(options.url)
      .withAutomaticReconnect()
      .build();

    app.config.globalProperties.$signalr = connection;

    connection.start().catch(err => console.log(err));
  }
};

在 main.js 中使用：

import signalR from "./plugins/signalr";

app.use(signalR, { url: "https://localhost:5001/chatHub" });

组件中使用：

this.$signalr.invoke("SendMessage", "阿杰", "Hello!");

✅ 七、SignalR + Element Plus 提示（可选）

import { ElNotification } from "element-plus";

connection.on("ReceiveMessage", (user, message) => {
  ElNotification({
    title: user,
    message: message
  });
});

🎯 总结（可复制）

场景使用方法
初始化连接HubConnectionBuilder(…)
自动重连withAutomaticReconnect()
接收消息connection.on(“ReceiveMessage”)
发送消息connection.invoke(“SendMessage”)
Vue3 使用Composition API
Vue2 使用Options API
封装utils / plugin