Question

在Facebook和Twitter中，我们可以看到每个事件都有“23秒前”或“1小时前”的时间戳。鸣叫。如果我们离开页面一段时间，时间戳会相应地改变。

由于用户机器可能没有与服务器机器相同的系统时间，如何使动态时间戳准确？

我的想法是：它始终基于服务器时间。当请求发送到网页的服务器时，时间戳T1（秒到1970/1/1）将呈现为内联javascript变量。显示的时间戳（“23秒前”）由T1而不是当地时间计算。

我不确定这是Facebook / Twitter的做法。有没有更好的主意？

Answer 1

这就是Facebook的情况：当有人发帖时，Facebook会记录服务器时钟的时间戳。当信息显示给用户时，该时间戳被发送给他们;但是，实时“X秒/分钟/小时前”标签基于客户端的时钟。您可以通过打开Facebook并查看最近的一些新闻Feed项目，然后更改系统的时钟来测试这一点 - 您会看到标签很快就会根据系统时钟更新以匹配差异。

但是，如果刷新页面，即使您的系统时钟仍然错误，也会再次显示正确的时差，因此它似乎是基于由服务器也是。

由此推断，我会说他们从服务器发送时差，然后，使用该值更新实时标签以及使用客户端时钟计算的差异。

以下是我的意思::

的详细示例

项目发布于 2011年1月14日14:40:26 （服务器时间）
用户在 2011年1月14日14:40:42 （服务器时间）加载新闻Feed
Facebook在服务器上发送当前时差。（ 2011年1月14日14:40:26 和 2011年1月14日14:40:42 之间的差异为16秒）
页面在客户端的浏览器中加载。根据客户的计算机，时间 2011年1月14日14:47:03 ，并使用JavaScript记录。（服务器时间仍然 2011年1月14日14:40:42 ）
初始标签填充了服务器的值，现在说“16秒前”
时间过去了。客户的时钟现在说 2011年1月14日14:47:25 。（服务器时间现在 2011年1月14日14:41:04 ）
计算客户端时差： 2011年1月14日14:47:03 和 2011年1月14日14:47:25 之间的差异为22秒
使用服务器时差加上客户端时差（16秒+22秒）更新实时标签，现在标签显示“38秒前”

服务器初始时间戳（ 2011年1月14日14:40:26 ）与当前服务器时间之间的实际差异（ 2011年1月14日14:41:04 ）是38秒，所以你可以看到，即使客户的时钟错误，仍然可以使用这种方法计算准确的时差。

Answer 2

简单的答案是，所有时间都在服务器上，当您获得推文列表时，您会看到创建推文和向您提供推文之间的时间差异。您在客户端不需要任何东西

Answer 3

Facebook和Twitter计算服务器端的时间，并将时间戳输出为普通文本。在这些网站上没有客户端计算时间，至少不是我观察到的。

如果你现在看到http://twitter.com/的来源，你会看到这样的HTML：

<div class="hc-tweet">
    <div class="hc-label">Recently tweeted:</div>
    <div class="hc-tweet-text">You don't know pain until you've worked in a French bakery.</div>
    <div class="hc-meta">about 1 hour ago</div>
</div>

如果你查看典型Facebook页面的来源，你会看到这样的HTML：

<abbr title=\"Saturday, 15 January 2011 at 09:40\" data-date=\"Fri, 14 Jan 2011 14:40:26 -0800\" class=\"timestamp\">6 hours ago<\/abbr>

请注意，这个Facebook HTML实际上是在一个Javascript字符串中（这就是为什么在引号之前有一个反斜杠） - 所以即使Facebook使用Javascript来填充时间戳，它也是在服务器端计算的。

如何在网页中实现动态时间戳？

3 个答案: