💖 🤨 👴🏼 RxJS का उपयोग करके सर्वर पर फ़ाइलों का इंटरएक्टिव अपलोड 🎎 🆘 ➗

RxJS की मूल बातों पर अपना आखिरी लेख लिखने के बाद मुझे एक लंबा समय हो गया है। टिप्पणियों में, मुझे और अधिक जटिल उदाहरण दिखाने के लिए कहा गया जो अभ्यास में उपयोगी हो सकता है। इसलिए मैंने थ्योरी को थोड़ा पतला करने का फैसला किया और आज हम फाइल अपलोड करने की बात करेंगे।

हम क्या करें?

हम एक छोटा सा पेज लिखेंगे जहां उपयोगकर्ता सर्वर पर अपलोड करने के लिए एक फ़ाइल का चयन कर सकता है
एक प्रगति पट्टी जोड़ें ताकि फ़ाइल अपलोड प्रगति प्रदर्शित हो।
रद्द बटन पर क्लिक करके डाउनलोड को रद्द करने की क्षमता जोड़ें

इस लेख को समझने के लिए, आपको बुनियादी RxJS ज्ञान की आवश्यकता होगी। ऑब्जर्वेबल क्या हैं , ऑपरेटर , साथ ही साथ एचओओ ऑपरेटर भी

हम बिल्ली को पूंछ से नहीं खींचेंगे और तुरंत व्यापार के लिए नीचे उतरेंगे!

प्रशिक्षण

सबसे पहले, हमें एक सर्वर की आवश्यकता है जो फ़ाइल डाउनलोड अनुरोधों को स्वीकार कर सके। कोई भी सर्वर इसके लिए उपयुक्त हो सकता है, मैं आर्टिकल के लिए एक्सप्रेस और मल्टर के साथ नोड.जेएस का उपयोग करूंगा :

const express = require("express");
const multer  = require("multer");

const app = express();
const upload = multer({ dest:"files" });

app.post("/upload", upload.single("file"), function (req, res) {
    const { file } = req;

    if (file) {
        res.send("File uploaded successfully");
    } else {
        res.error("Error");
    }

});

app.listen(3000);

अब एक html पेज बनाएं जिस पर हम सभी आवश्यक तत्व रखेंगे:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>File uploading</title>
</head>
<body>
    <label for="file">load file: <input id="file" type="file"></label>
    <button id="upload">Upload</button>
    <button id="cancel">Cancel</button>
    <div id="progress-bar" style="width: 0; height: 2rem; background-color: aquamarine;"></div>
    <script src="index.js" type="text/javascript"></script>
</body>
</html>

अब पृष्ठ पर हमारे पास 4 तत्व हैं जिनके साथ उपयोगकर्ता बातचीत करेगा:

टाइप फ़ाइल का इनपुट ताकि उपयोगकर्ता अपलोड करने के लिए फ़ाइल का चयन कर सके
अपलोड बटन, जब क्लिक किया जाता है, हम अपलोड करना शुरू कर देंगे
रद्द करें बटन जो डाउनलोड को रद्द कर देगा
0. की शुरुआती चौड़ाई के साथ प्रगति पट्टी। अपलोड प्रक्रिया के दौरान, हम इसकी चौड़ाई को बदल देंगे

बॉडी टैग के अंत में, मैंने index.js स्क्रिप्ट के लिए एक लिंक जोड़ा, जिसे हमें भी बनाना होगा:

//   ,     
const input = document.querySelector('#file');
const uploadBtn = document.querySelector('#upload');
const progressBar = document.querySelector('#progress-bar');
const cancelBtn = document.querySelector('#cancel');

यह कुछ इस तरह दिखना चाहिए:

सब कुछ एक प्रवाह है

यह बताने के लिए कि कौन सी फाइल को चुनना है, उपयोगकर्ता को "फाइल चुनें" बटन पर क्लिक करना होगा। उसके बाद, आपके ऑपरेटिंग सिस्टम का संवाद बॉक्स खुल जाएगा, जहां फ़ोल्डर ट्री प्रदर्शित किया जाएगा। एक फ़ाइल का चयन करने के बाद, ब्राउज़र इसके बारे में सभी आवश्यक जानकारी डाउनलोड करेगा।

