2017-05-09 9 views
0

私はプログラマではありません... node.jsにwebsocketアプリケーションを作成してborwserに画像を送信できますが、時々変わった。 Ex。 image1.jpg image2.jpg image3.jpg image4.jpg この画像をブラウザで更新しておく必要があります。node.jsで実装されたwebsocketで画像を受信して​​更新する

私のアプリは、アップデートなしで1つの画像でのみ動作するようになりました。 完全なプロジェクトが聞きです:私はこのコードで画像を公開https://github.com/akoscomp/imgstream

io.sockets.on('connection', function(socket){ 
fs.readFile(__dirname + '/image.jpg', function(err, buf){ 
    //it's impossible to ebed binary data 
    socket.emit('image', { image: true, buffer: buf.toString('base64') }); 
    console.log('image file is initialized: ' + __dirname + '/image.jpg'); 
});}); 

そして、私は、ファイルの更新を確認することができますが、私は、ブラウザ上の更新を自動化することはできません。

var watch = require('node-watch'); 
watch('image.jpg', function(evt, filename) { 
    console.log(filename, ' changed.'); 
}); 

borwserで画像の更新を自動化するのを手伝ってください。その後、私はおそらく多くの画像のコードを適用することができます。

答えて

0

イメージが変更されると、次のコードを使用して送信できます。

io.sockets.on('connection', function(socket) { 
    connections.push(socket); 
    console.log('Connected: %s sockets connected', connections.length); 

    // Diconnect 
    socket.on('disconnect', function(data) { 
    connections.splice(connections.indexOf(socket), 1); 
    console.log('Disconnected %s sockets connected', connections.length); 
    }); 

    fs.readFile(__dirname + '/image.jpg', function(err, buf) { 
    //it's impossible to ebed binary data 
    socket.emit('image', { image: true, buffer: buf.toString('base64') }); 
    console.log('image file is initialized: ' + __dirname + '/image.jpg'); 
    }); 
}); 


var watch = require('node-watch'); 

watch('image.jpg', function(evt, filename) { 
    if (evt === 'update') { 
    fs.readFile(__dirname + '/image.jpg', function(err, buf) { 
     for (var i = 0; i < connections.length; i++) { 
     //it's impossible to ebed binary data 
     connections[i].emit('image', { image: true, buffer: buf.toString('base64') }); 
     console.log('image file is initialized: ' + __dirname + '/image.jpg'); 
     } 
    }); 
    } 
}); 

あなたはhttps://github.com/yanalavishnu/imgstream

+1

おかげで完全なプロジェクトを確認することができます。それは働く。 – Akos

+0

私は複数のファイルのコードを書くことができるようになりました。今度はカスタム数の画像を表示できます。 – Akos

関連する問題