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 中提供了答案。因为我是提供用作此实现基础的分支的贡献者。
问题的原因是在更新任何订单时重新加载整个列表。解决方案是更新列表中已经存在的订单。
旁注:我建议,如果找不到订单,请从服务器获取它并将其添加到列表中。这可能是也可能不是所需的行为。这将取决于应用程序的需要。
我正在使用@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 中提供了答案。因为我是提供用作此实现基础的分支的贡献者。
问题的原因是在更新任何订单时重新加载整个列表。解决方案是更新列表中已经存在的订单。
旁注:我建议,如果找不到订单,请从服务器获取它并将其添加到列表中。这可能是也可能不是所需的行为。这将取决于应用程序的需要。