VueJS + Django Channels

Question

I just finished reading the introductions for VueJS and Django Channels and would like to use them together to provide real-time updates to several components on a webpage. This illustrates the basic idea:

Being new to VueJS, it seems the diagram above requires some type of "middle man", between the VueJS components and the websocket, that makes sure each component gets the correct data.

So, my questions are:

1. Architecturally, is this a good design?
2. If so, can VueJS act as that "middle man" to manage which component connects to which channel?

Thanks for your help :)

Answer 1

No, you don't need a middle man. But you could ( if there is a lot of updates through channel ) be better of with using Vuex and feed it with socket data. Then if everything is wired correctly your Vue app would be just the view layer that reacts ( no pun intended ) to changes.

Django channels are just queues ( first in first out ). You pass whatever data you need to sent to the front end to the channel. All the data gets serialized and passed to the queue. Channel is in worker mode and as soon as it receives a message ( with data ) it tries to emit it on the channel it self.

How to harvest this data in Vue?

What I did was set up Vuex. I've then made a Vuex plugin called createWebSockets.js. When you go through the docs of Vuex and Vuex plugins you'll see that plugin has access to Vuex commit method. In said plugin I opened sockets to channels I've had running on the server and whenever new message came through I just pushed the data in Vuex and my Vue app just reacted to these changes.

I can probably find it somewhere if you need more help.

Best

Edit

So after you get yourself familiar with Vuex and add it to your app you could do something like this:

// plugin code

// 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
    }
}

This is how you would you update Vuex through sockets.

Hope it helps.