Question

我正在使用Express和Socket.io制作NodeJS应用程序。我正在尝试以对象形式从服务器向客户端发送一些数据，并且我希望在加载页面时发生这种情况。然后，可以使用接收到的对象更改某些HTML。我很确定使用Socket.io可以做到这一点。但是，在使用window.onload = function() {...}时，什么也没有发生。甚至没有调用window.onload。

当我不使用NodeJS（仅使用HTML页面）尝试此操作时，它工作正常。 window.onload被调用，一切顺利。那为什么在NodeJS中不起作用呢？我知道它正在等待所有图像等加载并具有a problem with that，但是现在大多数问题已得到解决。图像加载良好。（尽管我仍然无法用background-image加载它，这有什么区别吗？）

此外，我是否要从服务器向客户端发送数据的正确方法？我宁愿使用Socket.io也不愿学习Angular或React之类的新东西。

这是我的代码：

main.js（客户端）

window.onload = function() {
  console.log('window loaded');   // this shows when not in NodeJS app
  alert('window ready');          // neither does this
  socket.emit('pageReady');       // so this doesn't run
}

socket.on('pageInfo', function(response) {
  console.log('page info received');    //this doesn't run either
  document.getElementById("schoolName").innerHTML = response.school_name;
});

app.js（服务器）

io.on('pageReady', function() {
  io.emit('pageInfo', response);       // response is defined earlier
  console.log('page ready recieved');  // this doesn't show
});

Answer 1

关于运行网络服务器时window.onload没有运行听起来很奇怪；您的实现看起来不错。就像您进入一样，您可能永远都无法完成加载某些资产的事情吗？

关于socket.io的实现：

您正在通过socket向socket.emit()发送事件，但是您正在侦听发送到服务器而不是连接的套接字的事件。

尝试将事件绑定与服务器连接事件一起使用，如下所示：

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

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

}

关于在这种情况下使用socket.io

在这种情况下，使用socket.io听起来有点过头，您实际上是想调用服务器（fetch()）并获得要使用的数据的响应。为此，我建议您使用fetch API并更像REST api来构建快速应用程序：

服务器：

var app = Express();

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

客户端：

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

在NodeJS页面中未运行window.onload

1 个答案:

关于socket.io的实现：

关于在这种情况下使用socket.io