2016-07-06 41 views
0

我正在使用@mleanos的github回購爲MeanJS使用套接字進行文章創建和更新,它使用套接字實時創建和更新文章,同時更新文章,數據重新加載,如在,文章列表閃爍並再次出現。這隻會在更新文章時發生。創建時,無縫地創建新文章。如何在沒有數據閃爍的情況下更新文章。 按照此link爲github回購。AngularJS - MeanJS文章更新,閃爍和重新加載套接字發射

插座條服務器控制器

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

我在爲這個創建的MEANJS issue給出了一個答案。因爲我是貢獻者,提供了用作此實現基礎的分支。

問題的原因是當更新任何訂單時整個列表正在重新加載。解決方案是更新列表中已存在的訂單。

附註:我建議如果訂單沒有被發現可以從服務器&中將其添加到列表中。這可能是也可能不是預期的行爲。這將取決於應用程序的需求。