5 надежных способов автоматического обновления веб-страниц

<meta http-equiv="refresh" content="30">

<meta http-equiv="refresh" content="30; URL=https://example.com">

// Обновление страницы каждые 60 секунд
setInterval(function() {
location.reload();
}, 60000);

// Или однократное обновление через 2 минуты
setTimeout(function() {
location.reload();
}, 120000);

setInterval(function() {
// Проверяем, не в фокусе ли какое-то поле ввода
if (!document.querySelector('input:focus, textarea:focus')) {
location.reload();
}
}, 60000);

// Таймер с обратным отсчетом и возможностью отмены
let timer = 60;
let interval;

function startCountdown() {
document.getElementById('timer').textContent = timer;

interval = setInterval(function() {
timer--;
document.getElementById('timer').textContent = timer;

if (timer <= 0) {
clearInterval(interval);
location.reload();
}
}, 1000);
}

function cancelRefresh() {
clearInterval(interval);
document.getElementById('refresh-notice').style.display = 'none';
}

// HTML: <div id="refresh-notice">Страница обновится через <span id="timer">60</span> секунд. <button onclick="cancelRefresh()">Отменить</button></div>

function updateContent() {
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('content-container').innerHTML = xhr.responseText;
}
};
xhr.open('GET', '/api/get-updated-content', true);
xhr.send();
}

// Запускаем обновление каждые 10 секунд
setInterval(updateContent, 10000);

function updateWithFetch() {
fetch('/api/get-updated-content')
.then(response => response.text())
.then(data => {
document.getElementById('content-container').innerHTML = data;
})
.catch(error => console.error('Ошибка обновления:', error));
}

// Запускаем обновление каждые 10 секунд
setInterval(updateWithFetch, 10000);

function smartUpdate() {
const container = document.getElementById('content-container');
const loadingIndicator = document.getElementById('loading');

// Показываем индикатор загрузки
loadingIndicator.style.display = 'block';

fetch('/api/get-updated-content')
.then(response => {
if (!response.ok) {
throw new Error(`Ошибка HTTP: ${response.status}`);
}
return response.json();
})
.then(data => {
// Обновляем только при наличии изменений
if (data.lastUpdated > container.dataset.lastUpdate) {
container.innerHTML = data.content;
container.dataset.lastUpdate = data.lastUpdated;
}
})
.catch(error => {
console.error('Ошибка обновления:', error);
// Уведомляем пользователя об ошибке
const errorNotice = document.createElement('div');
errorNotice.className = 'error-notice';
errorNotice.textContent = 'Не удалось обновить данные. Повторная попытка через 30 секунд.';
container.appendChild(errorNotice);

// Увеличиваем интервал при ошибках
setTimeout(smartUpdate, 30000);
return;
})
.finally(() => {
// Скрываем индикатор загрузки
loadingIndicator.style.display = 'none';
});
}

// Запускаем первое обновление
smartUpdate();

// Настраиваем регулярное обновление
setInterval(smartUpdate, 10000);

// Создаем WebSocket-соединение
const socket = new WebSocket('ws://example.com/socket');

// Обработка события открытия соединения
socket.onopen = function(event) {
console.log('Соединение установлено');

// Можно отправить серверу идентификационные данные
socket.send(JSON.stringify({
type: 'auth',
token: 'user-auth-token'
}));
};

// Обработка входящих сообщений
socket.onmessage = function(event) {
const data = JSON.parse(event.data);

switch(data.type) {
case 'update':
updateContent(data.content);
break;
case 'notification':
showNotification(data.message);
break;
case 'error':
handleError(data.message);
break;
// Другие типы сообщений
}
};

// Обработка ошибок
socket.onerror = function(error) {
console.error('Ошибка WebSocket:', error);
};

// Обработка закрытия соединения
socket.onclose = function(event) {
console.log('Соединение закрыто, код:', event.code);

if (event.code !== 1000) {
// Пытаемся переподключиться при неожиданном обрыве
setTimeout(() => {
console.log('Попытка восстановления соединения...');
// Рекурсивно создаем новое подключение
initializeWebSocket();
}, 5000);
}
};

// Функция обновления контента
function updateContent(content) {
document.getElementById('content-container').innerHTML = content;
}

const WebSocket = require('ws');
const http = require('http');

// Создаем HTTP-сервер
const server = http.createServer((req, res) => {
res.writeHead(200);
res.end('WebSocket server is running');
});

// Создаем WebSocket-сервер, привязанный к HTTP-серверу
const wss = new WebSocket.Server({ server });

// Обработка подключений
wss.on('connection', function connection(ws) {
console.log('Новое соединение установлено');

// Отправляем начальные данные
ws.send(JSON.stringify({
type: 'update',
content: 'Начальное содержимое'
}));

// Обрабатываем сообщения от клиента
ws.on('message', function incoming(message) {
const data = JSON.parse(message);
console.log('Получено:', data);

// Обработка различных типов сообщений
if (data.type === 'auth') {
// Аутентификация пользователя
authenticateUser(data.token, ws);
}
});

// Обрабатываем закрытие соединения
ws.on('close', function() {
console.log('Соединение закрыто');
});
});

// Запускаем сервер
server.listen(8080, function() {
console.log('Сервер запущен на порту 8080');
});

// Функция рассылки обновлений всем клиентам
function broadcastUpdate(content) {
wss.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send(JSON.stringify({
type: 'update',
content: content
}));
}
});
}

// Пример периодического обновления
setInterval(() => {
const newContent = `Обновленные данные: ${new Date().toISOString()}`;
broadcastUpdate(newContent);
}, 10000);

// На стороне клиента
function initWebSocket() {
const socket = new WebSocket('ws://example.com/socket');

let heartbeatInterval;

socket.onopen = function() {
console.log('Соединение установлено');

// Отправляем пинг каждые 30 секунд
heartbeatInterval = setInterval(() => {
if (socket.readyState === WebSocket.OPEN) {
socket.send(JSON.stringify({ type: 'ping' }));
}
}, 30000);
};

socket.onmessage = function(event) {
const data = JSON.parse(event.data);

if (data.type === 'pong') {
console.log('Получен pong от сервера');
} else {
// Обработка обычных сообщений
}
};

socket.onclose = function() {
// Останавливаем heartbeat при закрытии соединения
clearInterval(heartbeatInterval);

// Пытаемся переподключиться через 5 секунд
setTimeout(initWebSocket, 5000);
};

return socket;
}

// На стороне сервера
ws.on('message', function(message) {
const data = JSON.parse(message);

if (data.type === 'ping') {
ws.send(JSON.stringify({ type: 'pong' }));
} else {
// Обработка обычных сообщений
}
});

// Создаём подключение к источнику событий
const eventSource = new EventSource('/events');

// Обрабатываем сообщения
eventSource.onmessage = function(event) {
const data = JSON.parse(event.data);
updateContent(data);
};

// Обрабатываем открытие соединения
eventSource.onopen = function() {
console.log('Соединение SSE установлено');
};

// Обрабатываем ошибки
eventSource.onerror = function(error) {
console.error('Ошибка SSE:', error);
// EventSource автоматически пытается восстановить соединение
};

// Можно также подписаться на события определённого типа
eventSource.addEventListener('update', function(event) {
const data = JSON.parse(event.data);
updateContent(data);
});

eventSource.addEventListener('notification', function(event) {
const data = JSON.parse(event.data);
showNotification(data.message);
});

// Функция обновления контента
function updateContent(data) {
document.getElementById('content').innerHTML = data.content;
}

// Закрытие соединения при необходимости
function closeConnection() {
eventSource.close();
}

const express = require('express');
const app = express();

app.get('/events', function(req, res) {
// Настройка заголовков для SSE
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');

// Отправка начального сообщения
res.write(`id: ${Date.now()}\n`);
res.write(`data: ${JSON.stringify({content: 'Начальные данные'})}\n\n`);

// Функция для отправки обновлений
const sendUpdate = () => {
if (!res.finished) {
const data = {
content: `Обновлено: ${new Date().toISOString()}`
};

res.write(`id: ${Date.now()}\n`);
res.write(`event: update\n`); // Опционально – тип события
res.write(`data: ${JSON.stringify(data)}\n\n`);
}
};

// Отправляем обновления каждые 10 секунд
const intervalId = setInterval(sendUpdate, 10000);

// Очищаем интервал при закрытии соединения
req.on('close', () => {
clearInterval(intervalId);
});
});

app.listen(3000, () => {
console.log('Сервер запущен на порту 3000');
});

function longPoll() {
// Сохраняем временную метку последнего обновления
const lastUpdate = localStorage.getItem('lastUpdateTimestamp') || 0;

fetch(`/updates?lastUpdate=${lastUpdate}`)
.then(response => {
if (!response.ok) {
throw new Error('Ошибка сети');
}
return response.json();
})
.then(data => {
// Обновляем содержимое только если есть новые данные
if (data.hasUpdates) {
document.getElementById('content').innerHTML = data.content;
localStorage.setItem('lastUpdateTimestamp', data.timestamp);
}

// Сразу запускаем новый запрос
longPoll();
})
.catch(error => {
console.error('Ошибка Long Polling:', error);

// При ошибке пытаемся переподключиться через 5 секунд
setTimeout(longPoll, 5000);
});
}

// Запускаем процесс Long Polling
longPoll();

const express = require('express');
const app = express();

let updates = [
{ timestamp: Date.now(), content: 'Начальные данные' }
];

app.get('/updates', function(req, res) {
const lastUpdate = parseInt(req.query.lastUpdate) || 0;

// Функция для отправки обновлений при их наличии
const sendUpdates = () => {
// Проверяем, есть ли новые обновления после указанной временной метки
const newUpdates = updates.find(update => update.timestamp > lastUpdate);

if (newUpdates) {
// Если есть новые данные, отправляем их
res.json({
hasUpdates: true,
content: newUpdates.content,
timestamp: newUpdates.timestamp
});
}
};

// Проверяем наличие обновлений сразу
sendUpdates();

// Если обновлений нет, ждем их появления в течение 30 секунд
if (!res.headersSent) {
const timeoutId = setTimeout(() => {
// По истечении таймаута отправляем ответ без обновлений
if (!res.headersSent) {
res.json({
hasUpdates: false,
timestamp: lastUpdate
});
}
}, 30000);

// Функция для проверки новых обновлений
const checkInterval = setInterval(() => {
sendUpdates();

// Если ответ был отправлен, очищаем интервалы
if (res.headersSent) {
clearInterval(checkInterval);
clearTimeout(timeoutId);
}
}, 1000);

// Очищаем ресурсы при закрытии соединения
req.on('close', () => {
clearInterval(checkInterval);
clearTimeout(timeoutId);
});
}
});

// Добавление нового обновления (в реальном приложении это могло бы происходить в результате действий других пользователей)
setInterval(() => {
const update = {
timestamp: Date.now(),
content: `Новые данные: ${new Date().toISOString()}`
};
updates.push(update);

// Ограничиваем размер истории обновлений
if (updates.length > 100) {
updates = updates.slice(-100);
}
}, 10000);

app.listen(3000, () => {
console.log('Сервер запущен на порту 3000');
});