Smart Refresh: Make Your Raspberry Pi Display Update Only When Content Changes

14. May 2025

Development / Content Creation / Digital Kiosk / Digital Signage / Hardware

.SHARE

Need your Raspberry Pi to only update its display when content actually changes? Tired of constant refreshes wasting bandwidth and causing annoying flickers? I’ve got you covered!

This guide walks through three practical solutions – from simple HTTP caching to real-time WebSockets – that will make your Pi display work smarter, not harder. Let’s dive in and optimize your digital signage, kiosk, or dashboard project.

Solution 1: HTTP Caching with Conditional Requests (Simplest)

This approach uses standard HTTP caching mechanisms and is the easiest to implement.

Server Setup:


// Example using Express.js
const express = require('express');
const app = express();
const port = 3000;

let content = "Initial content";
let etag = generateETag(content); // A function to generate a hash of the content

app.get('/', (req, res) => {
  // Check if client sent If-None-Match header with the current ETag
  if (req.headers['if-none-match'] === etag) {
    // Content hasn't changed, return 304 Not Modified
    return res.status(304).end();
  }
  
  // Content has changed or first request
  res.setHeader('ETag', etag);
  res.setHeader('Cache-Control', 'no-cache'); // Tell client to check with server before using cached content
  res.send(`
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="refresh" content="60"> <!-- Auto-refresh every 60 seconds -->
      <title>Content Display</title>
    </head>
    <body>
      <div id="content">${content}</div>
    </body>
    </html>
  `);
});

// Function to update content (called when content changes)
function updateContent(newContent) {
  content = newContent;
  etag = generateETag(content);
}

function generateETag(content) {
  // Simple hash function for demo purposes
  return require('crypto').createHash('md5').update(content).digest('hex');
}

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

// Example using Express.js

const express = require('express');

const app = express();

const port = 3000;

let content = "Initial content";

let etag = generateETag(content); // A function to generate a hash of the content

app.get('/', (req, res) => {

// Check if client sent If-None-Match header with the current ETag

if (req.headers['if-none-match'] === etag) {

// Content hasn't changed, return 304 Not Modified

return res.status(304).end();

}

// Content has changed or first request

res.setHeader('ETag', etag);

res.setHeader('Cache-Control', 'no-cache'); // Tell client to check with server before using cached content

res.send(`

<!DOCTYPE html>

<html>

<head>

<title>Content Display</title>

</head>

<body>

<div id="content">${content}</div>

</body>

</html>

`);

});

// Function to update content (called when content changes)

function updateContent(newContent) {

content = newContent;

etag = generateETag(content);

}

function generateETag(content) {

// Simple hash function for demo purposes

return require('crypto').createHash('md5').update(content).digest('hex');

}

app.listen(port, () => {

console.log(`Server running on http://localhost:${port}`);

});

Raspberry Pi Setup:

Install Raspberry Pi OS / Walkthrough
Set up Chromium in kiosk mode:


# Add to ~/.config/lxsession/LXDE-pi/autostart
@xset s off
@xset -dpms
@xset s noblank
@chromium-browser --incognito --kiosk http://your-server-ip:3000

# Add to ~/.config/lxsession/LXDE-pi/autostart

@xset s off

@xset -dpms

@xset s noblank

@chromium-browser --incognito --kiosk http://your-server-ip:3000

Benefits: Simple implementation, works with standard HTTP, minimal setup required.

Solution 2: Server-Sent Events (SSE) (Recommended)

SSE provides real-time updates from server to client with a simple implementation. Learn more about Server-Sent Events on MDN.

Server Setup:


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

let content = "Initial content";
let clients = [];

// Serve the HTML page
app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head>
      <title>Content Display</title>
      <script>
        document.addEventListener('DOMContentLoaded', () => {
          const contentDiv = document.getElementById('content');
          
          // Create SSE connection
          const eventSource = new EventSource('/events');
          
          // Listen for content updates
          eventSource.addEventListener('content-update', (event) => {
            contentDiv.innerHTML = event.data;
            console.log('Content updated');
          });
          
          // Handle connection errors
          eventSource.onerror = () => {
            console.log('SSE connection error, trying to reconnect...');
            setTimeout(() => {
              // The browser will automatically try to reconnect
            }, 5000);
          };
        });
      </script>
    </head>
    <body>
      <div id="content">${content}</div>
    </body>
    </html>
  `);
});

// SSE endpoint
app.get('/events', (req, res) => {
  // Set headers for SSE
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  
  // Send initial data
  res.write(`event: content-update\ndata: ${content}\n\n`);
  
  // Keep connection alive with heartbeat
  const keepAliveInterval = setInterval(() => {
    res.write(':\n\n'); // Comment line as heartbeat
  }, 15000);
  
  // Add this client to the connected clients
  const clientId = Date.now();
  clients.push({
    id: clientId,
    res
  });
  
  // Remove client on connection close
  req.on('close', () => {
    clearInterval(keepAliveInterval);
    clients = clients.filter(client => client.id !== clientId);
    console.log(`Client ${clientId} disconnected`);
  });
});

// Function to update content (call this when content changes)
function updateContent(newContent) {
  content = newContent;
  
  // Notify all connected clients
  clients.forEach(client => {
    client.res.write(`event: content-update\ndata: ${content}\n\n`);
  });
  
  console.log('Content updated, notified all clients');
}

app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

const express = require('express');

const app = express();

const port = 3000;

let content = "Initial content";

let clients = [];

// Serve the HTML page

app.get('/', (req, res) => {

res.send(`

