Question

我使用把手作为我的快递应用程序的视图引擎。但是如何从socket.io中附加新的数据？

router.get('/', function(req, res) {
  io.on('connection', function(client) { 
            client.on('order', function(data) {
                console.log(data); //real time data from mobile app
                //what to do here?
            });
        });

    Orders.getOrdersByUserId(req.user.id, function(err,data){
      res.render('orders/index',{orders:data});
    })
});

Answer 1

看起来索引把手文件被呈现给客户端，然后，异步地，socket.io可以向客户端发送新信息（在您的情况下，新订单进入）。这些新信息必须通过JavaScript添加到DOM中。已经发生了使用把手进行渲染的初始视图。

这是一个关于如何运作的简单例子......

./ server.js

var express = require('express');
var exphbs = require('express-handlebars');

var app = express();

app.engine('handlebars', exphbs({
  defaultLayout: 'main'
}));

app.set('view engine', 'handlebars');

app.get('/', function(req, res) {
  res.render('test', {testItems: [1,2,3]});
});

app.listen(3000, function() {
  console.log('listening on 3000');
});

./视图/布局/ main.handlebars

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Example App</title>
</head>
<body>

    {{{body}}}

</body>
</html>

./视图/ test.handlebars

<ul class="test-items">
  {{#each testItems}}
    <li>{{this}}</li>
  {{/each}}
</ul>

<!-- TODO: obviously bring in jQuery the correct way -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>

<!-- TODO: put custom javascript in individual files instead of inline. Also wire up Socket.IO on the server and the client... just using a mocked out message handler for a simple explanation -->
<script>
  // Mock socket message handler... this would be socket.io on the client side subscribing to a socket.io topic on the server
  setTimeout(function() {
    var inboundDummyData = 9001;
    $('.test-items').append('<li>' + inboundDummyData +'</li>');
  }, 3000);
</script>

结果：页面加载时会显示1,2,3的列表。 3秒后，我们模拟出的Socket.io消息处理程序将收到一条消息并将9001添加到该列表中。

希望这能让你开始。 ~~如果我发现Express Handlebars支持数据的实时更新，我会更新我的答案，但看起来它只会进行初始视图渲染，就是这样。~~

更新：做了一些研究......快速把手对于初始视图很有用，但之后不支持绑定。如果你想要基于服务器的数据绑定/“实时更新”，你应该看看“同构JavaScript”（这里有好文章：https://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/）目前这个领域有一些成熟的框架/库。当然，您可以使用Angular.js，React.js或Knockout.js等框架仅使用前端实现数据绑定。这两种技术都适用于Socket.IO，您应该能够通过一些研究找到对Handlebars的支持。

使用socket.io更新快速实时视图

1 个答案: