VueJS + Django 频道
VueJS + Django Channels
我刚看完 VueJS and Django Channels 的介绍,想将它们结合使用,为网页上的多个组件提供实时更新。这说明了基本思想:
作为 VueJS 的新手,上图似乎需要某种类型的 "middle man",在 VueJS 组件和 websocket 之间,以确保每个组件都获得正确的数据。
那么,我的问题是:
- 在架构上,这是一个好的设计吗?
- 如果是这样,VueJS 可以充当那个"middle man" 来管理哪个组件连接到哪个通道吗?
感谢您的帮助:)
不,您不需要中间人。但是你可以(如果通过通道有很多更新)更好地使用 Vuex 并向它提供套接字数据。然后,如果一切都正确连接,您的 Vue 应用程序将只是对更改做出反应(没有双关语)的视图层。
Django 通道只是队列(先进先出)。您将需要发送到前端的任何数据传递到通道。所有数据都被序列化并传递到队列。 Channel 处于工作模式,一旦它收到一条消息(带有数据),它就会尝试在它自己的通道上发出它。
如何在 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 的方式。
希望对您有所帮助。
我刚看完 VueJS and Django Channels 的介绍,想将它们结合使用,为网页上的多个组件提供实时更新。这说明了基本思想:
作为 VueJS 的新手,上图似乎需要某种类型的 "middle man",在 VueJS 组件和 websocket 之间,以确保每个组件都获得正确的数据。
那么,我的问题是:
- 在架构上,这是一个好的设计吗?
- 如果是这样,VueJS 可以充当那个"middle man" 来管理哪个组件连接到哪个通道吗?
感谢您的帮助:)
不,您不需要中间人。但是你可以(如果通过通道有很多更新)更好地使用 Vuex 并向它提供套接字数据。然后,如果一切都正确连接,您的 Vue 应用程序将只是对更改做出反应(没有双关语)的视图层。
Django 通道只是队列(先进先出)。您将需要发送到前端的任何数据传递到通道。所有数据都被序列化并传递到队列。 Channel 处于工作模式,一旦它收到一条消息(带有数据),它就会尝试在它自己的通道上发出它。
如何在 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 的方式。
希望对您有所帮助。