<!DOCTYPE html>

<html>

<head>

<title>Content Display</title>

document.addEventListener('DOMContentLoaded', () => {

const contentDiv = document.getElementById('content');

// Create SSE connection

const eventSource = new EventSource('/events');

// Listen for content updates

eventSource.addEventListener('content-update', (event) => {

contentDiv.innerHTML = event.data;

console.log('Content updated');

});

// Handle connection errors

eventSource.onerror = () => {

console.log('SSE connection error, trying to reconnect...');

setTimeout(() => {

// The browser will automatically try to reconnect

}, 5000);

};

});

</script>

</head>

<body>

<div id="content">${content}</div>

</body>

</html>

`);

});

// SSE endpoint

app.get('/events', (req, res) => {

// Set headers for SSE

res.setHeader('Content-Type', 'text/event-stream');

res.setHeader('Cache-Control', 'no-cache');

res.setHeader('Connection', 'keep-alive');

// Send initial data

res.write(`event: content-update\ndata: ${content}\n\n`);

// Keep connection alive with heartbeat

const keepAliveInterval = setInterval(() => {

res.write(':\n\n'); // Comment line as heartbeat

}, 15000);

// Add this client to the connected clients

const clientId = Date.now();

clients.push({

id: clientId,

res

});

// Remove client on connection close

req.on('close', () => {

clearInterval(keepAliveInterval);

clients = clients.filter(client => client.id !== clientId);

console.log(`Client ${clientId} disconnected`);

});

// Function to update content (call this when content changes)

function updateContent(newContent) {

content = newContent;

// Notify all connected clients

clients.forEach(client => {

client.res.write(`event: content-update\ndata: ${content}\n\n`);

});

console.log('Content updated, notified all clients');

}

app.listen(port, () => {

console.log(`Server running on http://localhost:${port}`);

});

Raspberry Pi Setup:

Same kiosk setup as Solution 1.

Benefits: True real-time updates, only transfers content when changes occur, simple to implement, works well in browsers.

Solution 3: WebSockets (Most Advanced)

For bidirectional real-time communication with more features. Learn more about WebSockets on MDN.

Server Setup:


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

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

let content = "Initial content";

// Serve the HTML page
app.get('/', (req, res) => {
  res.send(`
    <!DOCTYPE html>
    <html>
    <head>
      <title>Content Display</title>
      <script>
        document.addEventListener('DOMContentLoaded', () => {
          const contentDiv = document.getElementById('content');
          
          // Create WebSocket connection
          const socket = new WebSocket('ws://' + window.location.host);
          
          // Connection opened
          socket.addEventListener('open', (event) => {
            console.log('WebSocket connected');
            // Request initial content
            socket.send(JSON.stringify({ type: 'get-content' }));
          });
          
          // Listen for content updates
          socket.addEventListener('message', (event) => {
            const data = JSON.parse(event.data);
            if (data.type === 'content-update') {
              contentDiv.innerHTML = data.content;
              console.log('Content updated');
            }
          });
          
          // Handle connection close
          socket.addEventListener('close', () => {
            console.log('WebSocket disconnected, trying to reconnect...');
            setTimeout(() => {
              window.location.reload();
            }, 5000);
          });
        });
      </script>
    </head>
    <body>
      <div id="content">${content}</div>
    </body>
    </html>
  `);
});

// WebSocket connection handling
wss.on('connection', (ws) => {
  console.log('Client connected');
  
  // Send initial content
  ws.send(JSON.stringify({
    type: 'content-update',
    content: content
  }));
  
  // Handle messages from client
  ws.on('message', (message) => {
    const data = JSON.parse(message);
    if (data.type === 'get-content') {
      ws.send(JSON.stringify({
        type: 'content-update',
        content: content
      }));
    }
  });
  
  // Handle disconnection
  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

// Function to update content (call this when content changes)
function updateContent(newContent) {
  content = newContent;
  
  // Notify all connected clients
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify({
        type: 'content-update',
        content: content
      }));
    }
  });
  
  console.log('Content updated, notified all clients');
}

server.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

100

101

102

103

104

105

106

const express = require('express');

const http = require('http');

