Summer sale! Save 50% on access to our entire library of courses.Join here →
General discussionGo to solution

Laravel Reverb with Sanctum and NextJs

I have an api using laravel sanctum on docker with reverb installed and i have nextjs on localhost:3000 with pusher and echo installed on it.

I have this in my nextjs

window.Pusher = Pusher;
            const echo = new Echo({
                broadcaster: 'reverb',
                key: 'jejendedjnnjenjendjnejdn',
                wsHost: 'localhost',
                wsPort: '8080',
                wssPort: '8080',
                forceTLS: false,
                enabledTransports: ['ws', 'wss'],
            });

            

            echo.channel('travel').listen('TravelResponseUpdated', async (event) => {
                console.log('hi')
                await getResponse(event);
                // setResponse((prev) => prev + event.response);
            });

            const getResponse = async (event) => {
                try {
                    const response = await axios.get('/api/travel-assistant', {
                        params: {
                            message: event.response
                        }
                    });
                    console.log('Response:', response);
                    setResponse(response.data);
                }catch(error) {
                    setErrors(error);
                }
            }

But the problem is that i do not get any response back from laravel even though i see this in ws network

ws://localhost:8080/app/jejendedjnnjenjendjnej?protocol=7&client=js&version=8.4.0-rc2&flash=false
Request Method:
GET
Status Code:
101 Switching Protocols

I have this in my controller

public function __invoke(Request $request)
    {
        $message = $request->input('message');

        $stream = OpenAI::chat()->createStreamed([
            'model' => 'gpt-4',
            'temperature' => 0.8,
            'messages' => [
                [
                    'role' => 'user',
                    'content' => $message
                ]
            ],
            'max_tokens' => 1024,
        ]);

        foreach ($stream as $response) {
            $text = $response->choices[0]->delta->content ?? '';

            if (connection_aborted()) {
                break;
            }

            if (!empty($text)) {
                broadcast(new TravelResponseUpdated($message, $text));
            }
        }

        // Dispatch an end event
        broadcast(new TravelResponseUpdated($message, '<END_STREAMING_SSE>'));
    }

and this in my TravelResponseUpdated

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


    /**
     * Create a new event instance.
     */
    public function __construct(
        public string $message,
        public string $response
    ) {
    }


    public function broadcastOn(): Channel
    {
        return new Channel('travel');
    }

    public function broadcastWith(): array
    {
        Log::info('Broadcasting response', [
            'message' => $this->message,
            'response' => $this->response,
        ]);
        return [
            'message' => $this->message,
            'response' => $this->response,
        ];
    }
}

and finally this in my api.routes

Route::get('travel-assistant', TravelAssistantController::class);

What am i doing wrong as i do not see any response even if i try to console.log anything inside echo listen

henry75958
henry75958
0
1
161
henry75958
henry75958
Solution

Solved it by using Herd instead of Docker.