signalr vue3

SignalR是一个用于实时通信的开发框架，而Vue.js是一个流行的JavaScript框架。在Vue 3中，可以使用SignalR来实现实时通信功能。

SignalR是由Microsoft开发的，它提供了一种简单的方式来在客户端和服务器之间建立实时双向通信。它支持多种传输方式，包括WebSockets、长轮询和Server-Sent Events。SignalR可以用于构建实时聊天应用、实时数据更新、实时协作等场景。

在Vue 3中使用SignalR，你可以通过安装`@microsoft/signalr`包来引入SignalR库。然后，你可以在Vue组件中使用SignalR的API来建立连接、发送消息和接收消息。

以下是一个简单的示例代码，展示了如何在Vue 3中使用SignalR：

// 安装 @microsoft/signalr 包
npm install @microsoft/signalr

// 在 Vue 组件中引入 SignalR
import { HubConnectionBuilder } from '@microsoft/signalr';

export default {
  data() {
    return {
      connection: null,
      messages: []
    };
  },
  mounted() {
    // 建立 SignalR 连接
    this.connection = new HubConnectionBuilder()
      .withUrl('/chatHub') // 指定 SignalR 服务器的 URL
      .build();

    // 监听接收到的消息
    this.connection.on('ReceiveMessage', (user, message) => {
      this.messages.push({ user, message });
    });

    // 启动连接
    this.connection.start()
      .then(() => {
        console.log('SignalR 连接已建立');
      })
      .catch(error => {
        console.error('SignalR 连接建立失败:', error);
      });
  },
  methods: {
    sendMessage(message) {
      // 发送消息
      this.connection.invoke('SendMessage', '用户名', message)
        .catch(error => {
          console.error('发送消息失败:', error);
        });
    }
  }
};

上述代码中，我们首先在`mounted`钩子函数中创建了一个SignalR连接，并监听了`ReceiveMessage`事件，用于接收服务器发送的消息。然后，在`sendMessage`方法中，我们使用`invoke`方法发送消息给服务器。