Laravel不听收听广播事件？ Vue公司/回声/推

问题描述 投票：1回答：2

我正在我的laravel应用程序中实现一个Vue消息传递组件。消息正在成功发送到Pusher，如调试控制台中所示，但我已经挣扎了三天才能听到laravel听，因此同一私人频道上的用户可以接收消息。

这是基于github https://github.com/AfikDeri/Messenger-App-VueJS-and-Laravel上的这个应用程序

我已经仔细检查了代码中可能存在错误但无法找到问题的所有关键区域。

已经清除了Laravel中的缓存和配置并重复编译了Javascript代码。我正在测试XAMPP版本：7.2.12 / windows 7。

尝试关闭Windows防火墙和Avast Antivirus。

消息正在Pusher调试控制台中接收，并且还通过axios添加到数据库并发送回发送客户端应用程序并推送到发送者的消息数组。他们只是没有被收件人看到，我没有看到任何铬事件广播的痕迹。

Chatppkvua

<template>
    <div class="chat-app">
        <conversation :contact="selectedContact" :messages="messages" @new="saveNewMessage"></conversation>
        <contacts-list :contacts="contacts" @selected="startConversationWith"></contacts-list>
    </div>
</template>
<script>

export default{
    props:{
        user:{
            type: Object,
            required:true
        }
    },

    data(){
        return{
            selectedContact: null,
            messages: [],
            contacts: [],
        }
    },
    mounted(){

        Echo.private(`messages.${this.user.id}`)
            .listen('NewMessage', (e) => {
             //   console.log('Broadcast received.');
                this.handleIncoming(e.message);
            });
         axios.get('/contacts')
             .then((response) => {
                 console.log(response.data);
                 this.contacts = response.data;
         });

    },

    methods:{
        startConversationWith(contact){
            axios.get(`/conversation/${contact.id}`)
                .then((response) =>{
                    this.messages = response.data;
                    this.selectedContact = contact;
                    }

                )
        },
        saveNewMessage(message){
            this.messages.push(message);
        },
        handleIncoming(message) {
                alert(JSON_stringify(message));
            if (this.selectedContact && message.from_id == this.selectedContact.id) {
                this.saveNewMessage(message);
                return;
            }

        },
    }

  }
</script>

在App \ Events \ NewMessage.php中

namespace App\Events;

use App\Message;
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 NewMessage implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct(Message $message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return new PrivateChannel('messages.' . $this->message->to_id);
    }

    public function broadcastWith()
    {
        $this->message->load('fromContact');

        return ["message" => $this->message];
    }
}

在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,
    //cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    key: '455936d5b071dd92ef25',
    cluster: 'us3',
    encrypted: false
});
require('./echo');
console.log(window.Echo.options);

在App / config / app.php中

 Illuminate\Broadcasting\BroadcastServiceProvider::class,

 App\Providers\BroadcastServiceProvider::class,

// Are uncommented

在BroadcastServiceProvider中

public function boot()
    {
     // Broadcast::routes(); 

/*changed this to fix a pusher auth error
     only prob is it routes pusher to /home after authentication but without error */

        Broadcast::routes(['middleware' => 'auth']);
        require base_path('routes/channels.php');
    }

在channels.php中：

Broadcast::channel('messages.{$id}', function ($user, $id) {
    //dd($user->id, $id);
    return $user->id === (int) $id;
});

