reloader/index.html at master · wednesdaydeveloper/reloader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO dynamically reloading CSS stylesheets</title>
    <link rel="stylesheet" type="text/css" href="/header.css" />
    <link rel="stylesheet" type="text/css" href="/styles.css" />
    <script type="text/javascript" src="/socket.io/socket.io.js">
    </script>
    <script type="text/javascript">
      window.onload = function () {
        var socket = io.connect();

        socket.on('reload', function () {
          window.location.reload();
        });

        socket.on('stylesheet', function (sheet) {
          var link = document.createElement('link');
          var head = document.getElementsByTagName('head')[0];
          link.setAttribute('rel', 'stylesheet');
          link.setAttribute('type', 'text/css');
          link.setAttribute('href', sheet);
          head.appendChild(link);
        });
      }
    </script>
  </head>
  <body>
    <h1>This is our Awesome Webpage!</h1>
    <div id="body">
      <p>If this file (<code>index.html</code>) is edited, then the server will send a message
      to the browser using Socket.IO telling it to refresh the page.</p>

      <p>If either of the stylesheets (<code>header.css</code> or <code>styles.css</code>) are
      edited, then the server will send a message to the browser using Socket.IO telling it to
      dynamically reload the CSS, without refreshing the page.</p>
    </div>
    <div id="event-log"></div>
  </body>
</html>