SignalR 客户端接收来自仪表板客户端而非电子商务客户端的调用

Question

我有 2 个 Vue.js 客户端共享同一个后端服务器（ASP.NET 核心）。其中一个客户端是电子商务网站，另一个客户端是管理订单的管理仪表板。

我已经实施 SignalR 以允许在订单仪表板上实时更新订单 table。当我在管理仪表板上更新订单状态时，更新当前实时工作，无需刷新浏览器，例如在浏览器 1 上从 "Out for Delivery" 更新到 "Delivered" 时，浏览器 2 会立即显示更改，而无需刷新页面。

Order updated via dashboard, SignalR event received

但是，当我从电子商务网站创建新订单时，即使我已经检查我的代码进入了 Hub 方法以向所有客户广播事件和新订单详细信息，订单仪表板也没有update/refresh，当我检查开发工具时，它也没有收到任何事件。如果能在这个问题上提供一些帮助，我将不胜感激。

mounted() 中的集线器方法

    // Establish hub connection
    this.connection = await OrderHub.connectToOrderHub();

    // Establish hub methods
    this.connection.on("OneOrder", order => {
      console.log("OneOrder called");
      console.log(order);
      this.getAllOrders();
    });

    this.connection.on("MultipleOrders", orders => {
      console.log("MultipleOrders called");
      console.log(orders);
      this.getAllOrders();
    });

    // start the connection
    this.connection
      .start()
      .then(() => {
        console.log("Connection to hub started");
      })
      .catch(err => console.log(err));

orderHub.js

const signalR = require("@aspnet/signalr");

class OrderHub {
  async connectToOrderHub() {
    return new signalR.HubConnectionBuilder()
      .withUrl("https://localhost:44393/order-hub")
      .configureLogging(signalR.LogLevel.Error)
      .build();
  }
}
export default new OrderHub();

OrderHub.cs 在服务器端

public interface IOrderHub
    {
        Task NotifyOneChange(Order newOrder);
        Task NotifyMultipleChanges(List<Order> newOrders);
    }

    public class OrderHub : Hub, IOrderHub
    {
        private readonly IHubContext<OrderHub> _hubContext;

        public OrderHub(IHubContext<OrderHub> hubContext)
        {
            _hubContext = hubContext;
        }

        public async Task NotifyOneChange(Order newOrder)
        {
            await _hubContext.Clients.All.SendAsync("OneOrder", newOrder);
        }

        public async Task NotifyMultipleChanges(List<Order> newOrders)
        {
            await _hubContext.Clients.All.SendAsync("MultipleOrders", newOrders);
        }
    }

创建订单方法

public async Task<Order> Create(Order order)
        {
            Order newOrder;
            try
            {
                List<string> imgKeys = new List<string>();
                foreach (OrderItem item in order.OrderItems)
                {
                    imgKeys.Add(item.OrderImageKey);
                }

                // make images on s3 permanent
                List<string> imgUrls = await _s3Service.CopyImagesAsync(imgKeys);

                // put the new images url into object
                for (int i = 0; i < order.OrderItems.Count; i++)
                {
                    order.OrderItems.ElementAt(i).OrderImageUrl = imgUrls.ElementAt(i);
                }

                // create new order object to be added
                newOrder = new Order()
                {
                    CreatedAt = DateTime.Now,
                    UpdatedAt = DateTime.Now,
                    OrderSubtotal = decimal.Parse(order.OrderSubtotal.ToString()),
                    OrderTotal = decimal.Parse(order.OrderTotal.ToString()),
                    ReferenceNo = order.ReferenceNo,
                    Request = order.Request,
                    Email = EncryptString(order.EmailString, encryptionKey),
                    UpdatedById = order.UpdatedById,
                    DeliveryTypeId = order.DeliveryTypeId,
                    Address = order.Address,
                    StatusId = 1,
                    OrderItems = order.OrderItems
                };

                // add to database
                await _context.Orders.AddAsync(newOrder);
                await _context.SaveChangesAsync();
            }
            catch (Exception ex)
            {
                throw new AppException("Unable to create product record.", new { message = ex.Message });
            }
            await _orderHub.NotifyOneChange(newOrder); // it steps inside & executes the method, but client side does not receive any events
            // returns product once done
            return newOrder;
        }

Answer 1

我设法找出了这个问题的原因。当消息超过一定大小时，SignalR 似乎会中断，此问题已被引用 here。为了解决这个问题，我决定传入订单 ID 而不是整个订单对象，并执行另一个 GET 调用以在单独的 API 调用中检索详细信息，以保持 SignalR 消息较小。

SignalR 客户端接收来自仪表板客户端而非电子商务客户端的调用

SignalR client side receives calls from dashboard client but not ecommerce client

c#

signalr

vue.js

asp.net-core

asp.net-core-signalr