.netcore signalR 实时消息推送

服务器端引入包 Install-Package Microsoft.AspNetCore.SignalR
客户端引入包  npm install @aspnet/signalr

<template>
  <div><p>测试SignalR后台推送消息</p><p>ConnectionId {{connectId}}</p> {{retData}}</div>
</template>

<script>
import * as signalR from '@aspnet/signalr'
    export default {
        data() {
            return {
                retData: '',
                connection: "",
                connectId:""
            }
        },
        methods: {
        },
        created: function () {
            let thisVue = this;
           
           //1 客户端创建连接
            let connection = new signalR.HubConnectionBuilder()
                  .withUrl('/api/chathub')
                  //.withUrl('/chathub',signalR.HttpTransportType.WebSockets)//手动指定传输方式, 请在withUrl()方法的第二个参数
                  .build();

            //2 监听服务器端发送的方法
            connection.on('someFunc', function (obj) {
                thisVue.retData =obj.radom ;
            });
            connection.on('receiveupdate', function (obj) {
                thisVue.retData =obj ;
            });
            connection.on('getconnectId', function (obj) {
                thisVue.connectId = obj.connectId
            });
            connection.on('finsied', function () {
                connection.stop();
                thisVue.retData = "finished"
            });

            //3 开始通信，并调用服务器端方法GetLatestCount
            connection.start()
                      //.then(() => {connection.invoke('GetLatestCount', 1);thisVue.retData = "started"})
                      .catch(err => console.error(err.toString()));
        }
    }
</script>

startup.cs添加代码

services.AddSignalR();
 

app.UseSignalR(route =>
            {
                route.MapHub<ChatHub>("/api/chathub");
            });

写一个Hub中心代码，继承自Hub类

引入包 

public class ChatHub : Hub
    {
        public string connectionId = "";
        //客户端调用服务器端的GetLatestCount方法
        //服务器端调用客户端的receiveupdate方法(前端监听)
        public async Task GetLatestCount(string random)
        {
            int count = 0;
            do
            {
                count++;
                Thread.Sleep(500);
                await Clients.All.SendAsync("receiveupdate", random + " " + count);
            } while (count < 10);

            await Clients.All.SendAsync("finsied");
        }

        public override async Task OnConnectedAsync()
        {
            var connectionId = Context.ConnectionId;
            //await Groups.AddToGroupAsync(connectionId, "mygroup");
            //await Groups.RemoveFromGroupAsync(connectionId, "mygroup");
            //await Clients.Group("mygroup").SendAsync("someFunc", new { radom = "0.0" });

            await Clients.Client(connectionId).SendAsync("getconnectId", new { connectId = connectionId });
        }
    }

控制器中模拟触发后端推送请求

 [Produces("application/json")]
    [Route("api/chat")]
    public class ChatHubController : Controller
    {
        private readonly IHubContext<ChatHub> _hubContext;
        public ChatHubController(IHubContext<ChatHub> hubContext)
        {
            _hubContext = hubContext;
        }

        //测试消息实时推送
        [HttpPost]
        public async Task<IActionResult> Post()
        {
            await _hubContext.Clients.All.SendAsync("someFunc", new { radom = new Random().Next(10,10000)});
            return Ok();// Accepted(1);//202 请求已接收并处理，但还没有处理完成
        }
    }