हम कैसे समझते हैं कि एक उपयोगकर्ता ने एक फ़ाइल का चयन किया है? इसके लिए एक "परिवर्तन" घटना है। घटना के ट्रिगर होने के बाद, हम इनपुट में फ़ाइलों की सरणी में बदल सकते हैं, जहाँ फ़ाइल डेटा लिखा जाएगा।

हम परिवर्तन की घटना को कैसे सुनते हैं? आप addEventListener विधि का उपयोग कर सकते हैं और इसके साथ काम कर सकते हैं। लेकिन हम RxJS के साथ काम करते हैं, जहां किसी भी घटना को एक धारा के रूप में दर्शाया जा सकता है:

fromEvent(input, 'change').pipe(
    //    
    map(() => input.files[0])
).subscribe({
    next: data => console.log(file)
});

अपलोड फ़ंक्शन जोड़ें, जो फ़ाइल को सर्वर पर अपलोड करेगा। अभी के लिए, उसके शरीर को खाली छोड़ दें:

function upload(file) {
  console.log(file);
}

अपलोड बटन पर क्लिक करने के बाद अपलोड फ़ंक्शन को बुलाया जाना चाहिए:

fromEvent(uploadBtn, 'click').subscribe({
  next: () => upload(input.files[0])
});

धाराओं को मिलाएं

अब हमारा कोड addEventListener का उपयोग करके हम जो लिखेंगे उससे अलग नहीं है। हां, यह काम करता है, लेकिन अगर हम इसे ऐसे ही छोड़ देते हैं, तो हम उन लाभों को खो देंगे जो आरएक्सजेएस हमें प्रदान करता है।

हम क्या कर सकते हैं? हम फ़ाइल अपलोड करने के चरणों के अनुक्रम का वर्णन करेंगे:

फ़ाइल चयन
अपलोड पर क्लिक करें
Input.files से फ़ाइल निकालें
फाइल अपलोड

अब हम इस अनुक्रम को कोड में स्थानांतरित करते हैं। लेकिन इनपुट और अपलोड को कैसे जोड़ा जाए? स्विचपाइप ऑपरेटर हमें इसमें मदद करेगा, जो हमें एक धागे को दूसरे पर प्रोजेक्ट करने की अनुमति देता है:

fromEvent(input, 'change').pipe(
    switchMap(() => fromEvent(uploadBtn, 'click')),
    map(() => input.files[0])
).subscribe({
    next: file => upload(file)
});

यह कोड उन निर्देशों के अनुक्रम के समान है जो हमने ऊपर वर्णित किए हैं। उपयोगकर्ता एक फ़ाइल का चयन करता है, स्विचपाइप ट्रिगर होता है, और हम अपलोडबटन की सदस्यता लेते हैं। लेकिन तब कुछ नहीं होगा।

स्विचपाइंट केवल बाहरी मूल्यों (अपलोडबटन, 'क्लिक') से उत्पन्न मूल्यों को बाहरी स्ट्रीम में पारित करने की अनुमति देता है । फ़ाइलों को अपलोड करना शुरू करने के लिए, आपको दूसरे निर्देश को निष्पादित करने की आवश्यकता है, अर्थात् अपलोडबटन पर क्लिक करें। फिर यह मैप विधि को काम करेगा, जो फ़ाइल को सरणी से निकालेगा, और अपलोड विधि को पहले से ही सदस्यता में बुलाया जाएगा।

यहां सबसे दिलचस्प बात यह है कि निर्देशों का क्रम टूटा नहीं है। काम करने के लिए अपलोड फ़ंक्शन के लिए, 'परिवर्तन' घटना से पहले आग लगनी चाहिए।

लेकिन फिर भी, एक समस्या बनी रही। उपयोगकर्ता एक फ़ाइल का चयन कर सकता है और फिर उसका चयन रद्द कर सकता है। और फिर जब हम फ़ाइल को अपलोड करने का प्रयास करते हैं, तो हम अपलोड फ़ंक्शन में पास होते हैं - अपरिभाषित। इस स्थिति से बचने के लिए, हमें एक चेक जोड़ना चाहिए:

fromEvent(input, 'change').pipe(
    switchMap(() => fromEvent(uploadBtn, 'click')),
    map(() => input.files[0]),
    filter(file => !!file)
).subscribe({
    next: file => upload(file)
});

Xhr के साथ काम करना

