填坑避雷真君之——.NET5 + VUE使用SinalR实现前后端通讯

Install-Package Microsoft.AspNetCore.SignalR

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

using SignalRChat.Hubs;

namespace SignalRChat
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseEndpoints(endpoints =>
            {
                //官网原Demo
                //endpoints.MapHub("/chathub");
                //根据大佬文章的经验，假如是前后端分离的情况，使用下面这个路由规则就对了
                endpoints.MapHub("/api/chatHub");
            });
        }
    }
}

public class SignalRController
{
    IHubContext _hubContext;
    
    public SignalRController(IHubContext hubContext){
         _hubContext = hubContext;
    }
    
    public async Task Foo(){
        // 发送给所有连接上的客户端
        await _hubContext.Clients.All.SendAsync("ReceiveMessage", "张三", "想我了吗？");
    } 
}

npm install @aspnet/signalr

import * as signalR from ‘@aspnet/signalr‘

created() {
     // 1、创建连接对象
     this.connection = new signalR.HubConnectionBuilder(
      // 配置通道路由
      .withUrl(‘/api/chatHub‘)
      // 日志信息
      .configureLogging(signalR.LogLevel.Information)
      .build()
    
    // 2、开始通讯
    this.connection.start().then(function () {
        console.log(‘连接成功!‘)
    }).catch(function (err) {
        console.log(‘连接失败!‘ + err)
    });
    
    // 3、订阅接收，ReceiveMessage为后端发送消息时写名称，必须一一对应
    this.connection.on(‘ReceiveMessage‘, function (user, message) {
        console.log(`成功接收消息!user:${user},message:${message}}}`)
        // 接收到消息后你想做的事就写在这里
    });
},
methods: {
    call(){
     // 4、呼叫后端
     this.connection.invoke(‘ReceiveMessage‘, ‘张三‘,‘三儿，你还好吗？‘).catch(function (err) {
         return console.error(err);
     });
    }
}

proxy_http_version   1.1;
proxy_set_header  Host $host;
proxy_set_header   Upgrade $http_upgrade;
proxy_set_header   Connection $http_connection;