VueJS + Django頻道

Question

我剛剛閱讀了VueJS和Django Channels的介紹，並希望將它們一起用於爲網頁上的多個組件提供實時更新。這說明了一個基本思路：

作爲新VueJS，似乎上面的圖表中，需要某種類型的「中間人」，在VueJS組件和WebSocket的之間，是確保每個組件獲得正確的數據。

所以，我的問題是：

1. 架構上來說，這是一個好的設計？
2. 如果是這樣，VueJS可以充當「中間人」來管理哪個組件連接到哪個頻道？

感謝您的幫助:)

Answer 1

不，你不需要中間人。但是，如果使用Vuex並將其與套接字數據一起提供，您可以（如果有很多通過頻道更新）更好。然後，如果一切都正確連線，你的Vue應用程序將只是一個反應（沒有雙關語意圖）改變的視圖層。

Django頻道只是隊列（先進先出）。您將需要發送到前端的任何數據傳遞到該頻道。所有的數據都被序列化並傳遞給隊列。頻道處於工作模式，一旦它收到一條消息（包含數據），它就會嘗試在自己的頻道上發射它。

如何在Vue中採集這些數據？

我所做的是成立了Vuex。然後我做了一個名爲createWebSockets.js的Vuex插件。當您瀏覽Vuex和Vuex插件的文檔時，您會看到該插件可以訪問Vuex commit方法。在上述插件中，我將套接字打開到服務器上運行的通道，每當新消息傳出時，我只是將數據推送到Vuex中，而我的Vue應用程序剛剛對這些更改作出反應。

如果您需要更多幫助，我可能會在某處找到它。

最佳

編輯

所以你讓自己熟悉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。

希望它有幫助。