Web worker 必须收集数据并将其发送到节点 js 服务器

Question

我是 JS 的新手，我的任务是实现将用户点击事件（点击按钮、电子邮件输入字段）发送给网络工作者的功能。工作人员必须将数据收集到 5 个项目的批次中，并将其发送到服务器（使用 POST /analytics/user）端点。问题是我不明白如何收集用户点击并将它们发送到我搜索文档但没有提到批次的 5 个项目的批次中。请问你能帮帮我吗？我的网站有3个按钮，其中2个没有任何事件侦听器，最后一个用于提交电子邮件，如下所示：

/analytics/user 来自路线的端点代码：

 router.post('/user', async function (req, res) {
  const payload = req.body;
  try {
    let data;
    try {
      data = await FileStorage.readJsonFile('user-analytics.json');
    } catch (e) {
      data = [];
    }

    data.push({timestamp: Date.now(), data: payload});
    await FileStorage.writeFile('user-analytics.json', data);
    await res.json({success: true})
  } catch (e) {
    console.log(e);
    res.status(500).send('Internal error');
  }
});

让我知道我是否应该添加更多关于某事的信息。

编辑：
我编写了发送按钮点击的函数，之后 worker 应该将数据发送到服务器，但现在的问题是我无法将消息推送到 web worker 到数组，它只推送第一条消息..

将用户点击发送给 web worker 的函数：

  export const sendUserClicksToWorker = () => {
    const allButtonsToStore = document.getElementsByClassName("app-section__button");
    const inputField = document.getElementsByClassName("form-input")
    let reason = [];
    //for loop for pushing clicks from buttonts to the array
    for (let x = 0; x < allButtonsToStore.length; x++) {
        allButtonsToStore[x].addEventListener("click", function () {
            worker.postMessage(this.textContent)
            console.log(this.textContent)
        });
    }
    //for loop for pushing click from email input field to the array
    for (let x = 0; x < inputField.length; x++) {
        inputField[x].addEventListener("click", function () {
            worker.postMessage(this.textContent)
            console.log(this.textContent)
        });
    }
    
}

向服务器发送数据的函数：

export const sendButtonClicksToServer = (dataToSend) => {
    sendHttpRequest('POST', 'http://localhost:8080/analytics/user', {
        dataToSend
    }).then(responseData => {
        return responseData
        //console.log(responseData);
    }).catch(err => {
        console.log(err, err.data)
        window.alert(err.data.error)
    })
}

并且在主 js 文件中：

 if (window.Worker) {
      const url = new URL('./scripts/worker.js', import.meta.url);
      const worker = new Worker(url);
      
      const allButtonsToStore = document.getElementsByClassName("app-section__button");
      const inputField = document.getElementsByClassName("form-input")
      //for loop for pushing clicks from buttonts to the array
      for (let x = 0; x < allButtonsToStore.length; x++) {
          allButtonsToStore[x].addEventListener("click", function () {
              worker.postMessage(this.textContent)
              //console.log(this.textContent)
          });
      }
      //for loop for pushing click from email input field to the array
      for (let x = 0; x < inputField.length; x++) {
          inputField[x].addEventListener("click", function () {
              worker.postMessage(this.textContent)
             // console.log(this.textContent)
          });
      }

      worker.onmessage = e => {
        console.log(e.data)
        sendButtonClicksToServer(e.data);
      }
      worker.onerror = error => {
        console.log(error.message)
      }
    }

和worker.js：

let data = []
onmessage = function (e) {
    console.log('Data Received: ',e.data)

let receivedButtonClicks = e.data
// data.push(receivedButtonClicks)
// if (data.length > 4) {
//     postMessage(data)
//     data.length = 0;
//     console.log('Data received!')
//     console.log(data)
// }
for ( let i = 0 ; i< 5;i++){
    data[i].push(receivedButtonClicks)
}



console.log('blabla',data)
}

现在我100%不明白问题出在哪里以及如何解决？？..

Answer 1

所以，我设法完成了这项任务，然后我回到这里展示了我的功能：

我做了两个功能，一个是通过以下方式将用户点击发送给网络工作者：

const sendUserClicksToWorker = () => {
    if (window.Worker) {
        const url = new URL('./worker.js', import.meta.url);
        const worker = new Worker(url);

        const allButtonsToStore = document.getElementsByClassName("app-section__button");
        const inputField = document.getElementsByClassName("form-input")

        //for loop for pushing clicks from buttonts to the array
        for (let x = 0; x < allButtonsToStore.length; x++) {
            allButtonsToStore[x].addEventListener("click", function () {
                worker.postMessage(this.textContent)
            });
        }
        //for loop for pushing click from email input field to the array
        for (let x = 0; x < inputField.length; x++) {
            inputField[x].addEventListener("click", function () {
                worker.postMessage(this.textContent)
            });
        }

        worker.onmessage = e => {
           // console.log('Thread received data: ', e.data)
            sendButtonClicksToServer(e.data);
        }
        worker.onerror = error => {
            console.log(error.message)
        }
    }

}

点击每个按钮都会向网络工作者发送一条消息。以及第二个向服务器发送数据的函数：

const sendButtonClicksToServer = (dataToSend) => {
    sendHttpRequest('POST', 'http://localhost:8080/analytics/user', {
        dataToSend
    }).then(responseData => {
        return responseData
    }).catch(err => {
        console.log(err, err.data)
        window.alert(err.data.error)
    })
}

webworker 处理以这种方式接收到的数据，并在下一步发送回主线程，它正在发送到服务器：

let batch = []
onmessage = function (e) {
    console.log('Data Received: ',e.data)
    let receivedButtonClicks = e.data

for ( let i = 0 ; i< 1;i++){
    batch.push(receivedButtonClicks)

    if (batch.length > 4){
        postMessage(batch)
        batch.length = 0
        console.log('Data was sent!')
    }
}

}

没那么难，但他妈的花了太多时间。谢谢大家的帮助！

Web worker 必须收集数据并将其发送到节点 js 服务器

Web worker must collect data and send it to a node js server

javascript

web-worker

node.js