laravelでリアルタイムチャットを行いたいがメッセージが自動的に更新されない

前提・実現したいこと

https://blog.capilano-fw.com/?p=1418
こちらを参考にリアルタイムチャットを行いたいが
メッセージが自動的に更新されない

発生している問題・エラーメッセージ

エラーは特に出ていないです
黄色でこのメッセージが出ているくらいです。

DevTools failed to load SourceMap: Could not load content for...

該当のソースコード

vue
1
2<!-- LogComponent.vue -->
3<template>
4    <div class="container">
5        <div class="row justify-content-center">
6            <div class="col-md-8">
7                <div class="card">
8                    <div class="card-header">Example Component</div>
9
10                    <div class="card-body">
11                         <div v-for="m in messages">
12
13                         <!-- 登録された日時 -->
14                         <span v-text="m.created_at"></span>：&nbsp;
15
16                         <!-- メッセージ内容 -->
17                         <span v-text="m.body"></span>
18
19                         </div>
20                    </div>
21                </div>
22            </div>
23        </div>
24    </div>
25</template>
26
27<script>
28    export default {
29        name: 'log-component',
30        data: function(){
31            return {
32                messages: []
33            }
34        },
35        methods: {
36            getMessages() {
37
38            const url = '/ajax/chat';
39            axios.get(url)
40                .then((response) => {
41
42                    this.messages = response.data;
43
44                });
45            }
46        },
47         mounted() {
48             this.getMessages();
49
50             Echo.channel('chat').listen('MessageCreated', (e) => {
51                      console.log('MessageCreated');
52                      this.getMessages();//全メッセージを再読込
53             });
54         }
55    }
56</script>
57

js
1//bootstrap.js
2
3window._ = require('lodash');
4
5try {
6    window.Popper = require('popper.js').default;
7    window.$ = window.jQuery = require('jquery');
8
9    require('bootstrap');
10} catch (e) {}
11
12window.axios = require('axios');
13
14window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
15
16 import Echo from 'laravel-echo';
17
18 window.Pusher = require('pusher-js');
19
20 window.Echo = new Echo({
21     broadcaster: 'pusher',
22     key: process.env.MIX_PUSHER_APP_KEY,
23     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
24     forceTLS: true
25 });
26

php
1
2
3/*MessageCreated.php
4*/
5<?php
6
7namespace App\Events;
8
9use App\Message;
10use Illuminate\Broadcasting\Channel;
11use Illuminate\Broadcasting\InteractsWithSockets;
12use Illuminate\Broadcasting\PresenceChannel;
13use Illuminate\Broadcasting\PrivateChannel;
14use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
15use Illuminate\Foundation\Events\Dispatchable;
16use Illuminate\Queue\SerializesModels;
17
18class MessageCreated implements ShouldBroadcast
19{
20    use Dispatchable, InteractsWithSockets, SerializesModels;
21
22    public $message;
23
24
25    /**
26     * Create a new event instance.
27     *
28     * @return void
29     */
30    public function __construct(Message $message)
31    {
32        $this->message = $message;
33    }
34
35    /**
36     * Get the channels the event should broadcast on.
37     *
38     * @return \Illuminate\Broadcasting\Channel|array
39     */
40    public function broadcastOn()
41    {
42        return new Channel('chat');
43    }
44}
45

試したこと

bootstrap.jsの設定の確認
pusherのデバッグコンソールに表示されているか確認
Echo.channel('chat').listen内でconsole.log記載(コンソールへの出力はされていなかった)
チャンネル名に間違いがないかの確認
npm run watchで変更を監視

補足情報（FW/ツールのバージョンなど）

DBへのメッセージの追加は正常に行われている

json
1<!--package.json一部
2-->
3
4"devDependencies": {
5        "axios": "^0.19",
6        "bootstrap": "^4.0.0",
7        "cross-env": "^7.0.2",
8        "jquery": "^3.2",
9        "laravel-mix": "^5.0.1",
10        "lodash": "^4.17.13",
11        "popper.js": "^1.12",
12        "resolve-url-loader": "^2.3.1",
13        "sass": "^1.20.1",
14        "sass-loader": "^8.0.0",
15        "vue": "^2.5.17",
16        "vue-template-compiler": "^2.6.10",
17        "webpack-cli": "^3.3.11"
18    },
19    "dependencies": {
20        "laravel-echo": "^1.8.0",
21        "pusher-js": "^6.0.3",
22        "webpack": "^4.43.0"
23    }
24

行動規範の内容に同意します

回答1件

自己解決

bootstrap.jsファイルを変更したところ自動更新ができるようになりました。

js
1// bootstrap.js
2
3window._ = require('lodash');
4
5try {
6    window.Popper = require('popper.js').default;
7    window.$ = window.jQuery = require('jquery');
8
9    require('bootstrap');
10} catch (e) {}
11
12window.axios = require('axios');
13
14window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
15
16 import Echo from 'laravel-echo';
17
18 window.Pusher = require('pusher-js');
19
20 window.Echo = new Echo({
21     broadcaster: 'pusher',
22     key: process.env.MIX_PUSHER_APP_KEY,
23     client:process.env.MIX_PUSHER_APP_ID,//この行を追加
24     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
25     forceTLS: true
26 });