我无法通过 socket.io 向客户端获取实时数据并将其显示在页面上
I can't get live data through socket.io to client and display it on the page
我有一个应用程序应该实时更新来自 websocket 的一些数据 API。当我在服务器端 console.log 时显示此数据。我尝试将它存储在一个变量中并通过 Socket.io 的 emit 函数传递它。但是当我试图让数据显示在前端时,它给出了一个空值。
我做错了什么,它不会显示在页面上?
服务器端代码:
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 %>
套接字连接正确,因此设置的任何一方都不会出现问题。我唯一遇到的问题是将数据从服务器传递到客户端,并能够在页面上实时显示数据更新本身。
看起来您在客户端接收到的数据有误。在服务器端,您调用 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 收到消息时,这将发送到所有套接字。
我有一个应用程序应该实时更新来自 websocket 的一些数据 API。当我在服务器端 console.log 时显示此数据。我尝试将它存储在一个变量中并通过 Socket.io 的 emit 函数传递它。但是当我试图让数据显示在前端时,它给出了一个空值。
我做错了什么,它不会显示在页面上?
服务器端代码:
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 %>
套接字连接正确,因此设置的任何一方都不会出现问题。我唯一遇到的问题是将数据从服务器传递到客户端,并能够在页面上实时显示数据更新本身。
看起来您在客户端接收到的数据有误。在服务器端,您调用 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 收到消息时,这将发送到所有套接字。