Jak wczytać treść pliku tekstowego?

Witam

Zielony jestem z JS i potrzebuję jednorazowo użyć JS. Mam kod w JS który rysuje okrągły pasek postępu.

const MAX = 300
const VAL = 30

const cp = new CircleProgress('.progress', {
	max: MAX,
	value: VAL,
	animationDuration: 400,
	textFormat: (val) => val + '/300',
});

document.querySelector('#value-input').addEventListener('change', e => {
	const val = e.target.value;
	cp.value = val;
	cp.el.style.setProperty('--progress-value', val / MAX);
})

MAX to jest długość maksymalna paska postępu. VAL jest to wartość jaką ma pokazać pasek postępu.

Tak to wygląda: http://arcadegame.pl/2/index.html

Chciałbym aby zamiast wpisanej z ręki wartości VAL podstawiała się wartość z pliku .txt umieszczonego na serwerze gdzie jest skrypt: http://arcadegame.pl/jednostki1.txt

Czytam, kombinuje i mi nie wychodzi. Liczę na waszą podpowiedź :)

Jesli plik jest udostępniony w tej samej domenie w której stoi Twoja strona, to wystarczy że zrobisz tak:

fetch("http://arcadegame.pl/jednostki1.txt")
  .then(response => response.text())
  .then(content => {
    console.log(content); // tutaj Twoja zmienna
  });

Jeśli nie, to trzeba kompinować.

Jest w tej samej domenie i w tym samym katalogu, na czas testów przeniosłem do głównego katalogu.

Czegoś nie rozumiem albo mam zaćmienie chwilowe...

W kodzie jest zmienna

const VAL = 30

Co oznacza, że:

value: VAL,

ma faktycznie wartość:

value: 30,

Jak wykorzystać Twoją pomoc. Wstawiam ten kod podany do skryptu i co dalej? Co powinienem wpisać w miejsce "VAL" , "value=???"
Czy coś źle rozumuje?

dippaolo napisał(a):

Jest w tej samej domenie i w tym samym katalogu, na czas testów przeniosłem do głównego katalogu.

Katalog nie ma znaczenia.

Czegoś nie rozumiem albo mam zaćmienie chwilowe...
Jak wykorzystać Twoją pomoc. Wstawiam ten kod podany do skryptu i co dalej? Co powinienem wpisać w miejsce "VAL" , "value=???"
Czy coś źle rozumuje?

Problem jest taki, że nie piszesz jednej aplikacji tylko dwie, tak na prawdę. Jedną, która serwuje Twój zasób (ten plik jednostki1.txt), oraz drugą, aplikację klienta która widzisz w przeglądarce.

To nie jest taki sam problem jak np otworzenie sobie pliku w pythonie lub PHP, i użycie go. To co Ty próbujesz zrobić, to użyć w aplikacji klienta treści z aplikacji servera.

Możesz to zrobić na kilka sposobów:

• Wrenderować treść tego pliku w kod źródłowy aplikacji
• Wrenderować go w treść HTML'a, i potem odczytanie go
• Wysłanie treści przez websockety
• Wysłanie treści przez osobne żądanie HTTP
• Wysłanie treści przez nagłówki początkowego żądania
• Wysłanie go przez ciastka/cookie
• Server-side rendering aplikacji

Myślę że najbardziej popularnym, ale oczywiście nie jedynym sposobem jest właśnie żądanie HTTP, ale ciężko powiedzieć czy to jest dla Ciebie dobre rozwiązanie, bo nie wiadomo co tak na prawdę chcesz osiągnąć, jak ważną rzeczą jest dla Ciebie performance. Jeśli jednak zdecydujesz się na żądanie HTTP właśnie, to musisz wiedzieć że w JS dla webówki żądania HTTP są asynchroniczne, to znaczy nie muszą się wykonaćl linijka po linijce, i należy to obsłużyć w jakiś sposób, najbardziej popularnym są Promise (to jest co ma metody .then() oraz .catch()).

fetch("http://arcadegame.pl/jednostki1.txt")
  .then(response => response.text())
  .then(content => {
    const MAX = 300;
    const VAL = parseInt(content);
    
    const cp = new CircleProgress('.progress', {
    	max: MAX,
    	value: VAL,
    	animationDuration: 400,
    	textFormat: (val) => val + '/300',
    });
    
    document.querySelector('#value-input').addEventListener('change', e => {
    	const val = e.target.value;
    	cp.value = val;
    	cp.el.style.setProperty('--progress-value', val / MAX);
    });
  });

Ma to oczywiście taką konsekwencję, że Twój kod nie uruchomi się dopóki żądanie się nie skończy i nie powiedzie. Jeśli np nie będziesz miał internetu, to żądanie sie nie powiedzie, nie odczytasz wartości z pliku jednostki1.txt, oraz dalsza część aplikacji sie nie uruchomi.

Jeśli możesz wykorzystać inny format pliku to lepszy byłby JSON

