khalidx · May 30, 2021 08:09
diff --git a/a-simple-live-reload.md b/a-simple-live-reload.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>index</title>
  </head>
  <body>
    <p id="now"></p>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
    <script>
      function whenTheDocumentIsReady (doSomething) {
        $(document).ready(doSomething);
      }
      function showTheCurrentTimestamp () {
        $("#now").text(Date.now());
      }
      function everyTwoSeconds (doSomething) {
        setInterval(doSomething, 2000);
      }
      var isFirstRequest = true;
      function refreshIfChanged () {
        $.get({
          url: window.location.href,
          ifModified: true,
          statusCode: {
            304: function () {
              console.log("304 Not Modified");
            },
            200: function () {
              if (isFirstRequest) {
                isFirstRequest = false;
              } else {
                location.reload();
              }
            }
          }
        });
      }
      whenTheDocumentIsReady(function () {
        showTheCurrentTimestamp();
        everyTwoSeconds(refreshIfChanged);
      });
    </script>
  </body>
 </html>
diff --git a/server.js b/server.js
 #!/usr/bin/env node
 const express = require('express')
 express()
 .use(function (req, res, next) {
  console.log('request', Date.now())
  if (req.method == 'GET') {
    res.set('Cache-Control', 'private, max-age=0, no-cache')
  } else {
    res.set('Cache-Control', 'no-store')
  }
  next()
 })
 .use('/', express.static(__dirname))
 .listen(80, function () {
  console.log('listening...')
 })
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>index</title>
	</head>
	<body>
	<p id="now"></p>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
	<script>
	function whenTheDocumentIsReady (doSomething) {
	$(document).ready(doSomething);
	}
	function showTheCurrentTimestamp () {
	$("#now").text(Date.now());
	}
	function everyTwoSeconds (doSomething) {
	setInterval(doSomething, 2000);
	}
	var isFirstRequest = true;
	function refreshIfChanged () {
	$.get({
	url: window.location.href,
	ifModified: true,
	statusCode: {
	304: function () {
	console.log("304 Not Modified");
	},
	200: function () {
	if (isFirstRequest) {
	isFirstRequest = false;
	} else {
	location.reload();
	}
	}
	}
	});
	}
	whenTheDocumentIsReady(function () {
	showTheCurrentTimestamp();
	everyTwoSeconds(refreshIfChanged);
	});
	</script>
	</body>
	</html>
	#!/usr/bin/env node
	const express = require('express')
	express()
	.use(function (req, res, next) {
	console.log('request', Date.now())
	if (req.method == 'GET') {
	res.set('Cache-Control', 'private, max-age=0, no-cache')
	} else {
	res.set('Cache-Control', 'no-store')
	}
	next()
	})
	.use('/', express.static(__dirname))
	.listen(80, function () {
	console.log('listening...')
	})