Skip to content

快速開始:連接

本章節將通過一個簡單的腳本演示如何啟動指定的候鳥環境,並通過代碼接管控制權。

實戰腳本

請創建一個名為 start.js 的文件,並將以下代碼複製進去:

javascript
const puppeteer = require('puppeteer-core');
const axios = require('axios'); // 確保您已運行: npm install axios

async function startProject() {
  // 1. 設置配置信息
  const API_URL = 'http://127.0.0.1:8186'; // ApiServer 地址
  const SESSION_ID = '373808cb37bd63f5f7d92415e736e85f'; // 您的環境 ID

  try {
    // 2. 調用候鳥接口開啟環境
    console.log('正在啟動候鳥環境...');
    const response = await axios.post(`${API_URL}/api/v1/browser/start`, {
      Session_ID: SESSION_ID
    });

    if (response.data.code === 0) {
      // 3. 獲取 WebSocket 連接地址
      const wsEndpoint = response.data.data.ws;
      console.log('環境啟動成功,正在接管控制權...');

      // 4. 使用 Puppeteer 連接到該環境
      const browser = await puppeteer.connect({
        browserWSEndpoint: wsEndpoint,
        defaultViewport: null // 使用瀏覽器默認的窗口大小
      });

      // 5. 打開新頁面並進行導航
      const page = await browser.newPage();
      await page.goto('https://www.mbbrowser.com', { waitUntil: 'networkidle2' });

      console.log('當前網頁標題:', await page.title());

      // 6. 操作完成後中斷連接 (除非調用 stop 接口,否則環境會保持運行)
      await browser.disconnect();
      console.log('自動化操作完成!');
      
    } else {
      console.error('環境啟動失敗:', response.data.message);
    }
  } catch (error) {
    console.error('連接錯誤:', error.message);
  }
}

startProject();

核心概念剖析

  1. axios.post:首先發送 HTTP 請求給 ApiServer 打開環境。沒有運行的環境,Puppeteer 是無法連接的。
  2. wsEndpoint:這是啟動成功後返回的「唯一密鑰」。Puppeteer 通過這個地址進入瀏覽器內部。
  3. puppeteer.connect:注意是 connect(連接已有瀏覽器),而不是 launch(啟動新瀏覽器)。這是指紋瀏覽器自動化的核心區別。
  4. browser.disconnect:建議在腳本結束時斷開連接。這樣即使腳本結束,瀏覽器窗口通常會留在桌面,方便觀察或後續人工操作。

TIP

掌握了接管環境?下一章 核心 API 參考 將教您如何讓瀏覽器執行更複雜的命令。