• 목록
  • 아래로
  • 위로
  • 2
  • Hanam09
  • 조회 수 220

안녕하세요. 좋은밤입니다.

웹 앱을 개발하던중 JS의 localStorage문제가 있어서 이렇게 글을 쓰게되네요.





한 차트를 일괄 다운로드시 다운로드 기록을 LocalStorage에 저장하여야 하는데 가장 마지막 음악만 저장됩니다ㅠㅠ.

또 다운로드도 Chrome과 Opera에서 일부 파일이 누락되는 현상도 발생하고요.

function downloadTrend() {
    if (!window.proxy.isProcessing) {
        var trends = window.proxy.getTrends.getSelectedRowIds();
        if (trends.length > 0) {
            mdc.exports.dialog("The download will begin.", "Download " + trends.length + " song.\nMusic that previously had a download history won't download.", {
                "download": function () {
                    mdc.exports.snackbar("Download started.");
                    window.proxy.isProcessing = true;
                    for (var i = 0; i < trends.length; i++) {
                        if (localStorage.getItem(trends[i]) == undefined) {
                            var xhr = new XMLHttpRequest();
                            var vId = trends[i];
                            xhr.open("GET", iTrendApiUri + "process.php?id=" + vId);
                            xhr.send();
                            xhr.onreadystatechange = function () {
                                if (this.status == 200 && this.readyState == 4) {
                                    var res = JSON.parse(this.response);
                                    if (res.success) {
                                        fetch(iTrendApiUri + "v/" + res.hash + ".mp3").then(response => response.blob()).then(blob => {
                                            const url = window.URL.createObjectURL(blob);
                                            const a = document.createElement("a");
                                            a.style.display = "none";
                                            a.href = url;
                                            a.download = res.audio + ".mp3";
                                            document.body.appendChild(a);
                                            a.click();
                                            window.URL.revokeObjectURL(url);
                                            document.body.removeChild(a);
                                            console.log(localStorage)
                                        }).catch(fail => {
                                            console.log("Missing download list:" + res.audio);
                                            mdc.exports.snackbar("Missing download list:" + res.audio)
                                        });
                                        window.localStorage.setItem(vId, new Date)
                                    } else {
                                        console.log(res);
                                        mdc.exports.snackbar("ERROR: " + res.audio + ": " + res.reason)
                                    }
                                } else if (this.readyState == 4) {
                                    mdc.exports.snackbar("ERROR: Unable to connect: iTrend DL Server")
                                }
                            }
                        }
                    }
                    window.proxy.isProcessing = false
                }
            })
        } else {
            mdc.exports.snackbar("Please select a song to download.")
        }
    } else mdc.exports.snackbar("Error: There is another work in progress")
}


일단 Success라면 저장이 되어야 되는데 무시되네요ㅜㅜ 왜인지 모르겠습니다.

구글에 찾아보니까 같은 현상을 겪는 사람들이 전무한가 봅니다.



그리고 이 서비스에서 차트를 불러오는데 다음과 같은 PHP 소스를 사용하는데요.

$url = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&key={$key}&playlistId=".$playlist[$_GET["region"]];

$api = json_decode(file_get_contents($url),true);
$main = $api["items"];

$response = array();

$allVideoId = array();

for ($e=0; $e < count($main); $e++) { 
$videoElement = $main[$e]["snippet"]["resourceId"]["videoId"];
array_push($allVideoId, $videoElement);
};
/*
Trend Music Get PlayTime
*/
$__trendGetPlayTimeByVid = urlencode(implode(",", $allVideoId));

$url = "https://www.googleapis.com/youtube/v3/videos?part=contentDetails&key={$key}&id=".$__trendGetPlayTimeByVid;

$rawVideoDetails = json_decode(file_get_contents($url),true);
$videoDetails = $rawVideoDetails["items"];
/*
Trend Music Get Artist
*/
$url = "https://www.googleapis.com/youtube/v3/videos?part=snippet&key={$key}&id=".$__trendGetPlayTimeByVid;

$rawVideoSnippet = json_decode(file_get_contents($url),true);
$videoSnippet = $rawVideoSnippet["items"];


