js如何实现时钟(不受客户端时间影响)

前言

本文主要通过实现1个客户端时钟效果（不受客户端时间影响），来主要捋捋server-sent events技术。
HTML5主要有这么几个模块:(文档可以看这里)

• 语义
• 通信
• 离线 & 存储
• 3D绘图 & 效果
• 性能 & 集成
• 设备访问
• 样式

其中，通信模块中，有这么几个新技术，分别是 webSocket(全双工通信)、Server-sent events(服务器推送) 和 webRTC(网页即时通信)

Server-sent events 应用场景

应用场景我能想到的有，实时展示类的，像客户端时钟，比如活动页面信息推送(如中奖人员、蚂蚁森林活动时实时浇水人等(蚂蚁森林这个不一定是server-sent events实现的，只是说可以这样实现))

展示效果(实时变动,此处只是截图)

image.png

客户端API

主要用到的是 EventSource实例 (初始化时传入url即可创建连接,可跨域,支持断线自动重连)，它主要有以下几个方法和属性（IE不支持，我用的是IE Edge）
1、onopen 方法，监听连接成功事件
2、onmessage 方法，监听接收到消息事件
3、onerror 方法，监听出错事件(比如运行过程中，后端代码挂了，连接出错等等)
4、close 方法，关闭连接
5、readyState 属性，值分别是 0 ， 1 ， 2（未连接或重新连接，已连接，已断开）

客户端实现代码

    
        
        
    
    
        点击连接
        点击结束
        

        
    

服务端代码可看这里：(Node.js代码，懒得自己写了，来自阮一峰博客)

var http = require("http");
http.createServer(function (req, res) {
  var fileName = "." + req.url;
  if (fileName === "./stream") {
    res.writeHead(200, {
      "Content-Type":"text/event-stream",
      "Cache-Control":"no-cache",
      "Connection":"keep-alive",
      "Access-Control-Allow-Origin": '*',
    });
    console.log('有人连接进来了...')
    res.write("retry: 10000\n");
    res.write("event: connecttime\n");
//     res.write("data: " + (new Date()) + "\n\n");
//     res.write("data: " + (new Date()) + "\n\n");

    interval = setInterval(function () {
      res.write("data:" + (new Date()).getTime()+ "\n\n");
    }, 1000);

    req.connection.addListener("close", function () {
      clearInterval(interval);
    }, false);
  }
}).listen(8844, "127.0.0.1");

原理

服务器是以流的形式给客户端推送数据，具体的我也不懂，就不bb了。

参考

Server-sent events 阮一峰博客
MDN文档
时间戳转日期时间函数