यह सबसे कठिन - अनलोडिंग प्रक्रिया को लागू करने का समय है। मैं इसे xhr के साथ काम करने के एक उदाहरण पर दिखाऊंगा, चूंकि लेखन के समय, यह पता नहीं है कि अपलोड प्रगति को कैसे ट्रैक किया जाए ।

आप किसी अन्य लाइब्रेरी का उपयोग करके उतराई को लागू कर सकते हैं, उदाहरण के लिए axios या jQuery.ajax।

चूँकि मैं सर्वर साइड पर multer का उपयोग करता हूं, मुझे फ़ाइल को फॉर्म के अंदर स्थानांतरित करना होगा (multer केवल इस प्रारूप में डेटा स्वीकार करता है)। इसके लिए, मैंने createFormData फ़ंक्शन लिखा है:

function createFormData(file) {
    const form = new FormData();
    //       file
    form.append('file', file);
    return form;
}

fromEvent(input, 'change').pipe(
    switchMap(() => fromEvent(uploadBtn, 'click')),
    map(() => input.files[0]),
    filter(file => !!file),
    map(file => createFormData(file))
).subscribe({
    next: data => upload(data)
});

हम XMLHttpRequest के माध्यम से फ़ॉर्म को अनलोड करेंगे। हमें इस ऑब्जेक्ट का एक उदाहरण बनाने और उस पर अनलोड और ऑनरोर विधियों को परिभाषित करने की आवश्यकता है। अपलोड पूरा होने पर पहला फायर करेगा, दूसरा जब त्रुटि होगी।

function upload(data) {
    const xhr = new XMLHttpRequest();

    //        
    xhr.onload = () => console.log('success');

    //    
    xhr.onerror = e => console.error(e);

    //  
    xhr.open('POST', '/upload', true);

    //  
    xhr.send(data);
}

अब हमारे पास एक काम करने का उदाहरण है। लेकिन इसमें कुछ नुकसान भी हैं:

डाउनलोड को रद्द करने का कोई तरीका नहीं है
अगर आप अपलोडबटन बटन पर n बार क्लिक करते हैं, तो हमारे पास एक फाइल अपलोड करने के लिए n समानांतर कनेक्शन होंगे

ऐसा इसलिए है क्योंकि अपलोड फ़ंक्शन स्ट्रीम से बाहर काम करता है। वह अपनी मर्जी से रहती है। हमें इसे ठीक करने की जरूरत है। चलिए समारोह को हम तक वापस पहुंचाते हैं। तब हम फ़ाइलों के अपलोड को नियंत्रित कर सकते हैं:

function upload(data) {
    return new Observable(observer => {
        const xhr = new XMLHttpRequest();

        //    ,      
        //   
        xhr.onload = () => {
            observer.next();
            observer.complete();
        };
        
        xhr.onerror = e => observer.error(e);
        
        xhr.open('POST', '/upload', true);
        xhr.send(data);

        //   -  
        return () => xhr.abort();
    });
}

ध्यान दें कि अवलोकन समारोह के अंदर वापस आ गया है। इस विधि को सदस्यता रद्द करने और अपलोड को रद्द करने के समय कहा जाएगा।

अपलोड कॉल को switchMap में रखें:

fromEvent(input, 'change').pipe(
    switchMap(() => fromEvent(uploadBtn, 'click')),
    map(() => input.files[0]),
    filter(file => !!file),
    map(file => createFormData(file)),
    switchMap(data => upload(data))
).subscribe({
    next: () => console.log('File uploaded')
});

अब, यदि उपयोगकर्ता अपलोड बटन पर फिर से क्लिक करता है, तो पिछला अनुरोध रद्द कर दिया जाएगा, लेकिन एक नया बनाया जाएगा।

एक क्लिक अनुरोध रद्द करें

अभी भी हमारे पास कैल्सेलबटन बटन है। हमें अनुरोध रद्द करना चाहिए। टेकऑनटिल ऑपरेटर यहां मदद करेगा।

takeUntil का अनुवाद "बाय बाय" होता है। यह ऑपरेटर बाहरी धारा से मान लेता है और उन्हें आगे श्रृंखला में नीचे देता है। जब तक आंतरिक धागा मौजूद है और कुछ नहीं उत्पन्न करता है। जैसे ही आंतरिक थ्रेड एक मान उत्पन्न करता है, टेक यूटिल अनसब्सक्राइब विधि को कॉल करेगा और बाहरी थ्रेड से अनसब्सक्राइब करेगा।

