用于网页浏览器的 InfluxDB v2 JavaScript 客户端库

在浏览器和前端客户端中使用InfluxDB v2 JavaScript client library将数据写入InfluxDB Cloud Serverless桶。

该库支持前端和服务器端环境，并提供以下版本：

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

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

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

开始之前

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

2. 确保 InfluxDB 正在运行且您可以连接到它。

与模块打包工具一起使用

如果你使用像 Webpack 或 Parcel 的模块打包工具，请安装 @influxdata/influxdb-client-browser。

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

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

   <script>
     window.INFLUX_ENV = {
       url: 'https://cloud2.influxdata.com',
       token: 'API_TOKEN'
     }
   </script>
   

   替换以下内容：

   • API_TOKEN: 一个具有写入权限的 InfluxDB 令牌，用于该存储桶。

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 Cloud Serverless 区域 URL、您的 bucket、一个任意字符串作为 org 和您的 API token 更新 ./env_browser.js。

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

   npm run browser
   

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

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