javascript - NodeJS 通过中间件发送图像(可能会被修改)到客户端

Question

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

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

问题是 Node 传递 image.jpg 时并没有真正告知文件已被修改。按下按钮这部分就会发生。

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

有一个问题......

服务器的图片文件被修改，然后发送给客户端绘制图像，从结果来看，客户端正在渲染它再次加载的第一个图像，尽管 url 上的图像已更改。我认为客户端正在缓存图像？并认为该图像未修改，因此继续使用它。有没有办法在url上绘制当前图像？还有更好的方法吗？

Answer 1

您可以使用 fetch() API 来实现 cache-busting，而不会用一堆 /image.jpg?bust=... 资源扰乱客户端的浏览器缓存。

在您的服务器中决定要允许静态访问不断变化的文件的文件夹后(这比允许静态访问单个文件的模式更可取)，您可以使用 fs.watch() 来实现实时更新，例如所以:

Node app.js(with express 3/4):

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>