ऑपरेटर जोड़ने से पहले, हमें यह निर्धारित करने की आवश्यकता है कि हम किस स्ट्रीम से सदस्यता समाप्त करना चाहते हैं। हम अपलोड में रुचि रखते हैं, क्योंकि यह केवल फ़ाइल के अपलोड को पूरा करने के लिए आवश्यक है, अर्थात्। आंतरिक धागे से सदस्यता समाप्त करें:

fromEvent(input, 'change').pipe(
    switchMap(() => fromEvent(uploadBtn, 'click')),
    map(() => input.files[0]),
    filter(file => !!file),
    map(file => createFormData(file)),
    switchMap(data => upload(data).pipe(
        //    upload
        takeUntil(fromEvent(cancelBtn, 'click'))
    ))
).subscribe({
    next: () => console.log('File uploaded')
});

प्रगति पट्टी

यह प्रगति पट्टी को जोड़ने के लिए बनी हुई है। प्रगति को ट्रैक करने के लिए, हमें xhr.upload.onprogress पद्धति को परिभाषित करना होगा। प्रोग्रेसिव इवेंट होने पर इस विधि को कहा जाता है। ईवेंट ऑब्जेक्ट में कई गुण होते हैं जो हमारे लिए उपयोगी होते हैं:

lengthComputable - यदि सही है, तो हम पूर्ण फ़ाइल आकार जानते हैं (हमारे मामले में, हमेशा सच)
कुल - बाइट्स की कुल संख्या
भरी हुई - भेजी गई बाइट की संख्या

अपलोड फ़ंक्शन में परिवर्तन करें:

function upload(data) {
    return new Observable(observer => {
        const xhr = new XMLHttpRequest();

        xhr.upload.onprogress = e => {
            //  
            const progress = e.loaded / e.total * 100;
            observer.next(progress);
        };

        xhr.onerror = e => observer.error(e);
        xhr.onload = () => observer.complete();

        xhr.open('POST', '/upload', true);
        xhr.send(data);

        return () => xhr.abort();
    });
}

अब अपलोड स्ट्रीम में अपलोड स्थिति को स्पिट करता है। यह केवल एक फ़ंक्शन लिखने के लिए रहता है जो प्रगति के शैली गुणों को बदल देगा।

function setProgressBarWidth(width) {
    progressBar.style.width = `${width}%`;
}

fromEvent(input, 'change').pipe(
   /* ..
   
   */
).subscribe({
    next: width => setProgressBarWidth(width)
});

एक त्वरित टिप: ताकि आपकी फ़ाइलें स्थानीय रूप से इतनी तेज़ी से अपलोड न हों, Chrome devtools में "प्रदर्शन" टैब में "फास्ट 3G" या "धीमी 3G" सेटिंग चालू करें।

दिमाग में लाओ

हमें पूरी तरह से काम करने का आवेदन मिला। यह स्ट्रोक के एक जोड़े को जोड़ने के लिए बनी हुई है। अब, जब आप अपलोड बटन पर क्लिक करते हैं, तो हम पिछले अपलोड को रद्द कर देते हैं और एक नई शुरुआत करते हैं। लेकिन हमारे पास पहले से ही एक रद्द बटन है।

मैं चाहता हूं कि अपलोडबटन बटन बाद के क्लिकों का जवाब न दे जब तक हम फ़ाइल अपलोड नहीं करते (या जब तक हम अपलोड रद्द नहीं करते)। क्या किया जा सकता है?

अपलोड प्रक्रिया पूरी होने तक आप डिसेबल विशेषता को लटका सकते हैं। लेकिन एक और विकल्प है - एग्जॉस्ट मैप ऑपरेटर। यह कथन बाहरी धागे से नए मूल्यों की अनदेखी करेगा जब तक कि आंतरिक धागा पूरा नहीं हो जाता। एग्जॉस्ट स्विचबाउट को थकावट के साथ बदलें:

exhaustMap(data => upload(data).pipe(
  takeUntil(fromEvent(cancelBtn, 'click'))
))

और अब हम अपने आवेदन पर विचार कर सकते हैं। थोड़ा रीफैक्टरिंग और अंतिम संस्करण प्राप्त करें:

