Question

情况：我正在开发一个用C ++编写的图像处理应用程序，我必须通过web接口显示处理过的帧，每次重新加载一个img DOM src。 1秒，即使用：

$("#myImage").attr("src", "/myImage.jpg?" + new Date().getTime());

我的想法是将C ++应用程序用作客户端，并从Web界面打开服务器套接字。使用这种方法，我可以实现图像更新的良好同步，因为我在图像不完整时更新img DOM时遇到了问题。所以

1）每个约。 30个框架，C ++应用程序连接到服务器套接字并告诉Web界面img可以更新。
2）Web界面更新DOM img src而没有任何同步错误。

基于这些要求，以下是我使用nginx和nodejs开发的解决方案以及我的小型Web开发经验。

nginx配置代码段

location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                # try_files $uri $uri/ =404;
                auth_basic "Restricted Content";
                auth_basic_user_file /etc/nginx/.htpasswd;

                proxy_pass http://127.0.0.1:5000;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
        }

HTML代码：

<html>
<head>
<meta charset="utf-8">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>

<title>Frame viewer</title>

<style>
* { padding: 0; margin: 0; vertical-align: top; }

body 
{
    background-color: #ADACFF;
}

#imageOutputDiv 
{
    width: 600px;
    height: 400px;
    border: 1px solid #ccc;
    left:50%;
    top:50%;
    text-align: center;
    margin:auto;
}

#footer 
{
    bottom: 0; 
    width: 100%;
    text-align: center;
    position: absolute;
    color: black;
}
</style>

<script>
$(function() 
{
    var socket = io.connect();
    socket.on('update', function (data)
    {
        $("#debugText").text("Updated: " + new Date().getTime().toString());
        $("#imageOutput").attr('src', '/image/output.jpg?'+ new Date().getTime().toString());
    });
});
</script>
</head>

<body>
    <br>
    <div id = "bodyTitle">
        <h2 style = "text-align:center">Frame viewer</h2>
    </div>
    <br>
    <div id="imageOutputDiv">
        <img id="imageOutput"></img>
    </div>

    <div id="debug">
        <h5 id="debugText"></h5>
    </div>

    <div id="footer">
        <h5 id="footerText">test 1.9.1</h5>
    </div>

</body>
</html>

NodeJS代码

var htmlPath = '/var/www/html/index.html';
var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs');
app.listen(5000);

function handler (req, res) 
{
  fs.readFile(htmlPath, function (err, data) 
  {
    if (err)
    {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(data);
  });
}

var net = require('net');
var server = net.createServer(function(extsocket) 
{
    extsocket.write('# test server\r\n');
    extsocket.on('data', function (data) 
    {
        if (data.toString() == 'takeimage')
        { 
          console.log("Received: " + data.toString());
           // here I should update DOM debugTxt
          io.emit('update', { update: '*' });
        }
    });
});
server.listen(8080, '0.0.0.0');

nodejs执行的Javascript套接字代码工作正常，因为我可以使用telnet测试端口8080上的连接。问题是 debugText 在图片 imageOutput 不可见时正确更新，所以我怀疑我无法访问它..

如果可能，如何加载图像并正确重新加载src属性？我如何修改我的代码？

如果您认为有比使用nodejs更好的解决方案，我将很乐意阅读您的建议。

NodeJS：重新加载img src属性

0 个答案: