rainerosion/rss-reader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

page add countdown and fix autoUpdatePush zero

Browse Source
This commit is contained in:
srcrs 2024-04-20 12:55:05 +08:00
parent dcbeeebc20
commit 9f30853ded
1 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
globals/static/index.html
View File

@ -72,7 +72,13 @@
<div id="app"> <div id="app">
<el-container> <el-container>
<el-header> <el-header>
<h1>RSS Reader</h1> <h1>
RSS Reader
<< if gt .AutoUpdatePush 0 >>
<br/>
<span>{{ countdown }} s</span>
<< end >>
</h1>
</el-header> </el-header>
<el-main v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中"> <el-main v-loading.fullscreen.lock="fullscreenLoading" element-loading-text="拼命加载中">
<el-row :gutter="20"> <el-row :gutter="20">
@ -150,6 +156,8 @@
feeds: [], feeds: [],
showSEOFlag: true, showSEOFlag: true,
fullscreenLoading: true, fullscreenLoading: true,
countdown: 60,
autoUpdatePush: << .AutoUpdatePush >>,
}; };
}, },
async created() { async created() {
@ -159,6 +167,8 @@
const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'; const protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
const connect = () => { const connect = () => {
const socket = new WebSocket(protocol + window.location.host + "/ws"); const socket = new WebSocket(protocol + window.location.host + "/ws");
// 使用媒体查询判断设备类型
const isMobile = window.matchMedia('(max-width: 767px)').matches;
socket.onmessage = event => { socket.onmessage = event => {
const feed = JSON.parse(event.data); const feed = JSON.parse(event.data);
const existingFeed = this.feeds.find(f => f.link === feed.link); const existingFeed = this.feeds.find(f => f.link === feed.link);
@ -179,14 +189,12 @@
} }
} }
socket.onclose = event => { socket.onclose = event => {
if (!isMobile && this.autoUpdatePush > 0) {
console.log("WebSocket closed. Reconnecting..."); console.log("WebSocket closed. Reconnecting...");
// 使用媒体查询判断设备类型
const isMobile = window.matchMedia('(max-width: 767px)').matches;
if (!isMobile) {
setInterval(reloadHtml, 3000); setInterval(reloadHtml, 3000);
} }
}; };
// Send heartbeat message every 120 seconds // Send heartbeat message every 60 seconds
const sendHeartbeat = () => { const sendHeartbeat = () => {
if (socket.readyState === WebSocket.OPEN) { if (socket.readyState === WebSocket.OPEN) {
socket.send("heartbeat"); socket.send("heartbeat");
@ -194,7 +202,16 @@
reloadHtml() reloadHtml()
} }
}; };
if (!isMobile && this.autoUpdatePush > 0) {
setInterval(sendHeartbeat, 60000); setInterval(sendHeartbeat, 60000);
setInterval(() => {
if (this.countdown > 0) {
this.countdown--;
} else {
this.countdown = 60;
}
}, 1000);
}
}; };
connect(); connect();
}, },