laravel - Laravel Echo 无法使用 websocket Laravel(Beyondode) 订阅 Chanel
问题描述
我正在尝试使用刀片(不使用 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");
刀片.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">& 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>
频道.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 仪表板中我的 chanel 没有被订阅。
解决方案
编辑您的 bootstrap.js 并尝试一下。当我使用 websockets 时,我在同样的错误中挣扎了 2-3 天。当您在实时服务器中使用 websockets 时,您必须使用 https 并定义您的 ssl 证书路径到 websockets.php。
签出下面的配置。还要确保您的 ssl 证书路径具有正确的读写访问权限。
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'],
auth: {
headers: {
'X-CSRF-TOKEN': window.App.csrfToken,
},
},
});
还编辑您的 config/broadcasting.php
'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'),
'host' => '127.0.0.1',
'encrypted' => false,
'port' => 6001,
'scheme' => 'https',
'curl_options' => [
CURLOPT_SSL_VERIFYHOST => 0,
CURLOPT_SSL_VERIFYPEER => 0,
]
],
],
然后打开 config/websockets.php
'ssl' => [
/*
* Path to local certificate file on filesystem. It must be a PEM encoded file which
* contains your certificate and private key. It can optionally contain the
* certificate chain of issuers. The private key also may be contained
* in a separate file specified by local_pk.
*/
'local_cert' => 'local_certificate_key_path', // fullchain.pem
/*
* Path to local private key file on filesystem in case of separate files for
* certificate (local_cert) and private key.
*/
'local_pk' => 'your_private_key_path', // privkey.pem
/*
* Passphrase for your local_cert file.
*/
'passphrase' => env('LARAVEL_WEBSOCKETS_SSL_PASSPHRASE', null),
'verify_peer' => false,
],
推荐阅读
- android - 如何将数据从 Android 应用程序插入到 Excel 中?
- c++ - 具有多个屏幕的 QT Quick C++ 应用程序
- django - 如何通过href将变量从javascript传递到url:django
- php - 根据 PHP 上的另一个数组对数组的元素进行排序
- javascript - 在JS中的一个dom选择下分组css样式
- reactjs - 为什么括号内的代码可以在 typescript / es6 中使用?
- java - 为什么java编译器不按顺序编译代码(从上到下)?
- javascript - 比较多个数据列表并显示不同的结果
- python - Django从过滤的外键对象中过滤对象
- excel - 在多个选定单元格VBA上使用方程x-TRUNC(x)