AngularJS - MeanJS 文章在套接字发出时更新、闪烁和重新加载

AngularJS - MeanJS articles update, blink and reloads on socket emit

我正在使用@mleanos 的 github 回购 MeanJS 使用 Socket 进行文章创建和更新,它使用套接字实时创建和更新文章,在更新文章时,数据会重新加载,如,文章列表闪烁并再次出现。这只会在更新文章时发生。在创建时,它会无缝创建新文章。我如何在数据不闪烁的情况下更新文章。 按照此 link 获取 github 存储库。

Socket文章服务器控制器

socket.on('orderCreate', function (order) {
var user = socket.request.user;

order = new Order(order);
order.user = user;

order.save(function (err) {
  if (err) {
    // Emit an error response event
    io.emit('orderCreateError', { data: order, message: errorHandler.getErrorMessage(err) });
  } else {
    // Emit a success response event
    io.emit('orderCreateSuccess', { data: order, message: 'Order created' });
  }
 });
});

// Update an Order, and then emit the response back to all connected clients.
socket.on('orderUpdate', function (data) {
var user = socket.request.user;

// Find the Order to update
Order.findById(data._id).populate('user', 'displayName').exec(function (err, order) {
  if (err) {
    // Emit an error response event
    io.emit('orderUpdateError', { data: data, message: errorHandler.getErrorMessage(err) });
  } else if (!order) {
    // Emit an error response event
    io.emit('orderUpdateError', { data: data, message: 'No order with that identifier has been found' });
  } else {
    order.name = data.name;

    order.save(function (err) {
      if (err) {
        // Emit an error response event
        io.emit('orderUpdateError', { data: data, message: errorHandler.getErrorMessage(err) });
      } else {
        // Emit a success response event
        io.emit('orderUpdateSuccess', { data: order, updatedBy: user.displayName, updatedAt: new Date(Date.now()).toLocaleString(), message: 'Updated' });
      }
    });
  }
});
});

套接字客户端控制器

function saveUsingSocketEventsUpdate(isValid) {
  vm.error = null;

  if (!isValid) {
    $scope.$broadcast('show-errors-check-validity', 'orderForm');
    return false;
  }

  var order = vm.order;

  // we can send the user back to the orders list already
  // TODO: move create/update logic to service
  if (vm.order._id) {
    vm.order.$update(successCallback, errorCallback);
  } else {
    vm.order.$save(successCallback, errorCallback);
  }

  function successCallback(res) {
    $state.go('orders.view', {
      orderId: res._id
    });
  }

  function errorCallback(res) {
    vm.error = res.data.message;
  }

  // wait to send create request so we can create a smooth transition
  $timeout(function () {
    // TODO: move create/update logic to service
    if (vm.order._id) {
      Socket.emit('orderUpdate', vm.order);
    } else {
      Socket.emit('orderCreate', vm.order);
    }        
  }, 2000);
}

我在为此创建的 MEANJS issue 中提供了答案。因为我是提供用作此实现基础的分支的贡献者。

问题的原因是在更新任何订单时重新加载整个列表。解决方案是更新列表中已经存在的订单。

旁注:我建议,如果找不到订单,请从服务器获取它并将其添加到列表中。这可能是也可能不是所需的行为。这将取决于应用程序的需要。