<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
<link rel="stylesheet" type="text/css" href="/chat/layui/css/layui.css"/>
<style>
.kill_time {
font-size: 80px;
font-weight: bold;
text-align: center;
margin-top: 150px;
}
.kill_time span {
width: 50px;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div><h2 style="text-align: center;margin-top: 50px;">活动开始时间: {{date('Y-m-d H:i:s',intval($start_time/1000))}}</h2>
</div>
<div class="kill_time">
<span id="kill_hours">00</span>:
<span id="kill_minutes">00</span>:
<span id="kill_seconds">00</span>
</div>
</div>
<script type="text/javascript" src="/chat/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/chat/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
<script>
const url_websocket = "{{env('URL_WEBSOCKET','ws://192.168.195.129:9603/websocket')}}";
var start_timestamp = "{{$start_time}}"; // 开始时间 毫秒
var server_timestamp = 0; //服务器时间戳 毫秒
var transfer_timestamp = 0; //网络传输时间差 毫秒
var error_timestamp = 0; //计算时间差 毫秒
var sync_timestamp = 5000; //同步时间差 毫秒
/**
* websocket获取网络时间
*/
var socket = io(url_websocket, {transports: ["websocket"]});
socket.on('connect', data => {
setInterval(function () {
socket.emit('getServerTimeStamp', '');
}, sync_timestamp);
});
/**
* 处理本地时间和服务器时间差
*/
socket.on('setServerTimeStamp', data => {
var data = JSON.parse(data);
server_timestamp = data['timestamp'];
var local_timestamp = new Date().getTime();
//let t = performance.timing.navigationStart + performance.now();
transfer_timestamp = performance.timing.responseEnd - performance.timing.responseStart;
if (!transfer_timestamp) transfer_timestamp = 0;
error_timestamp = local_timestamp - server_timestamp - transfer_timestamp;
});
/**
* 显示倒计时
*/
setInterval(function () {
var local_timestamp = new Date().getTime();
var time = start_timestamp - local_timestamp + error_timestamp;
var hours = 0;
var minutes = 0;
var seconds = 0;
if (time > 0) {
hours = Math.floor(time / (3600 * 1000));
minutes = Math.floor((time - hours * 3600 * 1000) / (60 * 1000));
seconds = Math.ceil((time - hours * 3600 * 1000 - minutes * 60 * 1000) / 1000);
}
$("#kill_hours").html(hours < 10 ? '0' + hours : hours);
$("#kill_minutes").html(minutes < 10 ? '0' + minutes : minutes);
$("#kill_seconds").html(seconds < 10 ? '0' + seconds : seconds);
}, 500);
</script>
</body>
</html>php
/**
* websocket 返回服务器时间
* @Event("getServerTimeStamp")
* @param Socket $socket
* @param string $data
*/
public function onGetServerTimeStamp(Socket $socket, string $data)
{
$timestamp = microtime(true)*1000;
$res['server_date'] = date('Y-m-d H:i:s');
$res['time'] = time();
$res['timestamp'] = floor($timestamp);
socketIo()->of('/websocket')->to($socket->getSid())->emit('setServerTimeStamp', Json::encode($res));
}