/*
Manufacture Contents
*/
for ($i=0; $i < count($main); $i++) {
$v = array();
$video = $main[$i]["snippet"];

$v["title"] = $video["title"];
$v["id"] = $video["resourceId"]["videoId"];
$v["description"] = $video["description"];
$v["playtime"] = $videoDetails[$i]["contentDetails"]["duration"];
$v["artist"] = str_replace(" - Topic", "", $videoSnippet[$i]["snippet"]["channelTitle"]);

array_push($response, $v);
}
$response = json_encode($response);
echo $response;


이게 엄청 작업 처리 속도가 엄청 느립니다. 그래서 자체 캐싱시스템을 사용하긴 하는데 초기 로딩시에는 속이 터질정도로 느립니다.


동기적으로 처리하는것 같아서 그러는것 같은데 PHP만으로 이 작업 속도를 끌어 올리는방법은 없을까요?

이거 하나 때문에 Node.js 로의 언어 변경도 생각중입니다.


JS PHP 고수분들 도와주세요!


작성자
Hanam09 36 Lv. (50%) 106610/109520EXP

 

안녕!

 

댓글 2

Seia
profile image

JavaScript와 서버와의 연계에서 많이 고민을 하고 계시는군요... ㅜㅜ
 
일단 코드에서 가독성이 보이지 않아 보는데에 시간이 조금 오래걸렸습니다.
함수형 프로그래밍에 대해서 조금 참고한다면 함수를 재사용성 높게 사용해서 지금보다 훨씬 깔끔하게 사용할 수 있을 듯합니다.  
 
일단 코드의 속도와 달리 몇가지 문제점을 찝을 수 있는데 fetch API에 대해서는 polyfill을 사용하시는 것을 추천드리며, GItHub에서 개발된 fetch polyfill이 있습니다. 아래 링크를 참고해주시면 됩니다. 그리고 모든 XHR로 Req되는 부분을 fetch api로 바꾸심이 어떤가 합니다.
> https://github.com/github/fetch
* IE에서는 async/await/promise 또한 polyfill 해주셔야 합니다.


 

순차적으로 하나하나씩 다운로드하는 편을 추천드립니다. 순간적으로 부하가 집중되는 것이 아닌지는 잘 모르겠습니다...


PHP는 깊게 파지 않아 많은 조언을 드릴 수는 없지만 구조적으로 개선하여 가독성을 올리신 뒤에 다시시도하시면 보이지 않을까 합니다.


그리고 다운로드 누락은 요청을 검사하여 오류가 발생했을 경우에 다시시도하시는 편이 좋을 듯합니다.

보통 다운로드할 수 없는 음악은 국가 제한 등에 의해 막히기 때문입니다.


그리고 Node.JS로 넘어오셔도 궁극적으로 해결해야 할 문제가 있습니다.



Google의 YouTube는 지속적으로 현재와 같은 허가되지 않은 크롤링을 차단하기 위해서 Ratelimit 정책을 시행 중에 있습니다.

> https://streamdroid.org/youtube-blocks-popular-mp3-stream-ripping-sites/


많은 Discord 뮤직 봇들과 YouTube 다운로드 사이트들은 제가 알기로는 매우 많은 클라우드 서버들을 통해서 IP 주소를 무작위로 사용하는 방법에 놓여 있으니 참고 바랍니다.



위와 같이 나올 수 있습니다. (작성자님의 사이트 로그)


보통 이런 다운로드나 미러 서비스는 수많은 양의 자체 미러 서버나 분산 처리를 위한 준비가 되어 있어야 안정적으로 운영할 수 있다고 생각됩니다.

comment menu
2019.10.31. 19:48

신고

"Seia님의 댓글"

이 댓글을 신고 하시겠습니까?

Hanam09 작성자 → Seia
profile image

안녕하세요. Seia님!

 

소중한 시간을 들여 저의 사이트에 대한 피드백을 주심에 대하여 정말로 감사드립니다.

Seia님의 짚어주신점을 잘 듣고 개선해보도록 하겠습니다.

 