const WebSocket = require('ws');

const app = express();

const server = http.createServer(app);

const wss = new WebSocket.Server({ server });

let content = "Initial content";

// Serve the HTML page

app.get('/', (req, res) => {

res.send(`

<!DOCTYPE html>

<html>

<head>

<title>Content Display</title>

document.addEventListener('DOMContentLoaded', () => {

const contentDiv = document.getElementById('content');

// Create WebSocket connection

const socket = new WebSocket('ws://' + window.location.host);

// Connection opened

socket.addEventListener('open', (event) => {

console.log('WebSocket connected');

// Request initial content

socket.send(JSON.stringify({ type: 'get-content' }));

});

// Listen for content updates

socket.addEventListener('message', (event) => {

const data = JSON.parse(event.data);

if (data.type === 'content-update') {

contentDiv.innerHTML = data.content;

console.log('Content updated');

}

});

// Handle connection close

socket.addEventListener('close', () => {

console.log('WebSocket disconnected, trying to reconnect...');

setTimeout(() => {

window.location.reload();

}, 5000);

});

</script>

</head>

<body>

<div id="content">${content}</div>

</body>

</html>

`);

});

// WebSocket connection handling

wss.on('connection', (ws) => {

console.log('Client connected');

// Send initial content

ws.send(JSON.stringify({

type: 'content-update',

content: content

}));

// Handle messages from client

ws.on('message', (message) => {

const data = JSON.parse(message);

if (data.type === 'get-content') {

ws.send(JSON.stringify({

type: 'content-update',

content: content

}));

}

});

// Handle disconnection

ws.on('close', () => {

console.log('Client disconnected');

});

// Function to update content (call this when content changes)

function updateContent(newContent) {

content = newContent;

// Notify all connected clients

wss.clients.forEach((client) => {

if (client.readyState === WebSocket.OPEN) {

client.send(JSON.stringify({

type: 'content-update',

content: content

}));

}

});

console.log('Content updated, notified all clients');

}

server.listen(3000, () => {

console.log('Server started on http://localhost:3000');

});

Raspberry Pi Setup:

Same kiosk setup as previous solutions.

Benefits: Full bidirectional communication, robust reconnection handling, most flexible for complex applications.

Recommendation

For most use cases, Solution 2 (Server-Sent Events) provides the best balance of simplicity and effectiveness. It’s specifically designed for server-to-client updates and is simpler to implement than WebSockets while providing true real-time updates without unnecessary polling.

Additional Considerations

Connection Reliability:
Raspberry Pi Configuration:
Monitoring:

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

Vikunja – Style / Themed

Communication / Consulting / Deployment / Design / Development / Docker / Inspiration / Project Management

Spend a lot of time with Vikunja (cubicFUSION Vikunja Importer) lately, one thing that it is currently missing is an easy way to style the interface. Especially the task view is just one long page without any clear section separation. LET’S TWEAK IT Here a quick starting point to tweak the style quickly. You can […]

Day 50: Resilio Sync – Private Peer-to-Peer File Synchronization – 7 Days of Docker

Development / Automation / Cross Platform / Deployment / Docker / Hosting

File synchronization is usually treated as a cloud problem. Put the folder in Dropbox, Google Drive, OneDrive, or iCloud, wait for everything to upload, and hope the storage quota, privacy model, transfer speed, and client support all line up with your workflow. That works for office documents. It gets awkward fast when you are syncing […]

cubicFUSION

PROJECT

cubicFUSION Hexagon Grid

Development / CSS / Design / HTML5 / Javascript / WordPress

An Elementor widget that renders a fully configurable honeycomb grid. Each hexagon cell carries an icon or image, title, text, and a link. The grid supports two orientations, responsive column and size controls, rounded corners, hover effects, hover-reveal modes, per-cell style overrides, a media-gallery source with lightbox, auto-fit columns, background fill, and drop shadows. Content […]

Alexander

I am a full-stack developer. My expertise include:

Server, Network and Hosting Environments
Data Modeling / Import / Export
Business Logic
API Layer / Action layer / MVC
User Interfaces
User Experience
Understand what the customer and the business needs

I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.

Smart Refresh: Make Your Raspberry Pi Display Update Only When Content Changes

Table of Contents

Solution 1: HTTP Caching with Conditional Requests (Simplest)

Server Setup:

Raspberry Pi Setup:

Solution 2: Server-Sent Events (SSE) (Recommended)

Server Setup:

Raspberry Pi Setup:

Solution 3: WebSockets (Most Advanced)

Server Setup:

Raspberry Pi Setup:

Recommendation

Additional Considerations

RELATED POSTS

Vikunja – Style / Themed

Day 50: Resilio Sync – Private Peer-to-Peer File Synchronization – 7 Days of Docker

cubicFUSION Hexagon Grid

Alexander

.highlights

.series

.highlights