VueJS + Django频道

Question

我刚刚阅读了VueJS和Django Channels的介绍，并希望将它们结合使用，以便为网页上的多个组件提供实时更新。这说明了基本思想：

作为VueJS的新手，上图似乎需要在VueJS组件和websocket之间使用某种类型的＆＃34;中间人＆＃34;，以确保每个组件都能获得正确的数据。

所以，我的问题是：

1. 在建筑方面，这是一个很好的设计吗？
2. 如果是这样的话，VueJS可以扮演那个＆＃34;中间人＆＃34;管理哪个组件连接到哪个渠道？

感谢您的帮助：）

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。

希望它有所帮助。