javascript - Stackoverflow、Linkedin 等有新事件时的通知

Question

许多网站在有新帖子时都有通知系统。

例如，

在 stackoverflow

在 LinkedIn

单击此按钮后，页面将重新加载。

我想在我的应用程序中实现这种系统。 因此，当数据库中添加新项目时，以及当用户单击它时，显示此类通知。重新加载页面。

有人知道这种通知是如何工作的以及我们如何实现它吗？ 任何与此相关的帖子或想法都会有所帮助。

此外，如果有人认为这个问题可以有更多标签，请随时添加。

Answer 1

以下是如何执行此操作的简单想法。

客户端自动刷新并使用ajax post获取内容。

<h2>Notification</h2>
<div id="divNotif" style="display:none;"></div>

<script id="sessionJs" type="text/javascript">
    function GetNotification() {
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetNotification", "Notification")',
                dataType: "html",
                success: function (data) {
                    $("#divNotif").html(data);
                    $("#divNotif").fadeIn('slow');

                    setTimeout(function () { GetNotification(); }, 5000); //change timeout duration here
                },
                error: function (data) {
                    //alert("BAD:" + data.statusText);
                }
       });
    }

   GetNotification();
</script>

Controller 返回json

    [HttpPost]
    public ActionResult GetNotification()
    {
        int notifCount = fromDb.NotificationCount;
        return Content("<span>New notification " + notifCount + "</span>", "text/html"); // returning a PartialView would be better one
    }