VueJS + Django Channels

Question

VueJSとDjango Channelsの紹介を読み終えたばかりで、それらを一緒に使用してウェブページ上のいくつかのコンポーネントをリアルタイムで更新したいと考えています。 VueJSに新しいビーイング

が、それはダイアグラム上のようだVueJSコンポーネントとWebSocketの間の「仲介者」のいくつかのタイプを必要とし、各コンポーネントが正しいを取得し確認します：これは、基本的な考え方を示していますデータ。

だから、私の質問は以下のとおりです。

1. アーキテクチャ的には、これは良いデザインですか？
2. もしそうなら、VueJSはどのコンポーネントがどのチャンネルに接続しているのかを管理する "中堅の人間"として働くことができますか？

ご協力いただきありがとうございます:)

Answer 1

いいえ、あなたはない必要真ん中の男を行います。しかし、Vuexを使用してソケットデータでフィードする方が良いでしょう（チャンネルを通じて多くのアップデートがある場合）。そして、すべてが正しく配線されていれば、あなたのVueアプリケーションは、変化するように反応するビュー層だけになります。

ジャンゴチャネルは、単にキュー（先入れ先出し）です。フロントエンドに送信する必要のあるデータはすべてチャンネルに渡します。すべてのデータがシリアル化され、キューに渡されます。チャンネルはワーカーモードにあり、メッセージ（データ付き）を受信すると直ちにチャネル上でそれを送信しようとします。

このデータを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を更新する方法です。

希望します。