NodeJSはミドルウェアでクライアントに画像を送信することができます

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"; 

はどういうわけか問題がある...

サーバーの画像ファイルが変更されます、それは、クライアントが持っている最初の画像をレンダリングされ、その結果にについて、画像を描画するために、クライアントに発します再度読み込まれましたが、URL上の画像は変更されました。 私はクライアントがイメージをキャッシュしていると思いますか？イメージは変更されていないので、イメージをそのまま使用すると考えています。 URLに現在の画像を描画する方法はありますか？ さらに良い方法はありますか？

Answer 1

fetch() APIを使用して、個のリソースでクライアントのブラウザキャッシュを乱さずにcache-bustingを実装できます。

変更ファイルへの静的なアクセスを許可するサーバー上のフォルダを決定したら（これは、1つのファイルへの静的アクセスを許可したパターンよりも好ましい）、fs.watch()を使用してリアルタイム更新を実装できますそのような：

ノード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>