Angular2在1个客户端更改后端后更新所有客户端UI

Question

我有一个与 c# WebApi 通信的 Angular2 应用程序。加载后，我进行 GET 调用以检索对象列表，将它们订阅到数组并使用 ng2-smart-table 显示列表。我的应用程序适用于单个用户，没有任何问题，但是当我添加更多站点用户时，我没有得到正确的行为。

根据登录的用户类型，我会显示 2 个不同的视图，这两个视图使用相同的组件，因此可以访问相同的列表。用户的角色类型决定了他/她可以更改哪些参数。

想象以下场景： 我有 2 个用户； 用户 A 和 用户 B。两者都在不同的浏览器选项卡/窗口中登录，具有不同的角色类型并查看 2 个不同的视图。

第 1 步：用户 A 操作 在加载网页时，User A 的浏览器调用 Get 方法来填充显示在其屏幕上的列表。 用户 A 然后单击列表中某个对象的“标记”按钮，这会在该对象的后端将布尔属性设置为 True。然后将更新的对象发送回前端并在列表中更新。

到目前为止一切顺利。 用户 A 自己看到 UI 已更新，因为对象现在已“标记”。

第 2 步：用户 B 的操作 用户 B 已经加载了页面，因此已经调用了 Get 方法来填充他的列表。但是由于 用户 A 已经更新了一个项目，用户 B 还必须看到该特定项目现在设置为“标记”。然而这并没有发生，用户 B 的浏览器中的列表与 用户 A 的浏览器中的列表不同。

问题 我该如何实现这个场景，以便当 1 个用户对对象的任何更新也被其他用户接收到时？

其他信息：所有编辑对象的 api 调用都返回编辑后的对象，如下例所示。

编辑：我能够通过以下帖子实现该功能：http://beyondscheme.com/2016/angular2-discussion-portal。但是，我想避免不断调用 GET All API 调用，因为它会创建大量数据流，这些数据流看起来很紧凑，因为我只需要 1 个项目。

order-information.component

获取

ngOnInit() {
    this.orderInformationAddEditList = new LocalDataSource();
    this.orderInformationListDataSource = new LocalDataSource();
    if (this.AuthService.isLoggedIn()) {
      this.OrderInformationService.getAll().subscribe(orderInfo => {
        this.orderInformationList = orderInfo;
        this.orderInformationListDataSource.load(this.orderInformationList);
        //this.NotificationsService.success("Success", "Loaded all items.", { timeOut: 2000, clickToClose: true, showProgressBar: true });
        console.log("Loaded all items");

        if (!this.AuthService.hasRole("desk")) {
          this.userIsDesk = false;
        }
      },
        e => {
          console.log("Error: " + e);
          if (e.status == 0) {
            this.NotificationsService.error("Error", "Unable to connect to API", { timeOut: 0, clickToClose: true });
          }
          if (e.status == 500) {
            console.log(e.json().data);
            this.NotificationsService.error(e.json().data.Name, e.json().data.Message, { timeOut: 0, clickToClose: true });
          }
        })
    } else {
      this.router.navigate(['']);      
    }
  }

标记

markOrderInformation(id: number, event: any) {
this.apiAttempts++;

this.OrderInformationService.markOrderInformation(id).subscribe(orderInfo => {
  console.log("Marked: " + orderInfo.id);
  this.NotificationsService.success("Success", "Marked: " + orderInfo.id, { timeOut: 2000, clickToClose: true, showProgressBar: true });
  this.updateOrderList(orderInfo, false);
  event.confirm.resolve(orderInfo);
  this.apiAttempts = 0;

},
  e => {
    var data = e.json();
    if (e.status == 0) {
      this.NotificationsService.error("Error", "Unable to connect to API. Please try again later..", { timeOut: 0, clickToClose: true });
    }
    if (e.status == 401) {
      this.NotificationsService.error(data.Name, data.message, { timeOut: 0, clickToClose: true });
    }
    if (e.status == 500) {
      if (this.apiAttempts < 4) {
        this.NotificationsService.error("Error", "Verify your input and try again. Attempts: " + this.apiAttempts, { timeOut: 0, clickToClose: true });
      } else {
        this.NotificationsService.error(data.Name, data.Message, { timeOut: 0, clickToClose: true });
        this.apiAttempts = 0;
      }
    }
  })
}

order-information.service

获取

  getAll(): Observable<OrderInformation[]> {
    return this.http.get(`${this.baseUrl}`, new RequestOptions({ headers: this.getAuthorizationHeaders() }))
    .map(mapOrderInformationList);
  }

标记

  markOrderInformation(id: number) {
    return this.http.put(`${this.baseUrl}/` + id + `/mark`, { 
    },
    { headers: this.getAuthorizationHeaders() })
    .map(mapOrderInformation);
  }

Answer 1

感谢我在这里找到的教程：http://beyondscheme.com/2016/angular2-discussion-portal，我能够每 5 秒发送一次 GET 请求。然而，这非常昂贵，因为我正在通过网络发送大量数据。

我通过返回一个包含最近才编辑的对象的较小列表来解决此问题。为此，我向名为 lastUpdated 的 Sql 实体添加了一个新的 DateTime 列。现在，每当我更新一个对象时，我都会将 lastUpdated 属性更改为 DateTime.Now()。

最后我在 Api 中创建了一个名为 GetUpdatedList 的新 GET 请求方法，它返回在特定时间范围内更新的所有项目，我花了 3 分钟，因为我不确定延迟有多大，但我认为 1分钟绰绰有余。然后将从 Api 接收到的列表解析并编辑到 Angular2 中的现有数组中。

public List<Object> GetUpdatedList() {
 try {
    DateTime now = DateTime.Now;
    DateTime before = now.AddMinutes(-3);
    return context.Xdock_controle.Where(order => order.lastUpdated != null && order.lastUpdated <= now && order.lastUpdated >= before).ToList();
 } catch (Exception ex) {
    Logger.log(ex.Message);
    throw ex;
 }
}