如何使用带有 laravel 和 vue js 的推送器来创建实时聊天？

Question

我是 laravel 的新手，我与 laravel 和 vue js 以及 pusher 进行了实时聊天。我想代码一切都很好，但聊天不是实时的。我需要帮助，只是想知道我的代码哪里错了。下面是我的代码。

<?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;

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

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

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

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

    public function broadcastAs()
    {
        return 'message';
    }
}

<template>
  <div class="composer">
    <textarea v-model="message" @keydown.enter="send" placeholder="Message..."></textarea>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: ""
    };
  },
  methods: {
    send(e) {
      e.preventDefault();

      if (this.message == "") {
        return;
      }

      this.$emit("send", this.message);
      this.message = "";
    }
  }
};
</script>

<style>
.composer textarea {
  width: 96%;
  margin: 10px;
  resize: none;
  border-radius: 3px;
  border: 1px solid lightgray;
  padding: 6px;
}
</style>

这是我尝试过的。一切正常。我只需要刷新页面，但我希望它不刷新页面。我要实时的。请让我知道我的代码哪里错了。我不知道，我按照在线教程进行操作，效果很好，但我不知道我的代码问题出在哪里。任何帮助将不胜感激。

Answer 1

您还没有订阅您的频道，也没有在您的代码中收听您的事件。