Luevel Echo with Vue.jsを使用する

Question

Laravel 5.4を使用してウェブサイトを構築しましたが、Laravel EchoとPusherで放送システムを構築していますが、残念ながらVue.jsなしで動作させるための手順は不足しています。

この設定を行った人がいますか？エコーを正しくインストールしてから、ステップガイドへの完全なステップが必要です（私はCDNが好きですが、見つけられませんでした）。

Answer 1

を、私はプッシャーでの作業Laravelエコーを達成するためにどのように自分自身を考え出したが、Vue.js

1. なしすべての命令がhereを見つけてください。
2. Pusherをインストールして構成し、Laravel Echoをnpm経由でインストールした場合は、your-project-folder/node_modules/laravel-echo/distに移動し、Laravelパブリックフォルダにecho.jsとコピーしてください（例：your-project-folder/public/lib/js）。私はGruntを使用しているので、このプロセスを自動化しました。それは単なる単純化のためです。それだけで使用してJSのエラーを回避するためだ（、ご使用のブレード・テンプレートの開始時に

   <script type="text/javascript" src="{{asset('lib/js/echo.js')}}"></script>

3. を下記のマークの点で、このコード行を挿入：

4. 追加ブレード・テンプレートで参照してください。 echo.js直接）：

   ：

   <script> 
       window.Laravel = <?php echo json_encode([ 
        'csrfToken' => csrf_token(), 
       ]); ?>; 
       var module = { }; /* <-----THIS LINE */ 
   </script> 
   

5. あなたのフッターには、すべてのJSファイルを含めるした後、このようLaravelエコー呼び出します3210

   <script> 
       window.Echo = new Echo({ 
        broadcaster: 'pusher', 
        key: '{{env("PUSHER_KEY")}}', 
        cluster: 'eu', 
        encrypted: true, 
        authEndpoint: '{{env("APP_URL")}}/broadcasting/auth' 
       }); 
   </script> 
   

6. チャネルをリッスンする場合は、次のようにします。

   <script> 
       window.Echo.private('App.User.{{Auth::user()->id}}') 
        .notification((notification) => { 
         doSomeAmazingStuff(); 
       }); 
   </script> 
   

Answer 2

laravelドキュメントに従ってデータをブロードキャストするイベントを最初に作成します。また、あなたのデータがブロードキャストされているかどうかをデバッグするコンソールをチェックしてください。あなたのデータが、プッシャー文書に示されているように、データをリスニングするためにjavascriptを使用するよりも放送している場合。

ここでは、例確認できます。最終的にはhttps://pusher.com/docs/javascript_quick_start