[英]Socket.io TypeError: Cannot read property 'hteam' of undefined
I am new to Socket and I am using it to get live Australian football scores from this API and displaying them with Express/Pug.我是 Socket 的新手,我正在使用它从这个 API获取实时澳大利亚足球比分,并使用 Express/Pug 显示它们。
I can get them to display in the browser fine but in the console I am getting the following error:我可以让它们在浏览器中正常显示,但在控制台中我收到以下错误:
Uncaught TypeError: Cannot read property 'hteam' of undefined
at r.<anonymous> (round2:8)
at r.emit (index.js:83)
at r.onevent (index.js:83)
at r.onpacket (index.js:83)
at r.<anonymous> (index.js:83)
at r.emit (index.js:83)
at r.ondecoded (index.js:83)
at a.<anonymous> (index.js:83)
at a.r.emit (index.js:83)
at a.add (index.js:83)
I have tried the solutions mentioned here and here but none of them work.我已经尝试过这里和这里提到的解决方案,但它们都不起作用。
My index.js file is:我的index.js文件是:
var app = require('express')();
var http = require('http').createServer(app);
exports.io = require('socket.io')(http);
const path = require('path');
const routes = require('./routes/routes');
var port = process.env.PORT || 3000;
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use('/', routes);
http.listen(port, function(){
console.log('listening on *:' + port);
});
My routes.js file is:我的routes.js文件是:
onst express = require('express');
const router = express.Router();
const controllers = require('../controllers/controllers');
router.get('/round1', controllers.getRound1);
router.get('/round2', controllers.getRound2);
router.get('/round3', controllers.getRound3);
module.exports = router;
My controller.js file is:我的controller.js文件是:
var http = require('http').createServer(require('express')());
var io = require('socket.io')(http);
const got = require('got');
var { io } = require('../index');
let interval;
const getApiAndEmit = async (socket, round) => {
try {
const response = await got('https://api.squiggle.com.au/?q=games');
const parsed = JSON.parse(response.body);
gamesArray = parsed.games;
const roundArray = [];
gamesArray.forEach(element => {
if (element.round === round && element.year === 2020) {
roundArray.push(element);
}
});
socket.emit('FromAPI', roundArray);
} catch (error) {
console.error(`Error: ${error.code}`);
}
};
let getGame = function (round) {
io.on('connect', socket => {
if (interval) {
clearInterval(interval);
}
interval = setInterval(() => getApiAndEmit(socket, round), 3000);
});
}
exports.getRound1 = function (req, res) {
getGame(1);
res.render('game', {title: 1});
res.sendFile(__dirname + '/index.html');
};
exports.getRound2 = function (req, res) {
getGame(2);
res.render('game', {title: 2});
};
exports.getRound3 = function (req, res) {
getGame(3);
res.render('game', {title: 3});
};
My Pug view is:我的帕格观点是:
block layout-content
h1 Round #{title}
p(id='score')
p(class='game')
p(class='game')
p(class='game')
p(class='game')
p(class='game')
p(class='game')
p(class='game')
p(class='game')
p(class='game')
script(src="/socket.io/socket.io.js")
script.
const scores = document.getElementById('scores');
const games = document.getElementsByClassName('game');
const socket = io();
socket.on('FromAPI', roundArray => {
for (let i = 0; i < games.length; i++) {
games[i].innerHTML= ` ${roundArray[i].hteam} ${roundArray[i].hgoals}.${roundArray[i].hbehinds} ${roundArray[i].hscore} v ${roundArray[i].ateam} ${roundArray[i].ascore}`
}
});
My package.json is:我的package.json是:
{
"name": "socket afl scores",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {
"express": "^4.17.1",
"got": "^11.3.0",
"pug": "^3.0.0",
"socket.io": "^2.3.0"
}
}
Thank you谢谢
The cause of the error was on the client side in view .错误的原因在客户端视图中。
The conditional statement of the for loop should have been for 循环的条件语句应该是
(let i = 0; i < roundArray.length; i++)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.