कोणीय 2 में एकाधिक घटकों के बीच वेबसॉकेट डेटा साझा करने का सबसे अच्छा तरीका है?

Question

मैं एक आवेदन बनाना शुरू करता हूं। बहुत सारे घटक हैं। उनमें से प्रत्येक को 1 वेबसाकेट से डेटा का एक हिस्सा चाहिए। WebSocket द्वारा एक receiveing ​​वस्तु का उदाहरण:

प्रत्येक कोणीय 2 घटक वस्तु receiveing ​​से 1 क्षेत्र की जरूरत है। क्या 1 सेवा बनाना संभव है, जो वेबसॉकेट से कनेक्ट होगा, डेटा प्राप्त करेगा और इसे सभी घटकों के बीच साझा करेगा? मुझे लगता है कि यह एक अच्छा समाधान होगा।

अब मैं अगले दृष्टिकोण का उपयोग कर रहा हूँ:

getConfigCallback() { 
 
    this.connectionSockets.telemetry = io(this.config.connections.telemetry); 
 
    this.connectionSockets.controlFlow = new WebSocket(this.config.connections.controlFlow.server + ':' + this.config.connections.controlFlow.port); 
 

 
    this.connectionSockets.telemetry.on('telemetry', function(data) { 
 
     console.log(data); 
 
    }); 
 

 
    this.connectionSockets.controlFlow.onopen = function(data) { 
 
     console.log('onOpen', data); 
 
    }; 
 

 
    this.connectionSockets.controlFlow.onmessage = function(data) { 
 
     console.log('onMessage', data); 
 
    }; 
 
}

मैं एक मुख्य घटक में डेटा प्राप्त और घटक के उदाहरणों का प्रयोग करते घटकों के बीच साझा करना चाहते हैं। लेकिन मुझे लगता है कि यह एक बुरा विचार है और एक बेहतर समाधान मौजूद है।

Answer 1

सुनिश्चित करें कि आप जब आवेदन bootstrapping उसके प्रदाता सेट करके अपनी सेवा साझा कर सकते हैं:

bootstrap(AppComponent, [ WebSocketService ]); 

इस तरह आप पूरे आवेदन में अपनी सेवा का एक ही उदाहरण साझा करेंगे। मेरा मतलब है कि जब आप WebSocketService सेवा इंजेक्ट करते हैं, तो संबंधित उदाहरण वही होगा जो घटक/सेवा हो।

प्राप्त डेटा साझा करने में सक्षम होने के लिए, मैं एक गर्म अवलोकन का लाभ उठाऊंगा। डिफ़ॉल्ट रूप से अवलोकन योग्य होते हैं इसलिए आपको share ऑपरेटर का उपयोग करने की आवश्यकता होती है।

initializeWebSocket(url) { 
    this.wsObservable = Observable.create((observer) => { 
    this.ws = new WebSocket(url); 

    this.ws.onopen = (e) => { 
     (...) 
    }; 

    this.ws.onclose = (e) => { 
     if (e.wasClean) { 
     observer.complete(); 
     } else { 
     observer.error(e); 
     } 
    }; 

    this.ws.onerror = (e) => { 
     observer.error(e); 
    } 

    this.ws.onmessage = (e) => { 
     observer.next(JSON.parse(e.data)); 
    } 

    return() => { 
     this.ws.close(); 
    }; 
    }).share(); 
} 

घटक है कि वेब सॉकेट से डेटा प्राप्त करने के लिए इस नमूदार इस तरह से इस्तेमाल कर सकते हैं करना चाहते हैं:

@Component({ 
    (...) 
}) 
export class SomeComponent { 
    constructor(private service:WebSocketService) { 
    this.service.wsObservable.subscribe((data) => { 
     // use data 
    }); 
    } 
} 

"घटना आधारित दृष्टिकोण" खंड में अधिक जानकारी के लिए इस लेख देखें:

• https://jaxenter.com/reactive-programming-http-and-angular-2-124560.html

Answer 2

कुछ की तरह निम्नलिखित (अपने ठोस आवश्यकताओं के आधार पर):

@Injectable() 
class WsService { 
    comp1Data = new BehaviorSubject(); 
    comp2Data = new BehaviorSubject(); 

    constructor() { 
    getData().subscribe(val => { 
     ... 
     this.compXData.next(someValue); 
    }); 
    } 
    ... 
} 

@Component({...}) 
export class Component1 { 
    constructor(wsService:WsService) { 
    wsService.comp1Data.subscribe(value => this.data = value); 
    } 
} 

@NgModule({ 
    directives: [AppComponent, Component1], 
    bootstrap: [AppComponent], 
    providers: [WsService, ...] 
});