सिग्नलर

Question

का उपयोग कर कोणीय 2 टाइपस्क्रिप्ट मैं माइक्रोसॉफ्ट के सिग्नलआर का उपयोग करने के लिए एक कोणीय 2 एप्लिकेशन स्थापित करने की कोशिश कर रहा हूं। मैं this tutorial का पालन कर रहा हूं, हालांकि यह अच्छा है कि मुझे यह तथ्य पसंद नहीं है कि jQuery और सिग्नलर को index.html फ़ाइल में स्क्रिप्ट टैग के माध्यम से एप्लिकेशन में लोड किया गया है और यह भी तथ्य है कि दोनों पुस्तकालय अपने संबंधित प्रकार परिभाषाओं का उपयोग नहीं करते हैं ।

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

मैं केवल jQuery पर सिग्नल की निर्भरता के कारण अपने एप्लिकेशन में jQuery शामिल कर रहा हूं।

jQuery

मैं पहली बार अपने आवेदन जो मैं Webpack विन्यास में जोड़ने के लिए और साथ ही मिला है में jQuery मॉड्यूल स्थापित करने के साथ शुरू कर दिया। इसे स्थापित करने के बाद मुझे प्रोटैक्टर की वजह से "संघर्ष" मुद्दे का सामना करना पड़ रहा है। यह Aurelia JS Rocks' website पर वर्णित है। हालांकि यह प्रोटैक्टर टाइपिंग को अनइंस्टॉल करने का सुझाव देता है, लेकिन मैंने described in this answer के लिए हमारा दूसरा समाधान आजमाया। मुझे नहीं पता कि यह सबसे अच्छा समाधान है या नहीं।

SignalR

साथ SignalR के संबंध मैं थोड़ा अटक कर रहा हूँ - अब तक यह वहाँ SignalR के लिए प्रदान नहीं "आधिकारिक" नोड मॉड्यूल है लगता है। मुझे यकीन नहीं है कि मुझे फाइल डाउनलोड करके माइक्रोसॉफ्ट की सिग्नलआर जावास्क्रिप्ट लाइब्रेरी को शामिल करना चाहिए और इसे मेरे एप्लिकेशन में शामिल करना चाहिए।

मुद्दा यह है कि मैंने सिग्नलआर के लिए टाइप परिभाषाएं स्थापित की हैं। लेकिन अब मुझे यकीन नहीं है कि वास्तव में सिग्नलआर का उपयोग करने के बारे में कैसे जाना है जब से मैं $ या jQuery टाइप करता हूं, उदाहरण के लिए मुझे .connections का सुझाव नहीं दिया जा रहा है - जो समझ में आता है क्योंकि यह jQuery लाइब्रेरी का हिस्सा नहीं है।

मुझे यकीन है कि मैं इसे "सेट अप" प्राप्त करने के संबंध में कुछ गलत समझ सकता हूं। Angular2 टाइपस्क्रिप्ट एप्लिकेशन में सिग्नलआर का उपयोग करने के बारे में जाने का सबसे अच्छा तरीका क्या है?

Answer 1

यहां एक स्टार्टअप कोड है जिसका आप उपयोग कर सकते हैं।

सी #

//create an interface that contains definition of client side methods 
public interface IClient 
{ 
    void messageReceived(string msg); 
} 

//create your Hub class that contains implementation of client methods 
public class ChatHub : Hub<IClient> 
{ 
    public void sendMessage(string msg) 
    { 
     //log the incoming message here to confirm that its received 

     //send back same message with DateTime 
     Clients.All.messageReceived("Message received at: " + DateTime.Now.ToString()); 
    } 
} 

एचटीएमएल

signalRscriptjQuery की फ़ाइलें और करने के लिए संदर्भ जोड़ें।

<script src="path/to/jquery.min.js"></script> 
<script src="path/to/jquery.signalR.min.js"></script> 

<!--this is the default path where SignalR generates its JS files so you don't need to change it.--> 
<script src="~/signalr/hubs"></script> 

जे एस

आप SignalR और jQuery के लिए टाइपप्रति परिभाषा फ़ाइल स्थापित करने की आवश्यकता। यदि आप TypeScript 2 का उपयोग कर रहे हैं, तो इसका उपयोग करते समय आपको index.d.ts फ़ाइल का संदर्भ जोड़ने की आवश्यकता नहीं है। बस निम्नलिखित आदेशों का उपयोग कर टाइपिंग स्थापित करें।

npm install --save @types/jquery 
npm install --save @types/signalr 

सभी सेटअप किया के साथ, आप एक सरल TypeScript class संदेश भेजने और प्राप्त करने के लिए तर्क को संभालने के लिए लिख सकते हैं।

export class MessageService { 
    //signalR connection reference 
    private connection: SignalR; 

    //signalR proxy reference 
    private proxy: SignalR.Hub.Proxy; 


    constructor() { 
     //initialize connection 
     this.connection = $.connection; 

     //to create proxy give your hub class name as parameter. IMPORTANT: notice that I followed camel casing in giving class name 
     this.proxy = $.connection.hub.createHubProxy('chatHub'); 

     //define a callback method for proxy 
     this.proxy.on('messageReceived', (latestMsg) => this.onMessageReceived(latestMsg)); 

     this.connection.hub.start(); 
    } 

    private onMessageReceived(latestMsg: string) { 
     console.log('New message received: ' + latestMsg); 
    } 

    //method for sending message 
    broadcastMessage(msg: string) { 
     //invoke method by its name using proxy 
     this.proxy.invoke('sendMessage', msg); 
    } 
} 

मैं उपरोक्त कोड का उपयोग कर रहा हूं, स्पष्ट रूप से मेरी आवश्यकताओं में संशोधित है, और यह ठीक काम करता है।

Answer 2

तुम कोशिश

npm install ng2-signalr --save 

आपको सेटअप निर्देश here,
वहाँ भी काम कर डेमो एक के लिए एक लिंक है पढ़ सकते हैं कर सकते हैं।