vue signalr

// Vue + SignalR 示例代码

// 首先确保你已经安装了 @microsoft/signalr 和 vue
// npm install @microsoft/signalr vue

<template>
  <div>
    <h1>Vue + SignalR 示例</h1>
    <button @click="startConnection">连接到 SignalR</button>
    <button @click="sendMessage">发送消息</button>
    <ul>
      <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
    </ul>
  </div>
</template>

<script>
import { HubConnectionBuilder } from '@microsoft/signalr';

export default {
  data() {
    return {
      connection: null,
      messages: []
    };
  },
  methods: {
    startConnection() {
      this.connection = new HubConnectionBuilder()
        .withUrl('https://your-signalr-hub-url')
        .build();

      this.connection.on('ReceiveMessage', (message) => {
        this.messages.push(message);
      });

      this.connection.start()
        .then(() => console.log('SignalR 连接已建立'))
        .catch((err) => console.error('SignalR 连接失败: ', err));
    },
    sendMessage() {
      const user = 'User';
      const message = 'Hello, SignalR!';
      this.connection.invoke('SendMessage', user, message)
        .catch((err) => console.error('发送消息失败: ', err));
    }
  }
};
</script>

解释说明：

1. 模板部分：

   • 包含两个按钮，一个用于启动 SignalR 连接，另一个用于发送消息。
   • 使用 v-for 指令来循环显示接收到的消息。

2. 脚本部分：

   • 导入 HubConnectionBuilder 来创建 SignalR 连接。
   • 在 data 中定义了 connection 和 messages 两个属性，分别用于存储 SignalR 连接实例和接收到的消息。
   • startConnection 方法用于初始化并启动 SignalR 连接，并监听来自服务器的 ReceiveMessage 事件。
   • sendMessage 方法用于向服务器发送消息。

3. 注意事项：

   • 请将 'https://your-signalr-hub-url' 替换为实际的 SignalR Hub URL。
   • 确保你的后端服务已经正确配置了 SignalR Hub。