前端vue中使用signalr的方法举例详解

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('监听后端命名的方法A返回的数据：名称一般和invoke配套',(message) => {
	console.log('接受的信息Info message:', message);
	// 做一些赋值操作，把后端传来的数据渲染到页面
});
// 例：
connection.on("ReceiveMessage", (user, message) => {
    const msg = `${user}: ${message}`;
    const li = document.createElement("li");
    li.textContent = msg;
    document.getElementById("messagesList").appendChild(li);
});

// 客户端与服务端进行沟通（客户端-->服务端），客户端调取后端的方法进行通讯，后端返回信息
connection.invoke("后端命名的方法A", "一些后端需要的变量根据自己需求填写")
// 例：
connection.invoke('SendData', 'Hello, SignalR!');

npm install @microsoft/signalr

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

export default {
  // 创建连接
  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() {
      // 创建连接实例
      this.connection = signalR.createConnection(this.hubUrl, {
        accessTokenFactory: () => localStorage.getItem('token') // 身份验证（可选）
      })

      // 注册接收消息的回调
      this.connection.on('ReceiveMessage', (user, message) => {
        this.messages.push({ user, message })
      })

      // 启动连接
      const success = await signalR.startConnection(this.connection)
      if (!success) {
        alert('连接服务器失败，请检查网络')
      }

      // 监听连接关闭事件
      this.connection.onclose(() => {
        console.log('连接已断开')
      })
    },

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

      try {
        // 调用服务端 Hub 方法（假设方法名为 SendMessage）
        await this.connection.invoke('SendMessage', this.message)
        this.message = ''
      } catch (err) {
        console.error('发送消息失败:', err)
        alert('发送失败，请重试')
      }
    }
  }
}
</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">发送</button>
  </div>
</template>

// Hub 类
public class ChatHub : Hub
{
    // 客户端调用此方法发送消息
    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");
});