Обновить представление в реальном времени в реальном времени с помощью socket.io

Я использую руль как механизм просмотра моего экспресс-приложения. Но как добавить новые ближайшие данные из socket.io ??Обновить представление в реальном времени в реальном времени с помощью 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}); 
    }) 
});

источник

2016-05-07 Jamie Jordan

так что файл указателя ручек визуализируется клиенту, а затем, асинхронно, socket.io может отправлять новую информацию клиенту (в вашем случае приходит новый заказ). Эта новая информация должна быть добавлена JavaScript в DOM. Это первоначальное представление рендеринга с рулями уже произошло. –

@MatthewVita Я знаю, но как? должен ли я поставить io на циклон, а не на маршрут экспресса? –

Я могу собрать пример кода для вас, чтобы выполнить это. –

Оказывается, что файл индекса рули оказывается клиенту, а затем, асинхронно, 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-way/), на данный момент существует несколько зрелых фреймворков/библиотек. Разумеется, вы можете добиться привязки данных только с интерфейсом, используя фреймворк вроде Angular.js, React.js или Knockout.js. Оба метода будут работать с Socket.IO, и вы сможете найти поддержку Handlebars с небольшим количеством исследований.

источник

2016-05-07 15:23:32

это не отвечает, как решить мою проблему выше. Я уже использую handlebar, и он работает, теперь я застрял в обновлении моего представления, где я должен поместить свои данные, которые поступают из сокета? –

Socket.io на клиенте будет подписаться на тему Socket.io на сервере. Когда сервер будет транслироваться на ваш клиент, у вас будет обработчик, который будет вызван (я дестабилизирую это с помощью тайм-аута обработчика сообщений mock socket). В этом случае вы обновите представление. Мой ответ затрагивает тот факт, что вы не можете просто обновить представление handlebars, потому что это уже было отображено - вам нужно будет обновить DOM. Изучите https://www.npmjs.com/package/socket.io-client. Как вы получаете эти данные в представлении, зависит от вас (jQuery, Angular, React и т. Д.). –

Обновить представление в реальном времени в реальном времени с помощью socket.io

ответ

Смежные вопросы