具有套接字io節點js的圖像

Question

我正在嘗試做聽起來很簡單的事情，但是很遺憾，我無法做到正確。

我只需要使用socket.io從文件中傳輸圖像。

我已經閱讀了一些過時或不完整的鏈接，這是我現在的位置（無法正常工作）：

server.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var bodyParser = require('body-parser');
var fs = require('fs');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));

app.get('/',function (req,res){res.sendStatus(200)});
app.get('/image',function (req,res){res.sendFile(__dirname+'/index.html')});


http.listen(3000, function () {
    console.log("server listening");
}); 

io.on('connection',function(socket){
    console.log("socket connection");
    var interval = setInterval(function(){
        fs.readFile('./image.jpeg',function(err,buff){
            if(err){
                console.error(err);
            }
            else{
                socket.emit('image',{image:true,buffer:buff.toString('base64')});
            }
        });
    },1000);
    socket.on('disconnect', function(){
        console.log("socket deconnection");
        clearInterval(interval);
    });
});

的index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>IMAGE</title>
  </head>
  <body>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
      $(function(){
        var socket = io();
        var ctx = document.getElementById('canvas').getContext('2d');
        socket.on('image',function(info){
          if(info.image){
            var img = new Image();
            img.onload = function () {
              ctx.drawImage(img, 0, 0);
            };
            img.src = 'data:image/jpeg;base64,' + info.buffer;
            console.log("Image received");
          }
        })
      });
    </script>
  </body>
</html>

我還嘗試過其他幾種與此客戶端文件有關的配置，但是它們都不起作用。

我會間隔讀取文件，因為在實際項目中，image.jpeg文件有時會更改。

非常感謝您的幫助！

Answer 1

通過套接字發送圖像不是很有效。 當我不得不向每個客戶發送大型游戲世界數據緩沖區時，我偶然發現了類似的情況。 通過套接字連接發送這些數據包顯然不是我的選擇。

我通過在服務器上存儲引用到特定文件的密鑰並將其僅發送給客戶端來解決該問題。 然后，客戶端會將包含密鑰的請求發送到http服務器，該服務器最終將使用該文件進行響應。

這是一些簡化的代碼，僅用於說明：

在服務器上：

...
const files = {};
...

...
function (request, response) { // http request function
    const key = request.url.parse(key);

    const file = fs.readFile(files[key]);

    response.send(file);
}
...

...
function sendFile (socket, file) { // function that sends and stores the key
    const key = generateKey();
    files[key] = file;

    socket.send('key', key);
}
...

...
sendFile(socket, '/path/to/file'); // send key to socket
...

這樣，大文件可以通過http而不是套接字下載。

在客戶端上：

...
socket.on('key', function (key) {
    fetch('/file/' + key, function (response) {
        const file = response.blob(); // blob or whatever
    });
});
...

希望這對您有幫助：D

具有套接字io節點js的圖像

問題描述

1 個解決方案

解決方案1
0 2018-08-21 20:06:05

具有套接字io節點js的圖像

問題描述

1 個解決方案

解決方案1 0 2018-08-21 20:06:05

解決方案1
0 2018-08-21 20:06:05