Laravel Echo Cant使用websocket Laravel（Beyondode）订阅了香奈儿

Question

我正在使用Blade进行尝试（不使用vue组件），但仍然在使用vue.js进行声明

这是我的botstrap.js

import Echo from "laravel-echo";
window.Pusher = require("pusher-js");
window.Echo = new Echo({
    broadcaster: "pusher",
    key: process.env.MIX_PUSHER_APP_KEY
});

这是我的app.js

require("./bootstrap");

window.Vue = require("vue");

blade.php

<div id="app2">
    <div class="header-tab-content" id="tab-3" style="">

            <div class="bg-detail">


                <div class="bottom-20" v-for="val in bidComments">

                    <div class="timeline-item top-15">
                         <i class="fa fa-user"></i>
                        <div class="timeline-item-content-full">
                            <p class="bid bid-user">
                               @{{val.user.name}}
                            </p>
                            <p>
                               @{{val.comment}}
                            </p>
                        </div>
                        <h5 class="font-11 small-text timeline-reply"><i class="fa fa-clock timeline-icon"></i>@{{val.created_at}}
                            <span><i class="fa fa-reply timeline-icon"></i>Balas</span>
                            <span><i class="fa fa-heart timeline-icon"></i>Suka</span>
                        </h5>

                        <div class="clear"></div>

                    </div>


                    <div class="clear"></div>

                </div>

                <div class="decoration bottom-10 top-20 deco-green"></div>

                <div class="content-title m0 bottom-0">
                    <span class="color-highlight top-10">Tulis Komentar</span>
                    <h1 class="m0">&amp; Pertanyaan</h1>

                    <div class="input-simple-2 input-green bottom-10 top-5">
                        <div class="btn-comment-upload">
                            <label for="upload" class="d-inline-block">
                                <i class="fa fa-camera"></i>
                            </label>
                            <input type="file" name="" id="upload">
                        </div>
                        <input type="text" placeholder="Tulis Komentar" class="input-comment" v-model="commentBox">
                        <div class="btn-comment-send">
                            <a href="#" class="header-icon f-18" @click.prevent="postComment"><i class="fa fa-paper-plane"></i></a>
                        </div>
                    </div>

                    <!-- <div class="input-simple-2 input-green bottom-10 top-5">
                        <input type="text" placeholder="Tulis penawaran, contoh : KB 400">
                    </div>
                    <div class="input-simple-2 input-green bottom-0 top-5">
                        <textarea class="contactTextarea requiredField" placeholder="Tulis komentar kamu disini"></textarea>
                    </div> -->
                </div>
                <!-- <div class="top-10-min">
                    <a href="#" class="button button-red button-rounded button-full button-sm ultrabold uppercase shadow-small top-0">KIRIM SEKARANG</a>
                </div> -->
            </div>
        </div>
        </div>

<script type="text/javascript">

    const app2 = new Vue({
        el: '#app2',
        data:{
            bidComments:{},
            commentBox:'',
            item :{!! $pet->toJson()!!},
            user :{!! Auth::user()->toJson()!!}
        },
        mounted(){
        this.getComments();
        },
        methods: {
            getComments(){
                axios.get('/api/items/'+this.item.id+'/comments')
                .then((response)=>{
                    this.bidComments = response.data
                })
                .catch(function(error){
                    console.log(error);
                });
               var a =  Echo.channel('item.'+this.item.id)
                .listen ('NewBidComment',(e)=>{
                    console.log(e.bidComments);
                })
                console.log(a);
            },
            postComment(){
                axios.post('/api/items/'+this.item.id+'/comment', {
                    api_token:this.user.api_token,
                    comment:this.commentBox
                })
                .then((response)=>{
                    this.bidComments.unshift(response.data);
                    this.commentBox = '';
                })
                .catch((error) => {
            console.log(error);
          })
            },
            listen(){
                Echo.channel('item.'.this.item.id)
                .listen ('NewBidComment',(e)=>{
                    console.log(e.bidComments);
                });
            }
      }
    })
</script>

channels.php

> Broadcast::channel('item.{id}', function ($user, $id) {
>  return $user->id == \App\Item::find($id)->user_id; });

我的活动

<?php

namespace App\Events;

use App\BidComment; 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; use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;

class NewBidComment implements ShouldBroadcastNow {
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $bidComment;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(BidComment $bidComment)
    {
        $this->bidComment = $bidComment;
    }

/**
 * Get the channels the event should broadcast on.
 *
 * @return \Illuminate\Broadcasting\Channel|array
 */
public function broadcastOn()
{
    return new Channel('item.' . $this->bidComment->item->id);
}

public function broadcastWith()
{
    return [
        'comment' => $this->bidComment->comment,
        'created_at' => $this->bidComment->created_at->toFormattedDateString(),
        'user' => [
            'name' => $this->bidComment->user->name,
        ]
    ];
} }

我的控制器

<?php

namespace App\Http\Controllers;

use App\BidComment;
use App\Item;
use Auth;
use Illuminate\Http\Request;
use App\Events\NewBidComment;

class BidCommentController extends Controller
{
    public function index(Item $item)
    {
        return response()->json($item->bidComments()->with('user')->latest()->get());
    }

    public function store(Request $request, Item $item)
    {
        $comment = $item->bidComments()->create([
            'comment' => $request->comment,
            'user_id' => Auth::id()
        ]);

        $comment = BidComment::where('id', $comment->id)->with('user')->first();
        broadcast(new NewBidComment($comment))->toOthers();
        return $comment->toJson();
    }
}

我的大问题是，当我推送一条消息时，哪里出错了，但没有错，但不是实时的（对于其他消息），并且在websocket仪表板中，我的香奈儿没有被订阅。

Answer 1

编辑您的bootstrap.js，然后尝试一下。使用websockets时，我在2-3天的时间里都在同一个错误中苦苦挣扎。

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    encrypted: false,
    wssPort: 6001,
    disableStats: true,
    enabledTransports: ['ws', 'wss'],
});