why when i serve the websockets its give me this error

Exception BeyondCode\LaravelWebSockets\WebSockets\Exceptions\UnknownAppKey thrown: Could not find app key anyKey.
Unknown app id: exception BeyondCode\LaravelWebSockets\WebSockets\Exceptions\UnknownAppKey thrown: Could not find app key anyKey..

Hi
I install and run app but when I registered as user and login but i can not see other user which exist on the user table.
How can solve this problem.
Thanks

@LaravelGroup @hkp22

Found your repo from your YouTube channel. These steps did not work for me. Is there an .env file setting I need to change?

- Clone this repository git clone [email protected]:qirolab/Laravel-WebSockets-Chat-Example.git
- composer install
- php artisan key:generate
- cp .env.example .env and configure your database in .env file.
- Run migration to create tables in database. php artisan migrate
- Final step run websockets server. php artisan websockets:serve

Doing this I see:

$ php artisan websockets:serve
Starting the WebSocket server on port 6001...

And going to http://localhost:6001/ or http://localhost:8000 does nothing - the page does not load.

Im not using bacis auth(), I used this
<chats :user="{{ UserController::getUserName() }}"></chats>
original: <chats :user="{{ auth()->user() }}"></chats>
UserController::getUserName() response with name like "Bob", after that im getting: [Vue warn]: Property or method "Bob" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

Hello sir,

i am not getting the message at a time
chat message is come on page refresh

is Laravel echo unable to listen MessageSent event ?

          Echo.join('chat')
            .listen('MessageSent',(event) => {
                this.messages.push(event.message);
            })

Event

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 PresenceChannel('chat');
}

what mistake i am doing

can you please help

Thank you.

Very Nice project and all working good!

I hope to improve this by implementing private chats

Presence and Private Channel Not working in Laravel Sanctum SPA Authentication. It's only working in public channel.

#Please help me. I have been struggling last 7 days.

I am using Qiralab Sanctum Github Repo also so here is not problem in authentication I think so.

Here is my github code:
https://github.com/joneyspark/spa-chat-ws

• Websockets are configured and it's working public channel

#MessageSent.php

class MessageSent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

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

    public function broadcastOn()
    {
        return new PresenceChannel('chat');
    }
}

#ChatsController.php

class ChatsController extends Controller
{
    public function fetch_messages()
    {
        return Message::with('user')->get();
    }
    public function send_messages(Request $request)
    {
        $message = auth()->user()->messages()->create([
        'message' => $request->message
        ]);

        broadcast(new MessageSent($message->load('user')))->toOthers();

        return ['status' => 'success'];
    }
}

#channels.php

Broadcast::channel('chat', function ($user) {
    return $user;
});

#BroadcastServiceProvider

class BroadcastServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Broadcast::routes(['middleware' => ['auth:sanctum']]);
        require base_path('routes/channels.php');
    }
}

#Vue CLI

import Echo from "laravel-echo";
import Request from "./apis/Request";

window.Pusher = require("pusher-js");

window.Echo = new Echo({
  broadcaster: "pusher",
  key: process.env.VUE_APP_WEBSOCKETS_KEY,
  wsHost: process.env.VUE_APP_WEBSOCKETS_SERVER,
  wsPort: 6001,
  forceTLS: false,
  disableStats: true,
  enabledTransports: ["ws", "wss"],
  authorizer: (channel, options) => {
    console.log("OPTIONS>>", options);
    return {
      authorize: (socketId, callback) => {
        Request.POST_REQ("/broadcasting/auth", {
          socket_id: socketId,
          channel_name: channel.name,
          withCredentials: true,
        })
          .then((response) => {
            callback(false, response.data);
            console.log("RESPONSE>>", response);
          })
          .catch((error) => {
            callback(true, error);
          });
      },
    };
  },
});

#Chat.vue

created() {
    this.fetchMessages();
    window.Echo.join("chat").listen("MessageSent", (event) => {
      console.log(event.message);
      this.messages.push(event.message);
    });
  },

#.env

VUE_APP_WEBSOCKETS_KEY = local
VUE_APP_WEBSOCKETS_SERVER = 127.0.0.1