Q&A
#実装したいこと
pusherを利用してチャットができる機能を実装したいと考えております。
実装に関しては下記サイトを参照致しました。
https://www.casleyconsulting.co.jp/blog/engineer/5122/
#課題
javascriptが動作しておらず送信ボタンを押しても、
イベントが発火せずメッセージを送ることができません。
（コンソールを確認しても何も表示されません）
（pusherの方もdisconnectionと表示されております。）
#行ったこと
①pusher.min.jsを追記
②text-javascriptの記載
以上になります。
下記に記載しているコードも追記致しますので、
原因をご教授頂けましたら幸いです。
宜しくお願い致します。
#エラー（pusherのデバッグコンソール）
https://gyazo.com/aeffdc599594324df6d9161edc026460
#コード
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->send == \Illuminate\Support\Facades\Auth::id()) <div class="send" style="text-align: right"> <p>{{$message->message}}</p> </div> @endif {{-- 受信したメッセージ --}} @if($message->recieve == \Illuminate\Support\Facades\Auth::id()) <div class="recieve" style="text-align: left"> <p>{{$message->message}}</p> </div> @endif @endforeach </div> <form> <textarea name="message" style="width:100%"></textarea> <button type="button" id="btn_send">送信</button> </form> <input type="hidden" name="send" value="{{$param['send']}}"> <input type="hidden" name="recieve" value="{{$param['recieve']}}"> <input type="hidden" name="login" value="{{\Illuminate\Support\Facades\Auth::id()}}"> </div> @endsection @section('script') <script type="text/javascript"> //ログを有効にする Pusher.logToConsole = true; var pusher = new Pusher('[YOUR-APP-KEY]', { cluster : '[YOUR-CLUSTER]', encrypted: true }); //購読するチャンネルを指定 var pusherChannel = pusher.subscribe('chat'); //イベントを受信したら、下記処理 pusherChannel.bind('chat_event', function(data) { let appendText; let login = $('input[name="login"]').val(); if(data.send === login){ appendText = '<div class="send" style="text-align:right"><p>' + data.message + '</p></div> '; }else if(data.recieve === login){ appendText = '<div class="recieve" style="text-align:left"><p>' + data.message + '</p></div> '; }else{ return false; } // メッセージを表示 $("#room").append(appendText); if(data.recieve === login){ // ブラウザへプッシュ通知 Push.create("新着メッセージ", { 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(), send : $('input[name="send"]').val(), recieve : $('input[name="recieve"]').val(), } }).done(function(result){ $('textarea[name="message"]').val(''); }).fail(function(result){ }); }); </script> @endsection
app.blade.php
<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name', 'Laravel') }}</title> <script src="{{ asset('js/app.js') }}" defer></script> <link rel="dns-prefetch" href="//fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> <link href="{{ asset('css/view.css') }}" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.12/push.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.12/push.js"></script>
ChatController.php
<?php namespace App\Http\Controllers; use App\Mail\SampleNotification; use Illuminate\Http\Request; use App\Events\ChatMessageRecieved; use App\Message; use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Mail; class ChatController extends Controller { public function __construct() { } public function index(Request $request , $recieve) { // チャットの画面 $loginId = Auth::id(); $param = [ 'send' => $loginId, 'recieve' => $recieve, ]; // 送信 / 受信のメッセージを取得する $query = Message::where('send' , $loginId)->where('recieve' , $recieve);; $query->orWhere(function($query) use($loginId , $recieve){ $query->where('send' , $recieve); $query->where('recieve' , $loginId); }); $messages = $query->get(); return view('chat' , compact('param' , 'messages')); } /** * メッセージの保存をする */ public function store(Request $request) { // リクエストパラメータ取得 $insertParam = [ 'send' => $request->input('send'), 'recieve' => $request->input('recieve'), 'message' => $request->input('message'), ]; // メッセージデータ保存 try{ Message::insert($insertParam); }catch (\Exception $e){ return false; } // イベント発火 event(new ChatMessageRecieved($request->all())); return true; } }
ChatMessageRecived.php
<?php namespace App\Events; use Illuminate\Broadcasting\Channel; use Illuminate\Queue\SerializesModels; use Illuminate\Broadcasting\PrivateChannel; use Illuminate\Broadcasting\PresenceChannel; use Illuminate\Foundation\Events\Dispatchable; use Illuminate\Broadcasting\InteractsWithSockets; use Illuminate\Contracts\Broadcasting\ShouldBroadcast; class ChatMessageRecieved implements ShouldBroadcast { use Dispatchable, InteractsWithSockets, SerializesModels; protected $message; protected $request; /** * Create a new event instance. * * @return void */ public function __construct($request) { $this->request = $request; } /** * イベントをブロードキャストすべき、チャンネルの取得 * * @return Channel|Channel[] */ public function broadcastOn() { return new Channel('chat'); } /** * ブロードキャストするデータを取得 * * @return array */ public function broadcastWith() { return [ 'message' => $this->request['message'], 'send' => $this->request['send'], 'recieve' => $this->request['recieve'], ]; } /** * イベントブロードキャスト名 * * @return string */ public function broadcastAs() { return 'chat_event'; } }
あなたの回答
tips
プレビュー
