#javascript #node.js #socket.io #ejs #c9.io
#javascript #node.js #socket.io #ejs #c9.io
Вопрос:
У меня есть приложение, которое должно оперативно обновлять некоторые данные из websocket API. Эти данные отображаются при консоли.зарегистрируйте это на стороне сервера. Я попытался сохранить их в переменной и передать через функцию emit из Socket.io. Но в результате, когда я пытаюсь получить данные для отображения во внешнем интерфейсе, выдается значение null.
Что я делаю не так, что это не отображается на странице?
Код на стороне сервера:
app.get("/", function(req, res){
res.render("home");
});
app.get("/fat-finger", function(req, res){
binance.prices((error, ticker) => {
var prijzen = ticker;
res.render("fat-finger", {laatstePrijzen: prijzen});
});
});
app.set('port', process.env.PORT || 3000);
var server = http.createServer(app);
var io = require('socket.io').listen(server);
server.listen(app.get('port'));
console.log("Server is up and running!")
io.on('connection', function(client) {
console.log('Client connected...');
var coinData;
binance.websockets.prevDay('BTCUSDT', (error, response) => {
coinData = response;
console.log(coinData);
});
io.emit('coins', coinData); //this code sending data from server to client
});
Внешний код (клиент):
<% include partials/header %>
<header class="ui main container">
<h1>Fat Finger Scanner</h1>
</header>
<main class="ui text container">
<section class="ui container segment">
<h4>You can find Fat Fingers quickly with this tool!</h4>
<div id="coindatadiv">
<script>
var div = document.getElementById("coindatadiv");
socket.on("connect", function(allCoinData){
div.innerHTML = "<p>" allCoinData "</p>";
});
</script>
</div
</section>
</main>
</div>
<% include partials/footer %>
Подключение к сокету выполнено правильно, так что это не должно быть проблемой ни с одной из сторон настройки. Единственное, на чем я застреваю, это передача данных с сервера на сторону клиента и возможность отображать само обновление данных в реальном времени на странице.
Ответ №1:
Похоже, вы неправильно получаете данные на стороне клиента. На стороне сервера вы вызываете io.emit('coins', coinData);
для отправки данных монеты клиенту. Вы называете событие «coins», поэтому на стороне клиента вам приходится прослушивать событие «coins» вместо события «connect».
var div = document.getElementById("coindatadiv");
socket.on("coins", function(allCoinData){
div.innerHTML = "<p>" allCoinData "</p>";
});
Надеюсь, это имеет смысл, дайте мне знать, если появится что-нибудь еще! 🙂
Теперь я понимаю, что вы используете API и хотите поддерживать всех клиентов в курсе последней информации из этого API. Вместо этого вы можете захотеть просто отправлять их во все сокеты при каждом обновлении API:
Изменить
io.on('connection', function(client) {
console.log('Client connected...');
var coinData;
binance.websockets.prevDay('BTCUSDT', (error, response) => {
coinData = response;
console.log(coinData);
});
io.emit('coins', coinData); //this code sending data from server to client
});
Для
var coinData = 'not yet defined';
binance.websockets.prevDay('BTCUSDT', (error, response) => {
coinData = response;
io.emit('coins', coinData);
console.log(coinData);
});
io.on('connection', function(client) {
client.emit('coins', coinData);
});
Это будет передаваться во все сокеты каждый раз, когда вы получаете сообщение от вашего API.
Комментарии:
1. Это все еще вызывает у меня ту же проблему. Я изменил прослушиватель на стороне клиента на ‘coins’, но это по-прежнему дает мне нулевой результат на самой странице. Есть идеи?
2. @DannyHoekstra Попробуйте также изменить
io.emit('coins', coinData);
наclient.emit('coins', coinData);
3. Сам API обновляется каждую секунду и, следовательно, изменяет данные каждую секунду. Это не должно быть проблемой, верно?
4. @DannyHoekstra Я обновил свой ответ более конкретным решением для вас. Теперь он будет отправлять текущие coinData клиенту при первом подключении, а также будет обновлять их последними coinData, когда API отправляет вам сообщение. coinData может быть равно «еще не определено» до тех пор, пока API не отправит данные.
5. Большое спасибо за ответ. Теперь это работает, потому что теперь он показал [object Объект]. Я знаю, как получить конкретные данные из объекта, и поэтому это работает отлично!!!