服务端使用ASP.NET Core SignalR与Vue3(TypeScript与JavaScript)前端建立通信(以进度条为例)

以下是一个简化的例子，展示了如何在ASP.NET Core SignalR中使用TypeScript与JavaScript与服务端端点进行通信。

首先，这是C#的SignalR集线器类：

using Microsoft.AspNetCore.SignalR;
 
public class ChatHub : Hub
{
    public async Task SendMessage(string user, string message)
    {
        await Clients.All.SendAsync("ReceiveMessage", user, message);
    }
}

然后，这是Vue 3中的TypeScript代码，用于连接到上述集线器并接收消息：

import { HubConnection, HubConnectionBuilder } from '@microsoft/signalr';
 
let connection: HubConnection;
 
async function startConnection() {
    connection = new HubConnectionBuilder()
        .withUrl('http://your-backend-url/chathub')
        .build();
 
    connection.on('ReceiveMessage', (user, message) => {
        console.log(user + ' says: ' + message);
    });
 
    try {
        await connection.start();
        console.log('Connected to SignalR server');
    } catch (err) {
        console.log(err);
        setTimeout(startConnection, 5000);
    }
}
 
startConnection();

最后，这是Vue 3中的JavaScript代码，用于发送消息到集线器：

import { HubConnectionBuilder } from '@microsoft/signalr';
 
let connection;
 
async function startConnection() {
    connection = new HubConnectionBuilder()
        .withUrl('http://your-backend-url/chathub')
        .build();
 
    try {
        await connection.start();
        console.log('Connected to SignalR server');
    } catch (err) {
        console.log(err);
        setTimeout(startConnection, 5000);
    }
}
 
async function sendMessage(user, message) {
    if (connection) {
        await connection.invoke('SendMessage', user, message);
    }
}
 
startConnection();

在这个例子中，我们创建了一个HubConnection，并使用.withUrl()指定了SignalR集线器的URL。我们监听了一个名为ReceiveMessage的集线器方法，这样当服务端调用它时，我们可以在客户端接收到消息。我们还可以调用sendMessage函数，通过invoke方法来发送消息到服务端集线器。如果连接失败，我们会尝试每5秒重新连接一次。