InfluxDB v2 JavaScript 客户端库（用于 Web 浏览器）

在浏览器和前端客户端中使用 InfluxDB v2 JavaScript 客户端库 将数据写入 InfluxDB 3 Core 数据库。

此库同时支持前端和服务器端环境，并提供以下发行版本：

• ECMAScript 模块 (ESM) 和 CommonJS 模块 (CJS)
• 捆绑的 ESM
• 捆绑的 UMD

本指南假定您对 JavaScript、浏览器环境和 InfluxDB 有一定的了解。如果您刚开始接触 InfluxDB，请参阅 InfluxDB 入门指南。

1. 避免将令牌发送到公共客户端（如 Web 浏览器和移动应用程序）。将发送到客户端设备的任何应用程序密钥都视为公共的，而非机密的。

2. 尽可能使用短期、只读令牌，以防止未经授权的写入和删除。

• 开始之前
• 与模块打包器一起使用
• 将捆绑的发行版与浏览器和模块加载器一起使用。
• 使用示例应用程序入门

开始之前

1. 安装 Node.js 来托管您的前端应用程序。

2. 请确保 InfluxDB 正在运行并且您可以连接到它。有关连接到 InfluxDB 3 Core 集群时要使用的 URL 的信息，请联系您的 InfluxData 客户代表。

与模块打包器一起使用

如果您使用 Webpack 或 Parcel 等模块打包器，请安装 @influxdata/influxdb-client-browser。

将捆绑的发行版与浏览器和模块加载器一起使用。

1. 为您的脚本配置 InfluxDB 属性。

   <script>
     window.INFLUX_ENV = {
       url: 'https://:8181',
       token: 'DATABASE_TOKEN'
     }
   </script>

2. 从最新的客户端库浏览器发行版导入模块。@influxdata/influxdb-client-browser 导出捆绑的 ESM 和 UMD 语法。

   ESM UMD

   <script type="module">
     import {InfluxDB, Point} from 'https://unpkg.com/@influxdata/influxdb-client-browser/dist/index.browser.mjs'
   
     const influxDB = new InfluxDB({INFLUX_ENV.url, INFLUX_ENV.token})
   </script>

   <script src="https://unpkg.com/@influxdata/influxdb-client-browser"></script>
   <script>
     const Influx = window['@influxdata/influxdb-client']
   
     const InfluxDB = Influx.InfluxDB
     const influxDB = new InfluxDB({INFLUX_ENV.url, INFLUX_ENV.token})
   </script>

导入客户端库后，您就可以 开始使用示例应用程序编写数据。

使用示例应用程序入门

客户端库包含一个示例浏览器应用程序，该应用程序可将数据写入您的 InfluxDB 实例。

1. 克隆 influxdb-client-js 存储库。

2. 导航到 examples 目录。

   cd examples

3. 使用您的 InfluxDB 3 Core 集群 URL、您的数据库名称（作为 bucket）、任意字符串（作为 org）以及您的数据库令牌更新 ./env_browser.js。

4. 运行以下命令，即可在 https://:3001/examples/index.html 启动应用程序。

   npm run browser

   index.html 在您的浏览器中加载 env_browser.js 配置、客户端库 ESM 模块和应用程序。

有关更多示例，请参阅如何 使用适用于 Node.js 的 JavaScript 客户端库写入数据。