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

【问题标题】：AngularJS - MeanJS articles update, blink and reloads on socket emitAngularJS - MeanJS 文章在套接字发射时更新、闪烁和重新加载
【发布时间】：2016-07-28 08:40:02
【问题描述】：

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

Socket Article 服务器控制器

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);
}

【问题讨论】：

标签： angularjs node.js meanjs

【解决方案1】：

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

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

旁注：我建议如果未找到该订单，则从服务器获取并将其添加到列表中。这可能是也可能不是所需的行为。这将取决于应用程序的需求。

【讨论】：