4 回閲覧されました

みなさんこんにちは、jonioです。

今回はnavigator.sendBeaconの使い方の解説の記事になります。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

navigator.sendBeaconとは

ユーザーがページを離れる直前にサーバーへ非同期でデータを送信する為のJavaScriptのメソッド です。

サーバーに送信するならaxios.getやaxios.postなどを使えばできると思うかもしれませんが画面遷移をする時に使うことができません。

こんな時にnavigator.sendBeaconが必要になります。

送信はPOSTと同じ扱いになりますので画面遷移時に使うPOST送信のイメージです。

サンプルコード

Laravelのテンプレートにvue.js3を使って実装しています。

api.phpに下記の記述をしています。

Route::post('/time', [timeController::class, 'store']);

Route::post('/time', [timeController::class, 'store']);

navigator.sendBeaconの記述は下記になります。

const formData = new FormData();
formData.append('product_id', product.value.id.toString());
formData.append('page_name', product.value.title);
navigator.sendBeacon('/api/time', formData);

const formData = new FormData();
formData.append('product_id', product.value.id.toString());
formData.append('page_name', product.value.title);
navigator.sendBeacon('/api/time', formData);

2行目・3行目は送信したいデータです。

appendの第一引数がkeyで第二引数がvalueです。

コントローラーで受け取る時は下記の記述をします。

public function store(Request $request)
{
    $productId = $request->input('product_id');
    $pageName  = $request->input('page_name');

    \Log::info('受信データ', [
        'product_id' => $productId,
        'page_name'  => $pageName,
    ]);
}

public function store(Request $request)
{
    $productId = $request->input('product_id');
    $pageName  = $request->input('page_name');

    \Log::info('受信データ', [
        'product_id' => $productId,
        'page_name'  => $pageName,
    ]);
}

「$request->input(‘key’);」でデータを受け取ることができます。

3行目の「product_id」・4行目の「page_name」がvue.jsで送信する時のkeyです。