在ContactController中

 public function send(Request $request){
       $message = new Message();
       $message->from_id = auth()->user()->id;
       $message->to_id = $request->contact_id;
       $message->text = $request->text;
       $message->conversation_id = 1;

       if($message->save()) {

           broadcast(new NewMessage($message));
           return response()->json($message);
       }
       else{
           return response()->json('failed');
       }

在chrome>我看到这些消息

Pusher : State changed : connecting -> connected with new socket ID 52.5078004

registerEventsMessage called  

//I think the next error is when I refreshed the browser forcing the Vue app to reconnect.

{event: "pusher:error", data: {code: 4009, message: "Connection not authorized within timeout"}}
data: {code: 4009, message: "Connection not authorized within timeout"}
event: "pusher:error"

//This appeared initially but not when messages were sent

No callbacks on presence-chat for pusher:subscription_error  
No callbacks on private-messages.14 for pusher:subscription_error

当新消息发送到其频道但未发生任何事情时，聊天应用程序应在收件人聊天流中更新。我没有在chrome控制台中看到任何错误。用户ID和动态通道名称似乎正确呈现。

我在刷新浏览器时看到此错误，但在该消息传递似乎正常工作之后。推送器控制台中没有显示错误，我可以看到所有消息都在那里收到。

我对Laravel和Vue比较陌生。非常感谢任何有关如何排除故障的帮助或指导。

vuejs2 broadcast laravel-5.7 laravel-echo pusher-js
2个回答
0
投票

显然缺少一些东西。因为你正在关注https://github.com/AfikDeri/Messenger-App-VueJS-and-Laravel/issues上的教程检查问题

0
投票

我想知道我是否没有使用xampp打开正确的端口？ pusher / echo可以监听哪些端口？

C：\ Users \ Rob> netstat -a -p TCP -o -n

Active Connections

  Proto  Local Address          Foreign Address        State           PID
  TCP    0.0.0.0:80             0.0.0.0:0              LISTENING       2112
  TCP    0.0.0.0:135            0.0.0.0:0              LISTENING       516
  TCP    0.0.0.0:443            0.0.0.0:0              LISTENING       2112
  TCP    0.0.0.0:445            0.0.0.0:0              LISTENING       4
  TCP    0.0.0.0:3306           0.0.0.0:0              LISTENING       10832
  TCP    0.0.0.0:8733           0.0.0.0:0              LISTENING       4
  TCP    0.0.0.0:9007           0.0.0.0:0              LISTENING       4
  TCP    0.0.0.0:27275          0.0.0.0:0              LISTENING       1568
  TCP    0.0.0.0:49152          0.0.0.0:0              LISTENING       796
  TCP    0.0.0.0:49153          0.0.0.0:0              LISTENING       892
  TCP    0.0.0.0:49154          0.0.0.0:0              LISTENING       1088
  TCP    0.0.0.0:49157          0.0.0.0:0              LISTENING       864
  TCP    0.0.0.0:49158          0.0.0.0:0              LISTENING       852
  TCP    0.0.0.0:49159          0.0.0.0:0              LISTENING       1100
  TCP    127.0.0.1:3306         127.0.0.1:53658        TIME_WAIT       0
  TCP    127.0.0.1:5354         0.0.0.0:0              LISTENING       2012
  TCP    127.0.0.1:5354         127.0.0.1:49155        ESTABLISHED     2012
  TCP    127.0.0.1:5354         127.0.0.1:49156        ESTABLISHED     2012
  TCP    127.0.0.1:5939         0.0.0.0:0              LISTENING       2396
  TCP    127.0.0.1:5939         127.0.0.1:49263        ESTABLISHED     2396
  TCP    127.0.0.1:6942         0.0.0.0:0              LISTENING       7956
  TCP    127.0.0.1:8000         0.0.0.0:0              LISTENING       8212
  TCP    127.0.0.1:8000         127.0.0.1:53643        TIME_WAIT       0
  TCP    127.0.0.1:8000         127.0.0.1:53649        TIME_WAIT       0
  TCP    127.0.0.1:8000         127.0.0.1:53690        TIME_WAIT       0
  TCP    127.0.0.1:8000         127.0.0.1:53691        TIME_WAIT       0
  TCP    127.0.0.1:8000         127.0.0.1:53726        TIME_WAIT       0
  TCP    127.0.0.1:8000         127.0.0.1:53728        ESTABLISHED     8212
  TCP    127.0.0.1:8000         127.0.0.1:53733        TIME_WAIT       0
  TCP    127.0.0.1:12025        0.0.0.0:0              LISTENING       1568
  TCP    127.0.0.1:12110        0.0.0.0:0              LISTENING       1568
  TCP    127.0.0.1:12119        0.0.0.0:0              LISTENING       1568
  TCP    127.0.0.1:12143        0.0.0.0:0              LISTENING       1568
  TCP    127.0.0.1:12465        0.0.0.0:0              LISTENING       1568
  TCP    127.0.0.1:12563        0.0.0.0:0              LISTENING       1568
  TCP    127.0.0.1:12993        0.0.0.0:0              LISTENING       1568
  TCP    127.0.0.1:12995        0.0.0.0:0              LISTENING       1568
  TCP    127.0.0.1:27015        0.0.0.0:0              LISTENING       1980
  TCP    127.0.0.1:27275        0.0.0.0:0              LISTENING       1568
  TCP    127.0.0.1:49155        127.0.0.1:5354         ESTABLISHED     1980
  TCP    127.0.0.1:49156        127.0.0.1:5354         ESTABLISHED     1980
  TCP    127.0.0.1:49263        127.0.0.1:5939         ESTABLISHED     1684
  TCP    127.0.0.1:49269        127.0.0.1:49270        ESTABLISHED     1684
  TCP    127.0.0.1:49270        127.0.0.1:49269        ESTABLISHED     1684
  TCP    127.0.0.1:49541        127.0.0.1:49542        ESTABLISHED     7956
  TCP    127.0.0.1:49542        127.0.0.1:49541        ESTABLISHED     7956
  TCP    127.0.0.1:49543        127.0.0.1:49544        ESTABLISHED     7956
  TCP    127.0.0.1:49544        127.0.0.1:49543        ESTABLISHED     7956
  TCP    127.0.0.1:53644        127.0.0.1:8000         TIME_WAIT       0
  TCP    127.0.0.1:53650        127.0.0.1:8000         TIME_WAIT       0
  TCP    127.0.0.1:53657        127.0.0.1:3306         TIME_WAIT       0
  TCP    127.0.0.1:53658        127.0.0.1:3306         TIME_WAIT       0
  TCP    127.0.0.1:53692        127.0.0.1:8000         TIME_WAIT       0
  TCP    127.0.0.1:53693        127.0.0.1:8000         TIME_WAIT       0
  TCP    127.0.0.1:53728        127.0.0.1:8000         ESTABLISHED     7764
  TCP    127.0.0.1:53735        127.0.0.1:8000         TIME_WAIT       0
  TCP    127.0.0.1:53760        127.0.0.1:9229         SYN_SENT        5912
  TCP    127.0.0.1:63342        0.0.0.0:0              LISTENING       7956
  TCP    192.168.1.116:139      0.0.0.0:0              LISTENING       4
  TCP    192.168.1.116:49236    77.234.41.235:80       ESTABLISHED     1568
  TCP    192.168.1.116:50809    66.135.205.94:443      ESTABLISHED     1136
  TCP    192.168.1.116:53013    23.35.181.178:443      ESTABLISHED     7764
  TCP    192.168.1.116:53025    54.186.190.8:443       ESTABLISHED     7764
  TCP    192.168.1.116:53456    192.184.69.164:443     CLOSE_WAIT      7764
  TCP    192.168.1.116:53460    23.220.197.16:443      ESTABLISHED     7764
  TCP    192.168.1.116:53461    151.101.65.69:443      ESTABLISHED     7764
  TCP    192.168.1.116:53463    104.16.31.34:443       ESTABLISHED     7764
  TCP    192.168.1.116:53475    192.184.69.180:443     CLOSE_WAIT      7764
  TCP    192.168.1.116:53476    172.217.1.226:443      ESTABLISHED     7764
  TCP    192.168.1.116:53481    77.234.41.223:443      CLOSE_WAIT      7764
  TCP    192.168.1.116:53487    172.217.9.2:443        ESTABLISHED     7764
  TCP    192.168.1.116:53504    108.177.9.157:443      ESTABLISHED     7764
  TCP    192.168.1.116:53506    172.217.14.162:443     ESTABLISHED     7764
  TCP    192.168.1.116:53511    192.184.69.150:443     CLOSE_WAIT      7764
  TCP    192.168.1.116:53627    213.227.173.132:5938   ESTABLISHED     2396
  TCP    192.168.1.116:53631    23.52.96.18:80         TIME_WAIT       0
  TCP    192.168.1.116:53722    34.222.204.130:80      ESTABLISHED     7764
  TCP    192.168.1.116:53727    34.222.204.130:80      ESTABLISHED     7764
  TCP    192.168.1.116:53742    77.234.41.53:80        TIME_WAIT       0
  TCP    192.168.1.116:53744    77.234.41.56:80        TIME_WAIT       0
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.