Laravel vue リアルタイムチャットを作る

LaravelとVueで、Lineのようなリアルタイムチャットを作ってみます

Laravelのプロジェクトは、既に作ってあるものとします。

データベースを作成します。

php artisan make:model Message -m

作成された、マイグレーションファイルに以下をコーディング

     public function up()
    {
        Schema::create('messages', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->text('body'); // メッセージ本文
            $table->text('user');
            $table->timestamps();
        });
    }

マイグレーション実行

php artisan migrate

データベース状況は以下の通りです。

データ追加の時にエラーにならないように、guarded を追加します。

class Message extends Model
{
    //
    protected $guarded = ['id'];
}

チャットページの作成

routes/web.php に route を追加します。

Route::get('/chat', 'ChatController@index');

コントローラを作成します。

php artisan make:controller ChatController

作成した ChatController に viewの設定をします。ユーザーIDが必要なので、ログイン必須とします。


public function __construct()
{
   $this->middleware('auth');
}
public function index() {
    return view('chat'); // フォームページのビュー
}

ビューを追加します。

ビューを追加します。

<html>
<body>
    <div id="chat">
        <textarea v-model="message"></textarea>
        <br>
        <button type="button" @click="send()">送信</button>
        <hr>
        <div v-for="m in messages">
            <span v-text="m.created_at"></span>
            <span v-text="m.body"></span>
        </div>

    </div>
    <script src="/js/app.js"></script>
    <script>

        new Vue({
            el: '#chat',
            data: {
                message: '',
                messages: []
            },
            methods: {
                getMessages() {

                    const url = '/ajax/chat';
                    axios.get(url)
                        .then((response) => {
                            this.messages = response.data;
                        });

                },
                send() {
                    const url = '/ajax/chat';
                    const params = { message: this.message };
                    axios.post(url, params)
                        .then((response) => {
                            // 成功したらメッセージをクリア
                            this.message = '';
                        });
                }
            },
            mounted() {
                this.getMessages();
                Echo.channel('chat')
                    .listen('MessageCreated', (e) => {
                        this.getMessages(); // メッセージを再読込
                    });
            }
        });

    </script>
</body>
</html>

vue エラー

ERROR in ./resources/js/components/ExampleComponent.vue 1:0
というエラーが出た場合、
webpack.mix.js　を　以下のように編集してください。
mix.js(‘resources/js/app.js’, ‘public/js’).vue() // ⭐️ 追記

ちなみに、pusher は、vuejs は、2にしか対応されていないので、vuejs は、ver2 を使ってください。

vuejsバージョンチェック方法
npm list vue
vue-hoge@1.0.0 /Users/fuga/project/vue-hoge
└── vue@2.6.10

kitayama