livewireでリアルタイム通信可能な掲示板を作る
この記事はアドベントカレンダー3日目の記事になります。
実際にサーバーにアップロードしたかったのですが、間に合いそうになかったのでよければデモ動画を見てみてください
2つのローカルを使って検証しています。
はじめに
Laravelを使って他のユーザーとのリアルタイム通信を行うのはハードルが高く感じることが多いです。
それが開発のネックになってしまうのではと感じ、今回のように比較的学習コストを少なくリアルタイム通信機能を導入する方法の記事を執筆させて頂くことにしました。
開発準備
まずdockerで instantSNSという名前のLaravelアプリケーションを立ち上げます。
curl -s "https://laravel.build/instantSNS" | bash
詳しい解説はLaravelの公式ドキュメントをご覧ください。
コマンド
LivewireもLaravelのコントローラと同様にコマンドラインを使用して作成されます
./vendor/bin/sail composer require livewire/livewire
上記コマンドにより生成されるファイルは以下の２つです。
/instantSNS/resources/views/livewire/post
/instantSNS/app/Livewire/Post.php
Livewireではコマンドを打つことでviewファイルも同時に生成されます。
また、livewireを使ってDBと通信する場合はこちらのファイル内で処理の内容を記述する必要があります。
次に、マイグレーションファイルとモデルを作成しましょう
./vendor/bin/sail artisan make:model Post -m
これで、開発の準備が完了しました。
livewire使い方
簡単にlivewireの使い方を解説させていただきます。
livewireは通常のviewファイルの中で以下のコードを記入するだけで、使うことができます。
（今回は例として先ほど作成した post.blade.phpを使います。）
// welcome.blade.php
<body>
<livewire:post />
</body>
上記のように<livewire:[ファイル名] />という記述方法になります。
また、livewireファイルに変数を渡したい場合にはviewファイルとコントローラ側でコードを記述する必要があります
// viewファイル
<livewire:post :hoge="$hoge" />
// コントローラファイル (/app/Livewire/Post.php)
class Post extends Component
{
public $hoge; // 渡す変数名をここに記述
// 中略
}
上記のようにすれば大丈夫です。
※変数の受け渡しがエラーの原因になることが多いので注意してください
リアルタイム通信
今回より簡単にリアルタイム通信を行うため、wire:pollを使用しました。
この技術では定期的にリクエスト送信をすることで、ページを最新の状態に保つことができます。
必要になるのは2つのlivewireファイルの書き換えだけです。掲示板への投稿、livewire側の処理全てのコードは以下の通りです。
/instantSNS/app/Livewire/Post.php
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Post as PostModel;
class Post extends Component
{
public $text;
public function create()
{
PostModel::create([
'content' => $this->text,
]);
}
public function render()
{
return view('livewire.post', [
'posts' => PostModel::all()->sortByDesc('created_at'),
]);
}
}
/instantSNS/resources/views/livewire/post
<div>
<div class="view" wire:poll.2.5s> // ここでリクエストの間隔を指定
@foreach ($posts as $post)
<div class="item">
<div>{{ $post->content }}</div>
<div class="created_at">{{ $post->created_at }}</div>
</div>
@endforeach
</div>
<div class="form">
<form wire:submit.prevent="create">
@csrf
<input type="text" wire:model="text">
<button type="submit">投稿</button>
</form>
</div>
</div>
上記のコードはデータの投稿と定期的にページを更新する処理を一緒に行なっています。
<div class="view" wire:poll.2.5s>
wire:pollを15sにすることで15秒おきにリクエストを送れます。
詳細は以下の公式ドキュメントをご覧いただいた方が早いと思います。
最後に
今回説明に使用したコードはgithubで公開しています。
宣伝
ビジネスの最初の5分を変えるwebアプリの作成を行なっています。もし興味があれば触ってみてください。