{
  "max": 300,
  "val": 30
}

bo jest to prawidłowy obiekt javascript i nie trzeba go dodatkowo parsować, tak jak tekstu

fetch("http://arcadegame.pl/jednostki1.json")
  .then(response => response.json())
  .then(({ max, val }) => {
     console.log(max); // 300
     console.log(val); // 30
  })

Xarviel napisał(a):

Jeśli możesz wykorzystać inny format pliku to lepszy byłby JSON

{
  "max": 300,
  "val": 30
}

bo jest to prawidłowy obiekt javascript i nie trzeba go dodatkowo parsować, tak jak tekstu

Trzeba, albo przez Response.json() albo JSON.parse().

Riddle napisał(a):

Trzeba, albo przez Response.json() albo JSON.parse().

No tak, może źle to napisałem, ale chodziło mi bardziej, że oprócz samego response.json, lub JSON.parse musimy używać dodatkowych metod takich jak parseInt, żeby otrzymać wartość z pliku.

Riddle napisał(a):

fetch("http://arcadegame.pl/jednostki1.txt")
  .then(response => response.text())
  .then(content => {
    const VAL = parseInt(content);

    // ...
  });

Teraz mamy tylko jedną wartość (string), którą zamieniasz na liczbę (number), ale gdyby było więcej wartości, które byłyby rozdzielone jakimś znakiem specjalnym np przecinkiem to trzeba byłoby dodatkowo kombinować.

const values = content.split(',');

const max = parseInt(values[0]);
const value = parseInt(values[1]);
// ... dalsze wartości

Riddle napisał(a):

dippaolo napisał(a):

Jest w tej samej domenie i w tym samym katalogu, na czas testów przeniosłem do głównego katalogu.

Katalog nie ma znaczenia.

Czegoś nie rozumiem albo mam zaćmienie chwilowe...
Jak wykorzystać Twoją pomoc. Wstawiam ten kod podany do skryptu i co dalej? Co powinienem wpisać w miejsce "VAL" , "value=???"
Czy coś źle rozumuje?

Problem jest taki, że nie piszesz jednej aplikacji tylko dwie, tak na prawdę. Jedną, która serwuje Twój zasób (ten plik jednostki1.txt), oraz drugą, aplikację klienta która widzisz w przeglądarce.

To nie jest taki sam problem jak np otworzenie sobie pliku w pythonie lub PHP, i użycie go. To co Ty próbujesz zrobić, to użyć w aplikacji klienta treści z aplikacji servera.

Możesz to zrobić na kilka sposobów:

• Wrenderować treść tego pliku w kod źródłowy aplikacji
• Wrenderować go w treść HTML'a, i potem odczytanie go
• Wysłanie treści przez websockety
• Wysłanie treści przez osobne żądanie HTTP
• Wysłanie treści przez nagłówki początkowego żądania
• Wysłanie go przez ciastka/cookie
• Server-side rendering aplikacji

Myślę że najbardziej popularnym, ale oczywiście nie jedynym sposobem jest właśnie żądanie HTTP, ale ciężko powiedzieć czy to jest dla Ciebie dobre rozwiązanie, bo nie wiadomo co tak na prawdę chcesz osiągnąć, jak ważną rzeczą jest dla Ciebie performance. Jeśli jednak zdecydujesz się na żądanie HTTP właśnie, to musisz wiedzieć że w JS dla webówki żądania HTTP są asynchroniczne, to znaczy nie muszą się wykonaćl linijka po linijce, i należy to obsłużyć w jakiś sposób, najbardziej popularnym są Promise (to jest co ma metody .then() oraz .catch()).

fetch("http://arcadegame.pl/jednostki1.txt")
  .then(response => response.text())
  .then(content => {
    const MAX = 300;
    const VAL = parseInt(content);
    
    const cp = new CircleProgress('.progress', {
    	max: MAX,
    	value: VAL,
    	animationDuration: 400,
    	textFormat: (val) => val + '/300',
    });
    
    document.querySelector('#value-input').addEventListener('change', e => {
    	const val = e.target.value;
    	cp.value = val;
    	cp.el.style.setProperty('--progress-value', val / MAX);
    });
  });

Ma to oczywiście taką konsekwencję, że Twój kod nie uruchomi się dopóki żądanie się nie skończy i nie powiedzie. Jeśli np nie będziesz miał internetu, to żądanie sie nie powiedzie, nie odczytasz wartości z pliku jednostki1.txt, oraz dalsza część aplikacji sie nie uruchomi.

I ruszyło! @Riddle dzięki! Tyle mi wystarczy. Efekt finalny jest w appce w telefonie i wygląda tak:

Dane odświeżają się co 5min.
Kolejne kroki to upiększenie paska postępu coś na wzór prędkościomierza. pokazanie różnicy do tych 300. Może jakiś efekt "WOW" gdy przekroczy 300, itp i itd.
Jeszcze raz dzięki @Riddle !