python - VueJS + Django channel

Question

我刚刚读完 VueJS 的介绍和 Django Channels并希望将它们一起使用来为网页上的多个组件提供实时更新。这说明了基本思想:

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

所以，我的问题是:

1. 在架构上，这是一个好的设计吗？
2. 如果是这样，VueJS 能否充当“中间人”来管理哪个组件连接到哪个 channel ？

感谢您的帮助:)

Answer 1

不，您不需要中间人。但是你可以(如果通过 channel 有很多更新)更好地使用 Vuex 并向它提供套接字数据。然后，如果一切都正确连接，您的 Vue 应用程序将只是对更改使用react(没有双关语)的 View 层。

Django channel 只是队列(先进先出)。您将需要发送到前端的任何数据传递到 channel 。所有数据都被序列化并传递到队列。 Channel 处于工作模式，一旦它收到一条消息(带有数据)，它就会尝试在它自己的 Channel 上发出它。

如何在 Vue 中收集这些数据？

我所做的是设置 Vuex。然后我制作了一个名为 createWebSockets.js 的 Vuex 插件。当您浏览 Vuex 和 Vuex 插件的文档时，您会看到该插件可以访问 Vuex commit 方法。在所述插件中，我打开了我在服务器上运行的 channel 的套接字，每当有新消息通过时，我只是将数据推送到 Vuex 中，我的 Vue 应用程序只是对这些变化使用react。

如果您需要更多帮助，我或许可以在某个地方找到它。

最佳

编辑

因此，在您熟悉 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 的方式。

希望对您有所帮助。