如何在window.Echo.channel('channel').listen('event', function() { 調適程式碼 })??

laravel vue.js javascript laravel-echo pusher

愛的code 2020-12-29 18:17:20 ‧ 1626 瀏覽

分享至

各位大大前輩！我有一個 view 組件如下：

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card" v-if="youAreLogout">
                    <div class="card-header">調適程式碼</div>

                    <div class="card-body">
                        在 listen 回掉函數中 調適 程式碼
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:[
            'id'
        ],
        data() {
            return {
                youAreLogout: true
            }
        },
        mounted() {
            console.log('Component mounted.');
            window.Echo.channel('channel').listen('event', function () {
                console.log('Component mounted.');
                alert('Component mounted.');
            })
        }
    }
</script>

我把它放在 Laravel 項目的 welcome.blade 中


    <head>
        ....
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body>        
        ...
        <div id="app">
            <example-component></example-component>
        </div>
        ....
    </body>

但是結果:
**

                    console.log('Component mounted.');
                    打在 函數前面的 可以顯示
                    打在函數內部就無法輸出 -----為何???
                    alert('Component mounted.'); 也不會彈窗

**
有勞前輩賜教一下

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

㊣浩瀚星空㊣

iT邦大神 1 級 ‧ 2020-12-29 22:22:29

不錯，再學vue了。
不過建議你。先搞懂一下vue與Laravel 對應的方式。

要將你以前學的html先當成沒學過。
重新學vue。

這樣你才不會被固有知識給綁住。
不要把vue的東西。當成html設計。會對你比較容易理解。

等你搞懂我上面的話。你就搞懂vue了。

ps:忘了先回答你的問題先。
就如我上面說的。不要將vue當成html用。
你現在的做法，只是將一個非html的東西。放去view上面。
重新學習一下，不要跳著做。也不要用舊知識學。

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

愛的code iT邦新手 4 級 ‧ 2020-12-30 08:53:08 檢舉

謝謝 @浩瀚星空大大的建議，我會將 html 和 js 分開思考。
平常的我樂於學習，雖然沒基礎的情況下自學，這一年多以來我也累積了不少知識，遇到問題漸漸也都能從 f12控制台裡面找到原因並加以解決。

目前我是正在學習 Laravel 的事件廣播，但這一題對我來說是一頭霧水：
我註冊了一個 UserLogin 的event 以及一個 AddUserLoginRecord 的Lietener，然後安裝了 websocket 服務器，並 npm install --save laravel-echo pusher-js，...打算將訊息廣撥給前端user

我理解的流程應該是：

user登入 
=> LoginController 中 broadcast(new UserLogin($user));
=> UserLogin implements ShouldBroadcast 中 return new Channel('channel');
=> 頁面加載 welcome.blade.php 
=> <example-component></example-component>  
=> 在mounted 中 調用pusher 廣播
=> mounted() {
            console.log('Component mounted.');
            window.Echo.channel('channel').listen('event', function () {
                console.log('Component mounted.');
            })
        }

然而，在這裡就卡關因為 listen() 裡面的程式碼都沒有執行，翻查 laravel.log、websocket serve 終端也都沒錯誤, 控制台也沒有報錯訊息也沒有輸出 Component mounted.，

㊣浩瀚星空㊣ iT邦大神 1 級 ‧ 2020-12-30 09:50:26 檢舉

websocket 還是需要建立前端的握手動作。才能對傳。
你因該只是將 websocket 服務器建立好而已。
但還沒進行對接動作。所以不會有任何的錯誤訊息。

愛的code iT邦新手 4 級 ‧ 2020-12-30 10:03:56 檢舉

好的，謝謝引路，我再來查一查

愛的code iT邦新手 4 級 ‧ 2020-12-30 10:55:11 檢舉

@ 浩瀚星空大大我疑惑的是：

<script>
    export default {
        props:[
            'id'
        ],
        data() {
            return {
                youAreLogout: false
            }
        },
        mounted() {
            console.log('Component mounted.');
            console.log(this.id);
            window.Echo.channel('user-logout-' + this.id).listen('DeviceBeenLogout', () => {
                this.youAreLogout = true;
            })
        }
    }
</script>

我在控制台、laravel.log 所有的都顯示正常包含pusher 後台也正常收到訊息: