适用于 Web 浏览器和前端客户端的 InfluxDB v2 JavaScript 客户端库

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

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

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

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

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

开始之前

1. 安装 Node.js 以提供您的前端应用程序。

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

与模块打包器一起使用

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

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

1. 配置脚本中的 InfluxDB 属性。

   <script>
     window.INFLUX_ENV = {
       url: 'https://cluster-host.com',
       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 集群 URL、数据库名称作为 bucket、任意字符串作为 org 和数据库令牌更新 ./env_browser.js。

4. 运行以下命令以在 http://localhost:3001/examples/index.html 启动应用程序

   npm run browser
   

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

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