• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Pobieranie i przekazywanie informacji z jednej strony na drugą

Object Storage Arubacloud
0 głosów
275 wizyt
pytanie zadane 1 kwietnia 2019 w JavaScript przez Steady Obywatel (1,140 p.)
Hej,

potrzebuję pomocy w napisaniu kodu.

Chodzi o pobieranie konkretnych informacji z jednej strony typu youtube/twitch i przekazywanie ich na moją własną stronę w czasie rzeczywistym.

Chodzi o informacje typu:

-tytuł filmu (yt) / tytuł streama (twitch)

-liczba wyświetleń (yt) / liczba osób oglądających online (twitch)

-autor filmu (yt) / streamer (twitch)

 

Z tego co zdążyłem się dowiedzieć to taki kod podobno da radę napisać w JS/Ajax.

Niestety moja wiedza o tym języku jest totalnie podstawowa, więc każda, nawet najmniejsza informacja mi pomoże ułożyć cały kod razem.

 

Pozdrawiam.

1 odpowiedź

+2 głosów
odpowiedź 1 kwietnia 2019 przez Chess Szeryf (76,710 p.)
edycja 1 kwietnia 2019 przez Chess
 
Najlepsza

Strony, które wymieniłeś posiadają najprawdopodobniej API, więc wykorzystaj np. wspomniany AJAX wysyłając request do API odbierając przy tym dane z tego Application Programming Interface.

Przykład w PHP bez korzystania z API:

<body style="background: darkolivegreen;">
<?php

function get_data_from_URL() : string {

	$ch = curl_init();

	curl_setopt($ch, CURLOPT_URL, "http://www.example.com/");
	curl_setopt($ch, CURLOPT_HEADER, 0);
	curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 4); 
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // important
	
	$data = curl_exec($ch);

	curl_close($ch);
	
	return (string)$data;
}

$xxx = (get_data_from_URL());

$dom = new DOMDocument();
$dom->loadHTML($xxx);

echo '<p>Tag h1: ' . ($dom->getElementsByTagName('h1')[0]->nodeValue) . '.</p>';

echo "<p>Link: " . ($dom->getElementsByTagName('a')[0]->getAttribute('href')) . '.</p>';

?>
</body>

Można też chyba zczytać plik zewnętrzny np. bajt po bajcie.

Pamiętaj, że takie coś może przestać działać w każdej chwili, ponieważ kod źródłowy może ulec zmianie. Przy API taka sytuacja nie powinna wystąpić, ale to zależy od ludzi tworzących API (np. nowe wersje API, starsze wersje niewspierane, nowe adresy URL, itp., zmiany, które spowodują zmianę u siebie w kodzie, by dostosować się pod API); chyba że są wyjątki.

Przykładowe API:

https://jsonapi.org/examples/

https://christianheilmann.com/2009/12/18/curl-your-view-source-of-the-web/

https://davidwalsh.name/curl-download

Jak działa mniej więcej API:

{
  "data": [{
    "type": "articles",
    "id": "1",
    "attributes": {
      "title": "JSON:API paints my bikeshed!",
      "body": "The shortest article. Ever.",
      "created": "2015-05-22T14:56:29.000Z",
      "updated": "2015-05-22T14:56:28.000Z"
    },
    "relationships": {
      "author": {
        "data": {"id": "42", "type": "people"}
      }
    }
  }],
  "included": [
    {
      "type": "people",
      "id": "42",
      "attributes": {
        "name": "John",
        "age": 80,
        "gender": "male"
      }
    }
  ]
}
var requestURL = 'http://127.0.0.1:8000/forumpasja_informatyki/api.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();

request.onload = function() {
	var superHeroes = request.response;
	//console.log(superHeroes);
	var part_search = window.location.search.split('=');
	if(part_search[0] == '?data' && part_search[1] == 'title') {
		console.log(superHeroes.data[0].attributes.title);
	} else if(part_search[0] == '?data' && part_search[1] == 'created') {
		console.log(superHeroes.data[0].attributes.created);
	}
}

Gdy za URL wpiszesz ?data=title lub ?data=created ukażą ci się dane, które są w "API" (JSON).

Fragmenty kodu wyciągnęłem z tych niektórych poniższych stron:

https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction

https://jsonapi.org/format/#introduction

komentarz 1 kwietnia 2019 przez Steady Obywatel (1,140 p.)
O kurcze, właśnie o taką pomoc mi chodziło.

Co prawda nie znam się jeszcze na pisaniu czegokolwiek w PHP ani jak to wszystko powinno wyglądać z użyciem API ale biorę się do rozszyfrowywania tego kodu.

 

Wielkie dzięki! :)
komentarz 1 kwietnia 2019 przez Steady Obywatel (1,140 p.)

@Chess,

Nawet nie wiem jak Ci dziękować. 

Wreszcie znalazł się ktoś kto mi to porządnie wytłumaczył. 

Naprawdę wielkie dzięki! 

komentarz 1 kwietnia 2019 przez Steady Obywatel (1,140 p.)

@Chess,

a jeszcze takie pytanie. 

Jak np. chciałbym zrobić wtyczkę i też potrzebuje do niej dane z innej strony w czasie rzeczywistym to API normalnie będzie działać? Czy jest to jakaś różnica między stroną a wtyczką, mimo tego, że oba piszę w html

komentarz 1 kwietnia 2019 przez Chess Szeryf (76,710 p.)
edycja 1 kwietnia 2019 przez Chess
Różnica jakaś jest. Albo będziesz mieć więcej funkcjonalności albo mniej zależy na co ta wtyczka ma pozwalać. Jeśli mówisz o dodatku np. do Chrome, to przeglądarka ta udostępnia dla swojego specyficznego silnika jakim jest Blink swoje instrukcje, które można zawrzeć w kodzie pisząc dodatek. Moim zdaniem nie ma różnicy, czy ściągasz dane z jakiegoś API, czy w ogóle z jakiegoś HTML'a (curl) pisząc rozszerzenie będąc po stronie rozszerzenia, czy też standardowo na stronie WWW. Przecież żeby móc wziąć zawartość z innej strony np. walutę musisz "wystrzelić" request do tejże strony od której chcesz uzyskać dane. A to kosztuje czas. Musiałbyś sprawdzić w narzędziach deweloperskich F12 w Chrome jak długo czeka się na zaciągnięcie danych z zewnętrznego źródła. Jeśli by Cię nie zadowolały instrukcje wbudowane w jakimś języku, to zawsze możesz sobie napisać swoje instrukcje np. w języku C i później dołączyć to jako np. .dll i używać np. w PHP. Takie coś moim zdaniem najczęściej spotykane jest po stronie serwera, jeśli chodzi o web.
komentarz 2 kwietnia 2019 przez Steady Obywatel (1,140 p.)
Właśnie udało mi się napisać cały skrypt za pomocą API i wszystko działa.

Tylko problem się pojawia właśnie we wtyczce.

Jak testuje czy działa skrypt  i odpalam HTML na stronie to wszystko się pokazuje: HTML CSS i JS ale jak już załaduje rozszerzenie to JS tak jakby się nie ładowało i jest tylko HTML i CSS.

Podobne pytania

+1 głos
0 odpowiedzi 90 wizyt
0 głosów
2 odpowiedzi 252 wizyt
0 głosów
1 odpowiedź 196 wizyt

92,576 zapytań

141,426 odpowiedzi

319,652 komentarzy

61,961 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...