import { fromEvent, Observable } from "rxjs";
import { map, switchMap, filter, takeUntil, exhaustMap } from "rxjs/operators";

const input = document.querySelector('#file');
const uploadBtn = document.querySelector('#upload');
const progressBar = document.querySelector('#progress-bar');
const cancelBtn = document.querySelector('#cancel');

const fromUploadBtn = fromEvent(uploadBtn, 'click');
const fromCancelBtn = fromEvent(cancelBtn, 'click');

fromEvent(input, 'change').pipe(
    switchMap(() => fromUploadBtn),
    map(() => input.files[0]),
    filter(file => !!file),
    map(file => createFormData(file)),
    exhaustMap(data => upload(data).pipe(
        takeUntil(fromCancelBtn)
    ))
).subscribe({
    next: width => setProgressBarWidth(width)
});

function setProgressBarWidth(width) {
    progressBar.style.width = `${width}%`;
}

function createFormData(file) {
    const form = new FormData();
    form.append('file', file);
    return form;
}

function upload(data) {
    return new Observable(observer => {
        const xhr = new XMLHttpRequest();

        xhr.upload.onprogress = e => {
            const progress = e.loaded / e.total * 100;
            observer.next(progress);
        };

        xhr.onerror = e => observer.error(e);
        xhr.onload = () => observer.complete();

        xhr.open('POST', '/upload', true);
        xhr.send(data);

        return () => xhr.abort();
    });
}

मैंने अपना संस्करण यहां पोस्ट किया है ।

कोणीय और HttpClient

यदि आप कोणीय के साथ काम करते हैं, तो आपको सीधे xhr का उपयोग करने की आवश्यकता नहीं है। कोणीय की एक HttpClient सेवा है। यह सेवा लोडिंग / अनलोडिंग की प्रगति को ट्रैक कर सकती है, इसके लिए निम्न मापदंडों को पोस्ट विधि में पास करना पर्याप्त है:

reportProgress: true - अपलोड / डाउनलोड जानकारी प्राप्त करें
अवलोकन करें: "घटनाएँ" - इंगित करें कि हम स्ट्रीम से HttpEvents प्राप्त करना चाहते हैं

यहां देखें कि कोणीय में अपलोड विधि क्या होगी:

export class UploaderService {
  constructor(private http: HttpClient) { }

  public upload(data: FormData): Observable<number> {
    return this.http.post('/upload', data, { reportProgress: true, observe: 'events' })
      .pipe(
        filter(event => event.type === HttpEventType.UploadProgress),
        map(event => event as HttpProgressEvent),
        map(event => event.loaded / event.total * 100)
      );
  }
}

फ़िल्टर स्टेटमेंट केवल अपलोड की गई घटनाओं को फ़िल्टर करता है। अन्य घटनाएँ हमें रुचती नहीं हैं। इसके अलावा हम लोड और कुल संपत्तियों तक पहुंचने के लिए इवेंट को HttpProgressEvent में लाते हैं। हम प्रतिशत पर विचार करते हैं।

HttpClient xhr पर सिर्फ एक आवरण है जो हमें एक बॉयलरप्लेट से बचाता है और HTTP के साथ काम करना आसान बनाता है।

कोणीय पर एक उदाहरण आवेदन यहाँ पाया जा सकता है ।

निष्कर्ष

RxJS डेवलपर के हाथों में एक बहुत शक्तिशाली उपकरण है। उनके शस्त्रागार में सभी अवसरों के लिए ऑपरेटरों का एक बड़ा समूह है। दुर्भाग्य से, इस वजह से, इस तकनीक में प्रवेश करने की दहलीज काफी अधिक है। और अक्सर, लोग अनजाने में अपनी "बाइक" लिखना शुरू कर देते हैं, जिससे कोड को बनाए रखना मुश्किल हो जाता है।

इसलिए, मैं चाहूंगा कि सभी पाठक अभी भी खड़े न हों और प्रयोग करने से न डरें। RxJS सीखें। अचानक, आपके पास एक ऑपरेटर आता है जो कोड की 10 लाइनों को एक में बदल सकता है। या यह कोड को थोड़ा स्पष्ट करने में मदद करता है।

सौभाग्य

RxJS का उपयोग करके सर्वर पर फ़ाइलों का इंटरएक्टिव अपलोड