Question

我想提一下，图像文件正在不断变化。我正在使用NodeJS的中间件：

app.use("/image.jpg",express.static(_dirname+"/image.jpg")

问题在于节点传达了image.jpg而没有真正告知文件已被修改。按下按钮将出现此部分。

var image=new Image();
image.onload=function(){rendering to canvas}
image.src="/image.jpg";

不知何故有问题......

服务器的图片文件被修改然后它发送到客户端绘制图像，关于结果，客户端正在呈现它已经再次加载的第一个图像，尽管网址上的图像已被更改。我认为客户端正在缓存图像？并认为图像未经修改，因此一直使用它。有没有办法在网址上绘制当前图像？还有更好的方法吗？

Answer 1

You can use the fetch() API点击次数以实施cache-busting，而不会使用大量/image.jpg?bust=...资源混淆客户端的浏览器缓存。

在您的服务器中决定要允许静态访问更改文件的文件夹后（这比您允许静态访问单个文件的模式更可取），您可以使用{{来实现实时更新3}}像这样：

节点app.js（fs.watch()）：

const fs = require('fs')
const path = require('path')
const app = require('express')()
const server = require('http').Server(app)
const io = require('socket.io')(server)

server.listen(process.env.PORT || 8080)

app.use('/', express.static(path.resolve(__dirname, './watched-directory')))

//...

io.on('connection', (socket) => {
  //...
});

fs.watch('watched-directory', {
  //don't want watch process hanging if server is closed
  persistent: false,
  //supported on Windows OS / Mac OSX
  recursive: true,
}, (eventType, filename) => {
  if (eventType === 'change') {
    io.emit('filechange', filename)
  }
})

浏览器index.html：

<script src="/socket.io/socket.io.js"></script>
<script>
  let socket = io.connect()

  socket.on('filechange', async (filename) => {
    console.log(filename)

    let response = await fetch(filename, { cache: 'no-store' })
    let blob = await response.toBlob()
    let url = URL.createObjectURL(blob)

    //modified from your question
    let image = new Image()
    image.addEventListener('load', () => {
      //your canvas rendering code here
    })
    image.src = url
  })
</script>

NodeJS使用中间件

1 个答案: