用于 Web 浏览器的 JavaScript 客户端库

使用 InfluxDB JavaScript 客户端库 在浏览器和前端客户端中与 InfluxDB v2 API 交互。此库同时支持前端和服务器端环境，并提供以下分发包

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

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

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

开始之前

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

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

与模块捆绑器一起使用

如果您使用像 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、存储桶、组织 和 令牌 更新 ./env_browser.js

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

   npm run browser
   

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