用于网络浏览器的JavaScript客户端库

使用InfluxDB JavaScript客户端库与浏览器和前端客户端中的InfluxDB v2 API进行交互。该库支持前端和服务器端环境，并提供以下版本：

• ECMAScript模块（ESM）和CommonJS模块（CJS）
• 捆绑的 ESM
• 捆绑的UMD

本指南假定您对JavaScript、浏览器环境和InfluxDB有一定的熟悉程度。
如果您刚刚开始使用InfluxDB，请参阅 Get started with InfluxDB。

• 开始之前
• 与模块捆绑工具一起使用
• 与浏览器和模块加载器一起使用捆绑的发行版
• 开始使用示例应用

开始之前

1. 安装 Node.js 来提供你的前端应用。

2. 确保 InfluxDB 正在运行并且您可以连接到它。有关使用哪个 URL 连接到 InfluxDB OSS 或 InfluxDB Cloud 的信息，请参见 InfluxDB URLs。

与模块打包工具一起使用

如果你使用像 Webpack 或 Parcel 这样的模块打包器，请安装 @influxdata/influxdb-client-browser。有关更多信息和示例，请参见 Node.js。

在浏览器和模块加载器中使用捆绑分发版

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

   <script>
     window.INFLUX_ENV = {
       url: 'http://localhost:8086',
       token: 'YOUR_AUTH_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。

开始使用示例应用程序

这个库包含一个示例浏览器应用程序，可以查询并写入您的 InfluxDB 实例。

1. 克隆 influxdb-client-js 仓库。

2. 导航到 examples 目录：

   cd examples
   

3. 用您的 InfluxDB url、bucket、organization 和 token 更新 ./env_browser.js

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

   npm run browser
   

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