npm install @microsoft/signalr

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

const connection = new signalR.HubConnectionBuilder()
	.withUrl("https://yourserver.com/hub/myhub")
	.build();

const connection = new signalR.HubConnectionBuilder()
    // 必填：設置 Hub 的 URL
    .withUrl(url, options) 
    // 可選：配置日志
    .configureLogging(logging) 
    // 可選：配置自動重連
    .withAutomaticReconnect(retryPolicy) 
    // 可選：配置自定義 HTTP 客戶端
    .withHubProtocol(protocol) 
    // 構建連接對象
    .build();

const connection = new signalR.HubConnectionBuilder()
    .withUrl("https://example.com/chathub", {
        transport: signalR.HttpTransportType.WebSockets,
        accessTokenFactory: () => localStorage.getItem("token"),
        skipNegotiation: true,
        headers: { "X-Client-Version": "1.0.0" }
    })
    .configureLogging(signalR.LogLevel.Debug)
    .withAutomaticReconnect([0, 1000, 5000, 10000])
    .withHubProtocol(new signalR.protocols.msgpack.MessagePackHubProtocol())
    .build();

// 啟動連接
connection.start()
    .then(() => console.log("Connected!"))
    .catch(err => console.error("Connection failed:", err));

connection.start().then(() => {
	console.log("SignalR Connected.");
}).catch(err => {
    console.error(err.toString());
});

// 實時接收服務端信息（服務端-->客戶端）
connection.on('監(jiān)聽后端命名的方法A返回的數(shù)據(jù)：名稱一般和invoke配套',(message) => {
	console.log('接受的信息Info message:', message);
	// 做一些賦值操作，把后端傳來的數(shù)據(jù)渲染到頁面
});
// 例：
connection.on("ReceiveMessage", (user, message) => {
    const msg = `${user}: ${message}`;
    const li = document.createElement("li");
    li.textContent = msg;
    document.getElementById("messagesList").appendChild(li);
});

// 客戶端與服務端進行溝通（客戶端-->服務端），客戶端調(diào)取后端的方法進行通訊，后端返回信息
connection.invoke("后端命名的方法A", "一些后端需要的變量根據(jù)自己需求填寫")
// 例：
connection.invoke('SendData', 'Hello, SignalR!');

npm install @microsoft/signalr

import { HubConnectionBuilder, LogLevel } from '@microsoft/signalr'

export default {
  // 創(chuàng)建連接
  createConnection(url, options = {}) {
    return new HubConnectionBuilder()
      .withUrl(url, options)
      .withAutomaticReconnect([0, 2000, 10000, 30000]) // 自定義重連策略
      .configureLogging(LogLevel.Information)
      .build()
  },

  // 啟動連接
  async startConnection(connection) {
    try {
      await connection.start()
      console.log('SignalR 連接成功')
      return true
    } catch (err) {
      console.error('SignalR 連接失敗:', err)
      return false
    }
  },

  // 關閉連接
  async stopConnection(connection) {
    if (connection) {
      await connection.stop()
      console.log('SignalR 連接已關閉')
    }
  }
}

<script>
import signalR from '@/utils/signalR' // 導入工具類

export default {
  data() {
    return {
      connection: null,      // SignalR 連接實例
      message: '',           // 輸入框綁定的消息
      messages: [],         // 接收到的消息列表
      hubUrl: 'https://your-api.com/chatHub' // Hub 地址
    }
  },
  mounted() {
    this.initializeConnection()
  },
  beforeUnmount() {
    // 組件銷毀前關閉連接
    signalR.stopConnection(this.connection)
  },
  methods: {
    // 初始化連接
    async initializeConnection() {
      // 創(chuàng)建連接實例
      this.connection = signalR.createConnection(this.hubUrl, {
        accessTokenFactory: () => localStorage.getItem('token') // 身份驗證（可選）
      })

      // 注冊接收消息的回調(diào)
      this.connection.on('ReceiveMessage', (user, message) => {
        this.messages.push({ user, message })
      })

      // 啟動連接
      const success = await signalR.startConnection(this.connection)
      if (!success) {
        alert('連接服務器失敗，請檢查網(wǎng)絡')
      }

      // 監(jiān)聽連接關閉事件
      this.connection.onclose(() => {
        console.log('連接已斷開')
      })
    },

    // 發(fā)送消息
    async sendMessage() {
      if (!this.message.trim()) return

      try {
        // 調(diào)用服務端 Hub 方法（假設方法名為 SendMessage）
        await this.connection.invoke('SendMessage', this.message)
        this.message = ''
      } catch (err) {
        console.error('發(fā)送消息失敗:', err)
        alert('發(fā)送失敗，請重試')
      }
    }
  }
}
</script>

<template>
  <div>
    <h2>聊天室</h2>
    <div class="message-list">
      <div v-for="(msg, index) in messages" :key="index">
        <strong>{{ msg.user }}:</strong> {{ msg.message }}
      </div>
    </div>
    <input v-model="message" @keyup.enter="sendMessage" placeholder="輸入消息" />
    <button @click="sendMessage">發(fā)送</button>
  </div>
</template>

// Hub 類
public class ChatHub : Hub
{
    // 客戶端調(diào)用此方法發(fā)送消息
    public async Task SendMessage(string message)
    {
        // 廣播消息給所有客戶端（方法名 ReceiveMessage 需與前端匹配）
        await Clients.All.SendAsync("ReceiveMessage", Context.User.Identity.Name, message);
    }
}

// Startup.cs 或 Program.cs 中配置
app.UseEndpoints(endpoints =>
{
    endpoints.MapHub<ChatHub>("/chatHub");
});