[Laravel8.46.0] 8系でChat機能を実装したい1

$ php artisan –version
Laravel Framework 8.46.0
$ composer require pusher/pusher-php-server
$ php artisan make:model Message -m

migrationfile

    public function up()
    {
        Schema::create('messages', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->integer('sent_id')->index()->unsigned();
            $table->integer('recived_id')->index()->unsigned();
            $table->text('message');
            $table->timestamps();
        });
    }

model(Message.php)

    protected $fillable = [
        'sent_id',
        'recieved_id',
        'message',
    ];

$ php artisan serve –host 192.168.33.10 –port 8000

register画面からuserを3つぐらい作ります。

$ php artisan make:controller HomeController

route

use App\Http\Controllers\HomeController;

Route::get('/home', [HomeController::class, 'index']);

HomeController.php

use App\Models\User;
use Illuminate\Support\Facades\Auth;

class HomeController extends Controller
{
    //
    public function __construct(){
    	$this->middleware('auth');
    }

    public function index(){
    	$user = Auth::user();
    	$users = User::where('id','<>', $user->id)->get();

    	return view('chat.user_select', compact('users'));
    }
}

layout/app.blade.php
L bootstrap5を追加
L pusher.jsを追加

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

// 省略
            <main>
                @yield('content')
            </main>
// 省略
<script src="https://js.pusher.com/7.0.3/pusher.min.js"></script>
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
@yield('script')

user_select.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
		</div>
	</div>

	<table class="table">
		<thead>
			<tr>
				<th>#</th>
				<ht>Name</ht>
				<th></th>
			</tr>
		</thead>
		<tbody>
		@foreach($users as $key => $user)
		<tr>
			<td>{{$loop->iteration}}</td>
			<td>{{$user->name}}</td>
			<td><a href="/chat/{{$user->id}}"><button type="button" class="btn btn-primary">Chat</button></a></td>
		</tr>
		</tbody>
	</table>
</div>
@endsection

$ php artisan make:controller ChatController

route

use App\Http\Controllers\ChatController;

Route::get('/chat/{recieved_id}', [ChatController::class, 'index'])->name('chat');
Route::post('/chat/send', [ChatController::class, 'store'])->name('chatSend');

chat/chat.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
	<div class="row">
		<div class="col-md-8 col-md-offset-2">
		</div>
	</div>

	<!-- チャットルーム -->
	<div id="room">
		@foreach($messages as $key => $message)
			@if($message->sent_id == \Illuminate\Support\Facades\Auth::id())
				<div class="send" style="text-align: right">
					<p>{{$message->message}}</p>
				</div>
			@endif

			@if($message->received_id == \Illuminate\Support\Facades\Auth::id())
				<div class="send" style="text-align: right">
					<p>{{$message->message}}</p>
				</div>
			@endif
		@endforeach
	</div>

	<form>
		<textarea name="message" style="width:100%"></textarea>
		<button type="button" id="btn_send" class="btn btn-primary">送信</button>
	</form>

	<input type="hidden" name="sent_id" value="{{$param['sent_id']}}">
	<input type="hidden" name="recieved_id" value="{{$param['recieved_id']}}">
	<input type="hidden" name="login" value="{{\Illuminate\Support\Facades\Auth::id()}}">
</div>
@endsection

@section('script')
<script>
	Pusher.logToConsole = true;

	var pusher = new Pusher('*', {
		cluster: '*',
		encrypted: true
	});

	var pusherChannel = pusher.subscribe('testApp');

	pusherChannel.bind('chat_event', function(data){

		let appendText;
		let login = $('input[name="login"]').val();

		if(data.sent_id === login){
			appendText = '<div class="send" style="text-align:right"><p>' + data.message + '</p></div> ';
		} else if(data.recieved_id === login){
			appendText = '<div class="recieve" style="text-align:left"><p>' + data.message + '</p></div> ';
		} else {
			return false;
		}

		$("#room").append(appendText);

		if(data.recieved_id === login){
			Push.creaet("新着メッセージ",
			{
				body: data.message,
				timeout: 8000,
				onClick: function(){
					window.focus();
					this.close();
				}
			})
		}
	});

	$.ajaxSetup({
		headers : {
			'X-CSRF-TOKEN' : $('meta[name="csrf-token').attr('content'),
		}
	});

	$('#btn_send').on('click', function(){
		$.ajax({
			type: 'POST',
			url: '/chat/send',
			data: {
				message : $('textarea[name="message"]').val(),
                sent_id : $('input[name="sent_id"]').val(),
                recieved_id : $('input[name="recieved_id"]').val(),
			}
		}).done(function(result){
			$('textarea[name="message"]').val('');
		}).fail(function(result){

		});
	});
</script>
@endsection

$ php artisan make:event ChatMessageRecieved
ChatMessageRecieved.php

public function __construct($request)
    {
        //
        $this->request = $request;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PrivateChannel('testApp');
    }

    public function broadcastWith(){
        return [
            'message' => $this->request['message'],
            'sent_id' => $this->request['sent_id'],
            'recieved_id' => $this->request['recieved_id'],
        ];
    }

    public function broadcastAs(){
        return 'chat_event';
    }

あ、想定通りに動いてないけど、ちょっと思い出してきた。
pusherは基本jsでonclickでpostしてstoreし、eventを発火させて新しいデータを取得するんだった。
でも確かpusherのcrudentialは.envだった記憶があるんだが。。。