使用socket.io更新快速實時視圖

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');
});

./views/layouts/main.handlebars

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

    {{{body}}}

</body>
</html>

./views/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-方式/ ）目前這個領域有一些成熟的框架/庫。 當然，您可以使用Angular.js，React.js或Knockout.js等框架僅使用前端實現數據綁定。 這兩種技術都適用於Socket.IO，你應該能夠通過一些研究找到對Handlebars的支持。

使用socket.io更新快速實時視圖

問題描述

1 個解決方案

解決方案1
0 2016-05-07 15:23:32

使用socket.io更新快速實時視圖

問題描述

1 個解決方案

解決方案1 0 2016-05-07 15:23:32

解決方案1
0 2016-05-07 15:23:32