AngularJS - MeanJS文章更新,闪烁并重新加载套接字发出

时间:2016-07-06 05:46:44

标签: angularjs node.js meanjs

我正在使用@mleanos的github repo for MeanJS使用Socket进行文章创建和更新,它使用socket实时创建和更新文章,同时更新文章,数据重新加载,如,列表文章眨眼,又来了。这只在更新文章时发生。在创建时,它可以无缝地创建新文章。如何在没有数据闪烁的情况下更新文章。 请遵循此link获取github repo。

套接字文章服务器控制器

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

1 个答案:

答案 0 :(得分:1)

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

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

附注:我建议如果没有找到订单从服务器获取它&将其添加到列表中。这可能是也可能不是期望的行为。这取决于应用程序的需求。