前端 JavaScript 通过 HTTP 请求调用 Web API，展示opcua节点

展示 OPC UA 节点可以分为以下几个步骤：

1. 前端 JavaScript 通过 HTTP 请求调用 Web API。

2. Web API 从 OPC UA 服务器中获取节点数据，并将数据以 JSON 格式返回给前端。

3. 前端 JavaScript 接收到返回的 JSON 数据后，解析数据并将数据渲染到 TreeView 中。

具体实现方式可以参照以下步骤：

1. 在 Web API 中使用 OPC UA 客户端库，如 node-opcua，连接 OPC UA 服务器，并获取节点数据。

2. 将获取到的节点数据转换为 JSON 格式，并使用 HTTP 协议将 JSON 数据返回给前端。

3. 在前端 JavaScript 中，使用 jQuery 或原生的 XMLHttpRequest 对象发送 HTTP 请求，获取 Web API 返回的 JSON 数据。

4. 解析 JSON 数据，并将数据渲染到 TreeView 中显示。

下面是一个简单的代码示例：

Web API 代码：

const opcua = require("node-opcua");
const express = require("express");
const app = express();

const serverEndpointUrl = "opc.tcp://localhost:4840";

const client = new opcua.OPCUAClient();
let session;

// 连接 OPC UA 服务器
client.connect(serverEndpointUrl, function (err) {
  if (err) {
    console.log("Cannot connect to server: ", err);
  } else {
    console.log("Connected to OPC UA server");
    client.createSession(function (err, sess) {
      if (err) {
        console.log("Cannot create session: ", err);
      } else {
        console.log("Session created");
        session = sess;
      }
    });
  }
});

// 获取节点数据
app.get("/opcua/nodes", (req, res) => {
  const rootFolderId = opcua.resolveNodeId("RootFolder");
  session.browse(rootFolderId, function (err, browseResult) {
    if (err) {
      console.log("Cannot browse nodes: ", err);
      res.status(500).send({ error: "Cannot browse nodes" });
    } else {
      const nodes = browseResult.references.map((node) => {
        return {
          id: node.nodeId.toString(),
          name: node.browseName.name.toString(),
        };
      });
      res.send(nodes);
    }
  });
});

app.listen(3000, () => console.log("Web API listening on port 3000"));

前端 JavaScript 代码：

// 发送 HTTP 请求
$.get("http://localhost:3000/opcua/nodes", function (data) {
  // 解析 JSON 数据
  var nodes = JSON.parse(data);
  // 渲染节点数据到 TreeView 中
  var treeView = $("#treeView").kendoTreeView({
    dataSource: nodes,
    dataTextField: "name",
    dataValueField: "id",
  }).data("kendoTreeView");
});

以上示例中，Web API 使用了 node-opcua 库连接 OPC UA 服务器，并通过 Express 框架提供 HTTP 服务。前端 JavaScript 使用了 jQuery 库发送 HTTP 请求，并使用 kendoTreeView 插件将节点数据渲染到 TreeView 中。