Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/72.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript window.onload未在NodeJS页面中运行_Javascript_Html_Node.js_Express_Socket.io - Fatal编程技术网

Javascript window.onload未在NodeJS页面中运行

Javascript window.onload未在NodeJS页面中运行,javascript,html,node.js,express,socket.io,Javascript,Html,Node.js,Express,Socket.io,我正在用Express和Socket.io制作一个NodeJS应用程序。我试图以对象的形式将一些数据从服务器发送到客户机,我希望在加载页面时发生这种情况。然后,可以使用接收到的对象更改一些HTML。我很确定这在Socket.io中是可能的。但是,当使用window.onload=function(){…}时,什么也不会发生窗口。甚至不调用onload 当我在不使用NodeJS(仅使用HTML页面)的情况下尝试此操作时,效果很好窗口。调用onload,一切正常。那么为什么这在NodeJS中不起作用

我正在用Express和Socket.io制作一个NodeJS应用程序。我试图以对象的形式将一些数据从服务器发送到客户机,我希望在加载页面时发生这种情况。然后,可以使用接收到的对象更改一些HTML。我很确定这在Socket.io中是可能的。但是,当使用
window.onload=function(){…}
时,什么也不会发生<代码>窗口。甚至不调用onload

当我在不使用NodeJS(仅使用HTML页面)的情况下尝试此操作时,效果很好<代码>窗口。调用onload,一切正常。那么为什么这在NodeJS中不起作用呢?我知道它会等待所有的图像等加载,但现在已经基本解决了。图像加载良好。(我仍然无法加载
背景图像
,这会有什么不同吗?)

另外,我从服务器向客户端发送数据的方式是否正确?我更愿意使用Socket.io,而不是学习一些新的东西,如Angular或React

这是我的密码:

main.js(客户端)

app.js(服务器)


关于window.onload在运行Web服务器时不运行的问题,听起来很奇怪;您的实现看起来很好。可能是因为,就像你在做的那样,你永远无法完成加载某些资产

关于socket.io的实现: 您正在通过
socket.emit()
socket
发送事件,但您正在侦听发送到服务器的事件,而不是连接的套接字

尝试将事件绑定放在服务器连接事件中,如下所示:

io.on("connection", (socket) => {

  socket.on('pageReady', function() {
    socket.emit('pageInfo', response);
    console.log('page ready recieved');
  });

}
关于在本例中使用socket.io 在这种情况下,使用socket.io听起来有点过头了,因为您基本上希望调用服务器(
fetch()
)并获取包含要使用的数据的响应。 为此,我建议您更像REST api一样使用和构建express应用程序:

服务器:

var app = Express();

app.get('/data', (request, response) => {
   response.send("hello");
}
客户:

fetch('/data')
  .then((data) => {
    console.log(data); // => hello
  });

谢谢这似乎是一种更好的方法,所以我已经在代码中实现了它。不幸的是,我的问题仍然存在。我读你的问题太快了,根本没有意识到你甚至发送活动都有问题!没有一个明确的答案,对不起。啊,好的。谢谢你的回答。嗯,只是注意到了编辑。据我所知,如果我使用它,我就不必再摆弄
window.onload
?它的工作原理基本相同,因此您可能仍然希望收听window.onload(因此在加载DOM之前不要尝试更改DOM)。您是否100%确定客户端脚本实际上是使用脚本标记加载到客户端的?
var app = Express();

app.get('/data', (request, response) => {
   response.send("hello");
}
fetch('/data')
  .then((data) => {
    console.log(data); // => hello
  });