質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.90%

docker laravel pusher 500エラー

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 170

taromaru99

score 15

docker laravel でpusherでリアルタイムチャットを実装をしています。
メッセージを送るときに500エラーが出て困っています。
たまにですが、メッセージを送れる時もあります。
三日間いろいろなサイトを見てやったのですが、解決しなかったため質問しました。

ChatController.phpのイベント発火時にエラーが起きてchat.jsのajaxの部分でエラーた起きているのだと思います。
質問内容
問題がpusherの設定が間違っているのかを聞きたいです。
できればどこが間違っているのかも
よろしくお願いします。

bootstrap.js

import Echo from 'laravel-echo';

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    client: process.env.MIX_PUSHER_APP_ID,
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: false,
    forceTLS: true
});


.env

PUSHER_APP_ID=*******
PUSHER_APP_KEY=********************
PUSHER_APP_SECRET=*******************
PUSHER_APP_CLUSTER=ap3

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"


broadcasting.php

'default' => env('BROADCAST_DRIVER', 'pusher'),

    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'encrypted' => false,
                'useTLS' => true,
            ],
        ],

    ],


ChatController.php

event(new ChatMessageRecieved($request->all()));


ChatMessageRecieved.php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class ChatMessageRecieved implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;
    public $request;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($request)
    {
        $this->request = $request;

    }

    /**
     * イベントをブロードキャストすべき、チャンネルの取得
     *
     * @return Channel|Channel[]
     */
    public function broadcastOn()
    {

        return new Channel('my-channel');

    }

    /**
     * ブロードキャストするデータを取得
     *
     * @return array
     */
    public function broadcastWith()
    {

        return [
            'message' => $this->request['message'],
            'send' => $this->request['send'],
            'recieve' => $this->request['recieve'],
        ];
    }

    /**
     * イベントブロードキャスト名
     *
     * @return string
     */
    public function broadcastAs()
    {

        return 'my-event';
    }
}


chat.js

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

    $('#btn_send').on('click' , function(){
        console.log("ok");
        $.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){
            console.log("ok87");
            $('textarea[name="message"]').val('');
        }).fail(function(result){

        });
    });

    console.log("ok97");
    Pusher.logToConsole = true;
    console.log("ok98");
    var pusher = new Pusher('***************', {
        cluster  : 'ap3',
    });

    var pusherChannel = pusher.subscribe('my-channel');

    pusherChannel.bind('my-event', function(data) {
        console.log("ok2");
        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> ';
            console.log("ok3");
        }else if(data.recieve === login){
            appendText = '<div class="recieve" style="text-align:left"><p>' + data.message + '</p></div> ';
            console.log("ok4");
        }else{
            console.log("ok5");
            return false;
        }

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


    });
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yuki84web

    2020/07/07 00:42

    500エラーが出た際はエラーログが残っていると思うので、まずはそれを確認してみて下さい。

    キャンセル

回答 1

check解決した方法

0

pusherは使わないことにしました

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.90%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る