创建单页应用程序的最佳堆栈/解决方案，允许多个用户实时贡献和查看更改

Question

美好的一天，

我正在尝试为数据库构建一个非常小的显示应用程序。应用程序需要动态显示来自连接的数据库的数据，而无需用户不断刷新，但用户需要具有 5 秒

我希望得到一些关于开始为前端寻找哪种技术的反馈。我已经使用实体框架构建了数据库。

任何意见将不胜感激。

问候

彼得

Answer 1

WebSockets

最好的解决方案是使用WebSockets。WebSocket 包含一种先进的技术，它在客户端和服务器之间创建双工连接，每当服务器需要发送数据时，它都可以将其发送到活动连接。由于您使用的是 ASP.NET，因此 SignalR 对您非常有帮助。您可以观看有关SignalR的非常好的视频。

推送通知

您还可以使用推送通知向侦听器推送。推送 API 将在这方面为您提供帮助。这不如 WebSockets，因为如果客户端要向服务器发送请求，则必须处理 HTTP 请求。

投票

您可以在服务器上创建自己的 API 函数，并使用轮询向其发送请求。通用轮询器的一个例子是这样的：

function Initializable(params) {
this.initialize = function(key, def, private) {
if (def !== undefined) {
(!!private ? params : this)[key] = (params[key] !== undefined) ? params[key] : def;
}
};
}
function Poller(params) {
Initializable.call(this, params);
var that = this;
this.initialize("url", window.location.href);
this.initialize("interval", 5000);
this.initialize("type", "POST");
this.initialize("method", "POST");
this.initialize("data", {});
this.initialize("strict", true);
this.initialize("isWebSocket", false);
this.initialize("message", "Poll");
this.initialize("webSocketHandler", undefined);
if (this.isWebSocket && !this.webSocketHandler) {
this.initialize("module", module);
this.initialize("page", page);
this.webSocketHandler = new WebSocketHandler({
ConnectNow: true,
module: this.module,
page: this.page,
message: this.message,
Message: function(e) {
that.done(e.data);
}
});
}
var defaultFunction = function() {};
this.initialize("done", defaultFunction);
this.initialize("fail", defaultFunction);
this.initialize("always", defaultFunction);
//WS
this.initialize("isWebSocketPrepared", function() {
return true;
});
this.initialize("sendingWebSocket", function() {});
this.initialize("handleUnpreparedWebSocket", function() {});
this.initialize("sendWSData", function(message) {
if (that.webSocketHandler.isReady()) {
if (that.isWebSocketPrepared()) {
that.webSocketHandler.send(JSON.stringify({
module: module,
page: page,
message: message
}));
that.sendingWebSocket();
} else {
that.handleUnpreparedWebSocket();
}
} else {
that.handleUnpreparedWebSocket();
}
});
this.isRunning = function() {
return !!params.intervalID;
};
this.run = function() {
if (this.strict && (this.green === false)) {
return;
}
this.green = false;
if (!that.isWebSocket) {
$.ajax({
url: this.url,
method: this.method,
data: this.data
}).done(function(data, textStatus, jqXHR) {
that.green = true;
that.done(data, textStatus, jqXHR);
}).fail(function(jqXHR, textStatus, errorThrown) {
that.green = true;
that.fail(jqXHR, textStatus, errorThrown);
}).always(function(param1, param2, param3) {
that.green = true;
that.always(param1, param2, param3);
});
} else {
that.sendWSData(that.message);
}
};
this.start = function() {
if (!params.intervalID) {
this.run();
params.intervalID = setInterval(this.run.bind(this), this.interval);
}
};
this.stop = function() {
if (!!params.intervalID) {
clearInterval(params.intervalID);
params.intervalID = undefined;
}
};
}

永远的框架

您还可以使用永久帧，这些帧是永久加载的iframe帧。在此处阅读更多内容： https://vinaytech.wordpress.com/2008/09/25/long-polling-vs-forever-frame/