.NET5+VUE+SignalR

1.首先后台在Nuget引入程序包 Microsoft.AspNetCore.SignalR

 

2.实现消息处理总线

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Framework.Core.Hubs
{
    public class ChatHub : Hub
    {
        /// <summary>
        /// 接收前端消息，并发送给连接的全部用户
        /// </summary>
        /// <param name="user"></param>
        /// <param name="message"></param>
        /// <returns></returns>
        public async Task HandMessage(string user, string message)
        {
            //TO DO 可以加缓存，存储用户信息和对应的连接Id
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }

        /// <summary>
        /// 连接成功
        /// </summary>
        /// <returns></returns>
        public override async Task OnConnectedAsync()
        {
            await Clients.All.SendAsync("ConnectMessage", Context.ConnectionId);
        }

        /// <summary>
        /// 退出连接
        /// </summary>
        /// <returns></returns>
        public override async Task OnDisconnectedAsync(Exception? exception)
        {
            //TO DO 可以从缓存，返回对应掉线用户，同时清除改用户缓存
            await Clients.All.SendAsync("ConnectMessage", Context.ConnectionId, exception?.Message);
        }
    }
}

 

3.如果是前端是JS的，则在 项目=>添加=>客户端库

提供程序 unpkg

库 @microsoft/signalr@6.0.5

勾选文件->dist->browser 里面的 signalr.js  signalr.mini.js

 

 

 

4.VUE的添加方式

npm install @microsoft/signalr

//需要的地方引用
const signalR = require("@microsoft/signalr");
//或
import * as signalR from "@microsoft/signalr");
//在methods里添加方法
init() {
      this.connection = new signalR.HubConnectionBuilder()
        .withUrl(`${this.baseResourceUrl}/chathub`, {})
        .configureLogging(signalR.LogLevel.Error)
        .build();
      this.connection.on("ReceiveMessage", (user,message) => {
         console.log(user,message)
      });
      this.connection.start().then(()=>{
        this.connection.invoke("HandMessage","123","我连上啦");
      });
    },
    sendMsg() {
      let params = {
        user: this.user,
        message: this.message,
      };
      this.connection.invoke("SendMessage", params);
    }