页面js怎么调用nodejs

页面JS调用NodeJS的方法有多种，包括通过HTTP请求、WebSocket、使用Electron、以及通过Server-Sent Events (SSE)。 其中最常见和易于实现的是通过HTTP请求与WebSocket的方式。通过HTTP请求的方式，我们可以利用NodeJS搭建一个服务器，然后前端页面JS通过AJAX请求与服务器进行交互。WebSocket则适用于实时性要求高的场景，它可以保持客户端与服务器之间的双向通信。

一、通过HTTP请求调用NodeJS

1.1、搭建NodeJS服务器

首先，我们需要搭建一个NodeJS服务器。这个服务器将会处理来自页面JS的请求，并返回相应的数据。

// server.js
const express = require('express');
const app = express();
const port = 3000;
app.use(express.json());
app.get('/api/data', (req, res) => {
  res.send({ message: 'Hello from NodeJS!' });
});
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

在上述代码中，我们使用Express框架搭建了一个简单的NodeJS服务器，并定义了一个GET接口/api/data，返回一个JSON对象。

1.2、页面JS发起HTTP请求

然后，在我们的前端页面中，通过AJAX请求调用这个接口。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>NodeJS Demo</title>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      fetch('http://localhost:3000/api/data')
        .then(response => response.json())
        .then(data => {
          console.log(data);
          document.getElementById('message').innerText = data.message;
        })
        .catch(error => console.error('Error:', error));
    });
  </script>
</head>
<body>
  <h1 id="message"></h1>
</body>
</html>

这里，我们使用Fetch API向NodeJS服务器发起一个GET请求，并将返回的数据展示在页面上。

二、通过WebSocket调用NodeJS

2.1、搭建NodeJS WebSocket服务器

WebSocket是一种在单个TCP连接上进行全双工通信的协议，适用于需要实时通信的应用场景。

// websocket-server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
  ws.on('message', message => {
    console.log(`Received message => ${message}`);
    ws.send('Hello from NodeJS WebSocket server!');
  });
});

在上述代码中，我们使用ws库搭建了一个WebSocket服务器，监听来自客户端的连接和消息，并返回一个响应。

2.2、页面JS连接WebSocket服务器

在前端页面中，我们可以使用WebSocket API连接到这个服务器并发送消息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Demo</title>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const ws = new WebSocket('ws://localhost:8080');
      ws.onopen = () => {
        console.log('WebSocket connection opened');
        ws.send('Hello from client!');
      };
      ws.onmessage = event => {
        console.log('Message from server:', event.data);
        document.getElementById('message').innerText = event.data;
      };
      ws.onerror = error => {
        console.error('WebSocket error:', error);
      };
      ws.onclose = () => {
        console.log('WebSocket connection closed');
      };
    });
  </script>
</head>
<body>
  <h1 id="message"></h1>
</body>
</html>

这里，我们首先建立与WebSocket服务器的连接，并在连接成功后发送一条消息。服务器接收到消息后，会发送一个响应消息，我们将其展示在页面上。

三、使用Electron调用NodeJS

3.1、搭建Electron应用

Electron是一个用于构建跨平台桌面应用的框架，它可以让你在一个应用中同时使用NodeJS和页面JS。

// main.js
const { app, BrowserWindow } = require('electron');
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

3.2、在页面中调用NodeJS

在Electron应用中，我们可以直接在页面JS中调用NodeJS的API。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Electron Demo</title>
  <script>
    const { ipcRenderer } = require('electron');
    document.addEventListener("DOMContentLoaded", function() {
      const message = 'Hello from NodeJS!';
      console.log(message);
      document.getElementById('message').innerText = message;
    });
  </script>
</head>
<body>
  <h1 id="message"></h1>
</body>
</html>

在这个示例中，我们可以直接在页面JS中使用NodeJS的require函数，并通过Electron的ipcRenderer与主进程进行通信。

四、通过Server-Sent Events (SSE)调用NodeJS

4.1、搭建NodeJS SSE服务器

Server-Sent Events (SSE) 是一种从服务器到客户端的单向通信方式，适用于需要持续从服务器接收数据的场景。

// sse-server.js
const express = require('express');
const app = express();
const port = 3000;
app.get('/events', (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');
  setInterval(() => {
    res.write(`data: ${JSON.stringify({ message: 'Hello from SSE!' })}nn`);
  }, 1000);
});
app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

4.2、页面JS接收SSE

在前端页面中，我们可以使用EventSource API接收SSE。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SSE Demo</title>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      const eventSource = new EventSource('http://localhost:3000/events');
      eventSource.onmessage = function(event) {
        const data = JSON.parse(event.data);
        console.log(data);
        document.getElementById('message').innerText = data.message;
      };
      eventSource.onerror = function(error) {
        console.error('SSE error:', error);
      };
    });
  </script>
</head>
<body>
  <h1 id="message"></h1>
</body>
</html>

在这个示例中，我们使用EventSource连接到SSE服务器，并接收服务器发送的消息。

五、结论

通过HTTP请求、WebSocket、Electron、以及Server-Sent Events (SSE)，我们可以在页面JS中调用NodeJS，实现前后端的交互。选择哪种方式取决于具体的应用场景和需求。如果需要简单的请求-响应模型，可以选择HTTP请求；如果需要实时通信，可以选择WebSocket；如果需要构建桌面应用，可以选择Electron；如果需要持续从服务器接收数据，可以选择Server-Sent Events (SSE)。这些方法各有优劣，开发者可以根据实际需求进行选择。