Я не могу передать данные через socket.io клиенту и отобразить их на странице - PullRequest
Новая
       21

Я не могу передать данные через socket.io клиенту и отобразить их на странице

1 голос
/ 11 марта 2019

У меня есть приложение, которое должно обновлять некоторые данные из API веб-сокета.Эти данные отображаются, когда я console.log его на стороне сервера.Я попытался сохранить его в переменной и передать через функцию emit файла Socket.io.Но в результате я получаю нулевое значение, когда пытаюсь отобразить данные на внешнем интерфейсе.

Что я делаю не так, что они не отображаются на странице?

Код серверной стороны: 

 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 Ответ

1 голос
/ 11 марта 2019

Похоже, вы неправильно получаете данные на стороне клиента.На стороне сервера вы звоните io.emit('coins', coinData);, чтобы отправить клиенту данные о монетах.Вы называете событие «монеты», поэтому на стороне клиента вы должны прослушивать событие «монеты» вместо события «подключение».

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.

...