2017-05-25 22 views
7

मैंने अभी VueJS और Django Channels के लिए परिचय पढ़ना समाप्त कर दिया है और वेबपृष्ठ पर कई घटकों के लिए वास्तविक समय अपडेट प्रदान करने के लिए उन्हें एक साथ उपयोग करना चाहते हैं।VueJS + Django चैनल

enter image description here

VueJS करने के लिए नए होने के नाते, ऐसा लगता है आरेख ऊपर की "मध्यम आदमी" कुछ प्रकार, VueJS घटकों और WebSocket के बीच की आवश्यकता है, कि यकीन है कि प्रत्येक घटक सही हो जाता है बनाता है: यह मूल विचार को दिखाता है डेटा।

तो, मेरे सवाल कर रहे हैं:

  1. Architecturally, यह एक अच्छा डिजाइन है?
  2. यदि ऐसा है, तो क्या VueJS उस "मध्य व्यक्ति" के रूप में कार्य कर सकता है ताकि यह प्रबंधित किया जा सके कि कौन सा घटक किस चैनल से जुड़ता है?

आपकी मदद के लिए धन्यवाद :)

+2

क्या आपने यह छवि स्वयं बनाई थी? मुझे गलत मत समझो, यह बहुत अच्छा लग रहा है, लेकिन एक स्टैक ओवरफ्लो प्रश्न के लिए, माइक्रोसॉफ्ट पेंट से कुछ squiggly लाइनें ठीक है। :)। अपने प्रश्न का उत्तर देने के लिए, वह "मध्य व्यक्ति" जिसे आप ढूंढ रहे हैं वोएक्स है। वेबसाकेट से और उसके लिए कोई भी क्रिया Vuex के माध्यम से बहती है। –

+1

@EricGuan हाँ, मैंने उपरोक्त ओवर-इंजीनियर आरेख बनाया है :) मैं एक दृश्य शिक्षार्थी हूं इसलिए आरेख वास्तव में अवधारणाओं को समझने में मेरी सहायता करते हैं। अब Vuex की जांच करेंगे। आपकी सहायताके लिए धन्यवाद! –

उत्तर

7

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

Django चैनल केवल कतार हैं (पहले पहले बाहर)। आप चैनल के सामने के अंत में जो भी डेटा भेजना चाहते हैं उसे पास करते हैं। सभी डेटा धारावाहिक हो जाता है और कतार में पारित किया जाता है। चैनल कार्यकर्ता मोड में है और जैसे ही इसे एक संदेश (डेटा के साथ) प्राप्त होता है, यह इसे स्वयं चैनल पर उत्सर्जित करने का प्रयास करता है।

वू में इस डेटा को कैसे फसल करें?

मैंने जो किया वह वुएक्स स्थापित किया गया था। मैंने फिर एक Vuex प्लगइन बनाया है जिसे createWebSockets.js कहा जाता है। जब आप Vuex और Vuex प्लगइन के दस्तावेज़ों के माध्यम से जाते हैं तो आप देखेंगे कि प्लगइन के पास Vuex commit विधि तक पहुंच है। कहा प्लगइन में मैंने सर्वर पर चलने वाले चैनलों के लिए सॉकेट खोले हैं और जब भी नया संदेश आया था, मैंने सिर्फ वूक्स में डेटा को धक्का दिया और मेरे वू ऐप ने इन परिवर्तनों पर प्रतिक्रिया व्यक्त की।

यदि आपको अधिक सहायता की आवश्यकता है तो शायद मैं इसे कहीं कहीं ढूंढ सकता हूं।

बेस्ट

संपादित

तो बाद आप अपने आप को Vuex से परिचित हो और अपने एप्लिकेशन में जोड़ें आप कुछ इस तरह कर सकता है:

// प्लगइन कोड

// importing from node_modules -> you have to install it 
// through npm or yarn 
import io from 'socket.io-client' 

// opening a socket to an IP. Mind that I've put an 
// example IP here yours will be an IP belonging to the 
// server or 127.0.0.1 if you're working locally 
const socket = io('127.0.0.1:4000') 

// this is a vuex plugin that takes the store (vuex store) 
// object as its parametar 
export default function createWebSockets(socket) { 

    // it returns a function to which we passed store object 
    return (store) => { 

     // this is your channel name on which you want to 
     // listen to emits from back-end 
     const channel_name = 'whatever-you-called-it' 

     // this opens a listener to channel you named on line above 
     socket.on('channel_name', (data) => { // 

      // and this is the store part where you 
      // just update your data with data received from socket 
      store.commit('YOUR_VUEX_MUTATION', data) 

     }) 

     // you can add multiple socket.on statements if you have more than one channel 
    } 
} 

इस प्रकार आप सॉकेट के माध्यम से Vuex को अपडेट करेंगे।

उम्मीद है कि यह मदद करता है।

संबंधित मुद्दे