"일단 코드에서 가독성이 보이지 않아 보는데에 시간이 조금 오래걸렸습니다.

함수형 프로그래밍에 대해서 조금 참고한다면 함수를 재사용성 높게 사용해서 지금보다 훨씬 깔끔하게 사용할 수 있을 듯합니다. "

 

함수형 프로그래밍에 대하여 배우고 코드를 개선해보도록 하겠습니다.

 

"Google의 YouTube는 지속적으로 현재와 같은 허가되지 않은 크롤링을 차단하기 위해서 Ratelimit 정책을 시행 중에 있습니다."

 

자체적으로 이 정책을 우회하는 시스템이 구축되어 있어서 별 문제는 되지 않았습니다.

신경써주셔서 감사합니다.

 

그리고 PHP 서버코드는 구조를 개선하고 속도를 높일 수 있는 방법을 찾았습니다.

 

"순차적으로 하나하나씩 다운로드하는 편을 추천드립니다. 순간적으로 부하가 집중되는 것이 아닌지는 잘 모르겠습니다..."

 

순차적으로 하나하나씩 다운로드하는것이 localStorage 문제가 발생하지 않을까요? 서버 부하량은 방지대책이 있어서..

조언을 듣고 시도해보겠습니다.

정말로 답변해주셔서 감사합니다.

좋은하루되세요!

comment menu
2019.11.01. 00:11

신고

"Hanam09님의 댓글"

이 댓글을 신고 하시겠습니까?

권한이 없습니다.
번호 제목 글쓴이 날짜 조회 수
공지 [작업 완료] 설 명절 맞이 서버 업데이트 안내 3 마스터 24.02.11.17:21 376
공지 [중요] 호스팅 만료와 관련하여 일부 수칙이 변경됩니다. 4 마스터 23.01.14.02:23 4060
공지 [필독] 질문하는 방법 17 마스터 18.02.23.03:09 4464
842 머신러닝 용도로 노트북을 구매하려고 하는데 MSI 게이밍 노트북도 괜찮을까요? 12 이니스프리 21.01.31.22:26 375
841 최근에 혹시 phpmyadmin 주소가 바뀌었나요? 2 막시모 21.01.28.17:42 75
840 [수강신청] Java 개론 강좌를 수강해도 괜찮을까요?? 9 image 이니스프리 21.01.23.22:30 155
839 php 1 wikiowner 21.01.22.11:10 69
838 예)www.123.com > 123.com리디렉트 질문 1 image HighSpeed 21.01.21.17:27 74
837 The lua binary is not executable 문구 1 wikiowner 21.01.20.13:17 78
836 가비아에서 www 붙이지 않고 접속하게 하는 방법 질문합니다. 2 HighSpeed 21.01.15.21:58 86
835 가비아 도메인 스터디 포 어스 연결되나요? 1 HighSpeed 21.01.15.17:28 68
834 도메인 개인정보 보호에 대해 질문합니다. 3 HighSpeed 21.01.12.19:24 124
833 아바스트 왜 이럴까요? 11 image 국내산라이츄 21.01.12.04:26 139
832 여러분들고 퍼미션 권한 바뀌나요? 1 HighSpeed 21.01.11.22:28 90
831 PHP 중복체크 관련 질문합니다 3 title: 에그joyful 21.01.09.21:58 127
830 SFU ssh 계정으로 ssh 접속이 안됩니다 8 wikiowner 21.01.06.13:36 169
829 [라이믹스] 스킨 설치가 안됩니다. 2 260578 20.12.31.08:43 109
828 Mac 입문! 10 갱생협스 20.12.27.22:31 188
827 저번에 쓴 글인 루아 오류가 여기 관리자분들중 한분이 해결해주셔야 한다고 하네요 5 image wikiowner 20.12.15.11:45 132
826 루아 오류??? 1 image wikiowner 20.12.14.10:34 100
825 500 에러 4 wikiowner 20.12.12.10:05 134
824 서버 초심자가 쓰기에 어떤 OS가 나을까요? 12 제르엘 20.12.11.23:00 278
823 사이트 들어가려는데 오류 2 image wikiowner 20.12.09.19:09 103