Question

我有3个带有reaveal.js演示文稿的iframe。虽然他们不在node.js服务器上，但他们工作得很好。但我需要socket.io来自动刷新选定的iframe，当带有reveal.js演示文件的文件被更改时（我使用php上传文件操作它并使用演示文稿制作新的.html文件然后我＆＃39; m覆盖旧文件）。带有chokidar的Node.js服务器正在监视文件的更改。而且它正在发挥作用。但是当我一起加入socket.io和reveal.js时，一切都失败了。网站非常令人耳目一新（不知道为什么我会被排除在外）并因为浏览器崩溃了。

服务器代码：

var app = require('http').createServer(handler)
var io = require('socket.io')(app);
var fs = require('fs');
var chokidar = require('chokidar');


app.listen(80);

function handler (req, res) {
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

// io.on('connection', function (socket) {
//   socket.emit('news', { hello: 'world' });
//   socket.on('my other event', function (data) {
//     console.log(data);
//   });
// });

var watcher = chokidar.watch('file, dir, or glob', {
  ignored: /[\/\\]\./, persistent: true
});
watcher.add('prez/prez1.html');
watcher.add('prez/prez2.html');
watcher.add('prez/prez3.html');
var log = console.log.bind(console);

watcher
  .on('change', function(path) { log('File', path, 'changed');
  //io.emit('restart1');


   })

客户代码：

<html>
    <head>

    </head>
    <body>
    <script src="/socket.io/socket.io.js"></script>
<script>
 var socket = io('http://localhost');
  // socket.on('news', function (data) {
  //   console.log(data);
  //   socket.emit('my other event', { my: 'data' });
  // });
//   socket.on('restart1', function (data) {



// var iframe = document.getElementById('ramka1');
// iframe.src = iframe.src;


//   });
//   socket.on('restart2', function (data) {
//    var iframe = document.getElementById('ramka2');
// iframe.src = iframe.src;
//   });
//   socket.on('restart3', function (data) {

//    var iframe = document.getElementById('ramka3');
// iframe.src = iframe.src;
//   });

</script>


         <iframe id="ramka1" width="100%" height="33%" src="prez/prez1.html"></iframe><br>
         <iframe id="ramka2" width="100%" height="33%" src="prez/prez2.html"></iframe><br>
         <iframe id="ramka3" width="100%" height="33%" src="prez/prez3.html"></iframe><br>
<style type="text/css">
      iframe {
         border:none;
     }  
     </style>

    </body>
</html>

示例演示代码：

<html>
    <head>
        <link rel="stylesheet" href="css/reveal.css">
        <link rel="stylesheet" href="css/theme/white.css">
    </head>
    <body>
        <div class="reveal">
            <div class="slides">
                <section>Slide 1</section>
                <section>Slide 2</section>
            </div>
        </div>
        <script src="js/reveal.js"></script>
        <script>
            Reveal.initialize({controls: false, loop: true,  autoSlide: 1000});
        </script>
    </body>
</html>

使用reveal.js + socket.io时，站点自动刷新

0 个答案: