Vue .NetCore6 signalr 简单实现

接口 服务端

1.通过Nugut 引入Microsoft.AspNetCore.SignalR 包。

2. 新建个文件夹叫Hubs，然后在文件夹下创建两个类ChatHub、IChatClient，以此编写自己的Hub。

using Microsoft.AspNetCore.SignalR;
using ForwardingCore.API.Service;

namespace ForwardingCore.API.Hubs
{
    public class ChatHub : Hub<IChatClient>
    {
        CommonService CommonService = new CommonService();
        /// <summary>
        /// 客户端连接服务端
        /// </summary>
        /// <returns></returns>
        public override Task OnConnectedAsync()
        {
            var id = Context.ConnectionId;
            //_logger.Info($"客户端ConnectionId=>【{id}】已连接服务器！");
            return base.OnConnectedAsync();
        }
        /// <summary>
        /// 客户端断开连接
        /// </summary>
        /// <param name="exception"></param>
        /// <returns></returns>
        public override Task OnDisconnectedAsync(Exception exception)
        {
            var id = Context.ConnectionId;
            //_logger.Info($"客户端ConnectionId=>【{id}】已断开服务器连接！");
            return base.OnDisconnectedAsync(exception);
        }

        /**
         * 测试 
         * */
        /// <summary>
        /// 给所有客户端发送消息
        /// </summary>
        /// <returns></returns>
        public async Task SendMessage(string data)
        {
            await Clients.All.dsd(CommonService.dsd(data));
        }
    }
}

namespace ForwardingCore.API.Hubs
{
    public interface IChatClient
    {
        Task dsd(object message);
    }
}

3.在Program中注入配置

//要考虑跨域问题哦

//注册SignalR
builder.Services.AddSignalR();


//可以设置SignalR相关参数，这里设置地址
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "ChatHub")),
    RequestPath = "/ChatHub"
});


//可以设置SignalR相关参数，这里设置地址
app.MapHub<ChatHub>("/ChatHub");

Vue 客户端

1.首先安装对应的signalR

npm i --save @aspnet/signalr

2.开始封装，这里是在utils下创建了signalR.js

// @ is an alias to /src

import * as signalR from '@aspnet/signalr'
import store from '@/store'
const url = process.env.VUE_APP_AP_Url
const signal = new signalR.HubConnectionBuilder()
  .withUrl(url, {
    skipNegotiation: true,
    transport: signalR.HttpTransportType.WebSockets
  })
  .configureLogging(signalR.LogLevel.Information)
  .build()
signal.on('dsd', (res) => {
  var resp = JSON.parse(res)
  var nr = '测试通知！'
  var youdaourl = 'https://fanyi.youdao.com/'
  console.log(resp, '收到消息', store.getters.UserId)
  for (const item of resp.UserIdList) {
    if (item === store.getters.UserId) {
      if (Notification.permission === 'granted') {
        const notification = new Notification(nr, {
          body: resp.dsd + ',' + resp.Remark,
          silent: true,
          requireInteraction: true
        })
        notification.onclick = function(e) {
          notification.close()
          window.open(youdaourl, '_brank')
        }
      }
    }
  }
})
signal.start().then(() => {
  if (window.Notification) {
    // 浏览器通知--window.Notification
    if (Notification.permission === 'granted') {
      console.log('允许通知')
    } else if (Notification.permission !== 'denied') {
      console.log('需要通知权限')
      Notification.requestPermission((permission) => {})
    } else if (Notification.permission === 'denied') {
      console.log('拒绝通知')
    }
  } else {
    console.error('浏览器不支持Notification')
  }
  console.log('连接成功')
})

export default {
  install: function(Vue) {
    Vue.prototype.signalr = signal
  }
}

3. 在Main.js下全局注入

import signalr from './utils/signalr'
Vue.use(signalr)

4.客户端完成

发送通知测试调用

   this.signalr
     .invoke('SendMessage', JSON.stringify(dsd))
     .catch(function(err) {return console.error(err) })