Pusher: Callback function not executing with standalone Laravel (API) Vue.js(client) apps

Question

Please I need help with pusher integration in my Laravel & Vue js project. NOT SPA (ie separate Apps (Laravel - API & Vuejs- frontend)

The goal is to establish a real-time chat between two users.

The whole cycle is working perfectly well but the pusher callback is not executing, therefore making the chat function limited to the app API level only. It is not real-time which is why I'm integrating pusher to handle that.

Please see the code snippets below, ready to provide more on request. I've spent days on this, still can't figure out what I'm doing wrong.

Thanks in anticipation.

CommentController

 /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $user = Auth::user();

        $validator = Validator::make($request->all(), [
            'bid_id' => 'required',
            'message' => ['required', 'string'],
        ]);

        if ($validator->fails()) {
            return response()->json(["error" => $validator->errors()], 400);
        }
        try {

            $comment = $user->comments()->create([
                'bid_id' => $request->bid_id,
                'message' => $request->message,
            ]);
            // Fire the comment broadcast event
            // event(new CommentEvent($comment));
            broadcast(new CommentEvent($user, $comment->load('user')))->toOthers();
        } catch (Exception $exception) {
            Log::error("Error while creating Comment" . $exception->getMessage());
        } finally {
            return response()->json(['comment' => $comment], 201);
        }
    }

CommentEvent.php

<?php

namespace App\Events;

use App\Models\Comment;
use App\Models\User;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class CommentEvent implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    /**
     * Create a new event instance.
     *
     * @param  $comment
     *
     * @return void
     */
    public $user;
    public $comment;

    public function __construct(User $user, Comment $comment)
    {
        $this->user = $user;
        $this->comment = $comment;
    }
    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new PresenceChannel('comment-channel');

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

Main.js

import Pusher from "pusher-js";

/* -------------------------------------------------------------------------- */
/*                             PUSHER CONFIG                                  */
/* -------------------------------------------------------------------------- */
Pusher.logToConsole = true;
let pusher = new Pusher(process.env.VUE_APP_PUSHER_APP_KEY,{
  cluster: process.env.VUE_APP_PUSHER_APP_CLUSTER,
  encrypted: false,
});
Vue.prototype.$pusher = pusher;

App.vue

<script>
export default {
  name: "App",
  components: {},
  created() {
      let channel = this.$pusher.subscribe("comment-channel");
      channel.bind("pusher:subscription_succeeded", function(members) {
          console.log(members);
          console.log("succesfully subscribed!");
      });
      channel.bind("CommentEvent", function(data) {
          console.log(data);
          this.$store.commit("ADD_COMMENT", data.comment);
      });

      
  },

  methods: {
      
  },
};
</script>

Answer 1

I've been able to resolve this using.

but I had to switch tech. The real-time chat system of my app is now driven by socket.io, Redis and a simple node js server wrapped within the API

I'll be willing to help with code snippets if you need me to.