Есть массив из программы Puppeteer / Cheerios.Ионный дизайн телефона.Как переместить массив в угловой код? - PullRequest
Новая
       26

Есть массив из программы Puppeteer / Cheerios.Ионный дизайн телефона.Как переместить массив в угловой код?

0 голосов
/ 23 июня 2019

Это мое первое приложение для телефона. Я использую Ionic для кроссплатформенной работы, которая использует Angular, как вы знаете, я уверен. У меня есть отдельная программа, которая очищает веб-страницу, используя puppeteer и cheerio, и создает массив значений из веб-страницы. Это работает.

Я не уверен, как получить массив в моей программе очистки веб-страниц, прочитанной моей ионной / угловой программой.

У меня есть базовая ионная установка, и я просто пытаюсь выполнить основную работу, чтобы увидеть массив с ионной / угловой стороны, но после попытки поместить его в несколько мест, я понял, что действительно не знаю, куда импортировать код в ionic / angular, который возвращает массив или куда поместить код веб-скрипта непосредственно в один из файлов .ts или ???

Это моя программа очистки веб-страниц: 

const puppeteer = require('puppeteer'); // live webscraping

let scrape = async () => {
  const browser = await puppeteer.launch({
    headless: true
  });
  const page = await browser.newPage();

  await page.goto('--page url here --'); // link to page 

  const result = await page.evaluate(() => {
    let data = []; // Create an empty array that will store our data
    let elements = document.querySelectorAll('.list-myinfo-block'); // Select all Products
    let photo_elements = document.getElementsByTagName('img'); //

    var photo_count = 0;

    for (var element of elements) { // Loop through each product getting photos
      let picture_link = photo_elements[photo_count].src;
      let name = element.childNodes[1].innerText;
      let itype = element.childNodes[9].innerText
      data.push({
        picture_link,
        name,
        itype
      }); // Push an object with the data onto our array
      photo_count = photo_count + 1;
    }
    return data;
  });

  browser.close();
  return result; // Return the data
};

scrape().then((value) => {
  console.log(value); // Success!
});

Когда я запускаю программу webscraping, я вижу массив с правильными значениями в нем. Это входит в ионную часть этого. Иногда на ионной телефонной странице ничего не отображается, иногда говорится, что она не может найти "/" ... Я пробовал так много разных мест и просматривал всю сеть, что у меня довольно много ошибок. Я знаю, что я помещаю это в неправильные места - или возможно не везде, где я должен. Спасибо!

1 Ответ

0 голосов
/ 23 июня 2019

Вам нужен сервер , который будет запускать скребок по требованию.

Любой скребок, использующий настоящий браузер (например, Chromium), должен работать в операционной системе, которая его поддерживает.Другого пути нет.

Подумайте об этом,

  • Поддерживает ли ваш мобильный телефон хром и nodeJS?Это не.Для мобильных устройств нет сборки chromium, которая бы поддерживала автоматизацию с помощью nodeJS (пока).
  • Можете ли вы запустить браузер в другом браузере?Вы не можете.

Способ 1: Удаленный wsEndpoint

Существуют некоторые услуги, которые предлагают wsEndpoint, но я не буду упоминать их здесь.Я опишу, как вы можете создать свой собственный wsEndPoint и использовать его.

Запустите браузер и получите wsEndpoint

Следующий код будет запускать экземпляр кукловода при каждом подключении к нему.Вы должны запустить его на сервере. 

const http = require('http');
const httpProxy = require('http-proxy');

const proxy = new httpProxy.createProxyServer();

http
  .createServer()
  .on('upgrade', async(req, socket, head) => {
      const browser = await puppeteer.launch();
      const target = browser.wsEndpoint();

      proxyy.ws(req, socket, head, { target })
  })
  .listen(8080);

Когда вы запускаете это на сервере / терминале, вы можете использовать ip сервера для подключения.В моем случае это ws://127.0.0.1:8080.

Использование puppeteer-web

Теперь вам нужно будет установить puppeteer-web в ваше мобильное / веб-приложение.Чтобы связать Puppeteer с помощью Browserify, следуйте приведенным ниже инструкциям.

Клон репозитория Puppeteer: 

git clone https://github.com/GoogleChrome/puppeteer && cd puppeteer
npm install
npm run bundle

Это создаст ./utils/browser/puppeteer-web.js файл, содержащий комплект Puppeteer.

Вы можете использоватьпозже на вашей веб-странице вы сможете управлять другим экземпляром браузера через конечную точку WS: 

<script src='./puppeteer-web.js'></script>
<script>
  const puppeteer = require('puppeteer');
  const browser = await puppeteer.connect({
    browserWSEndpoint: '<another-browser-ws-endpont>'
  });
  // ... drive automation ...
</script>

Способ 2. Используйте API

. Я буду использовать express для минимальной настройки.Предположим, что ваша функция scrape экспортирована в файл с именем scrape.js, и у вас есть следующий файл index.js. 

const express = require('express')
const scrape= require('./scrape')
const app = express()

app.get('/', function (req, res) {
  scrape().then(data=>res.send({data}))
})

app.listen(8080)

Это запустит экспресс-API на порту 8080.

Теперь, если вы запускаете его с node index.js на сервере, вы можете вызвать его из любого мобильного / веб-приложения.

Полезные ресурсы

Я немного повеселился с кукловодом и веб-пакетом,

СохранитьAPI работает, вам нужно будет немного узнать о бэкенде и о том, как поддерживать работу сервера и т. д. См. эти ссылки для полного понимания создания сервера и многое другое,

...