Laravel Websockets Error in connection Error during WebSocket handshake: Unexpected response code: 404

Question

Im trying to set up laravel websockets on localhost using this library

And I am getting this error

I have installed the package and started the service on my localhost running php artisan websockets:serve

my Bootstrap.js is:

import Echo from "laravel-echo"

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

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: process.env.MIX_PUSHER_APP_KEY,
    wsHost: window.location.hostname,
    wsPort: 6001,
    disableStats: true,
});
window.Echo.channel('DemoChannel').listen('WebsocketDemoEvent',(e) => function() {
    console.log(e);
});

score -1 · Answer 1 · answered Jan 23 '21 at 07:43

create a new middleware: app/Http/Middleware/cors.php

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
    }
}

add the cors middleware to app/Http/Kernel.php

protected $routeMiddleware = [
    //default laravel middleware
    'cors' => \App\Http\Middleware\Cors::class,
];

add the new cors middleware to your route

Route::get('/broadcast', function () {
    broadcast(new hello());
});
})-> middleware('cors');

---caution--- this will now accept requests from ANYWHERE.

this is fine on localhost but when you move to a live server you need to change:

->header('Access-Control-Allow-Origin', '*')

to

->header('Access-Control-Allow-Origin', 'http://www.yourdomain.com')

or you need to create an api key to pass along with each request so you can have the public api (not reccomended but is a viable workaround)

can you share your code with those additions? so i can see what's going on — aidan byrne, Jan 23 '21 at 13:46
looking at the error again, i see it's trying to communicate with pusher, if you are hosing your own ws server with ws:serve, what are you sending to pusher? — aidan byrne, Jan 23 '21 at 14:18
@aidanbyrne if you look closer it is a fallback, it tries the its own WShost first that fails then it fallsback on the pusher main site. So they quetion is more why does the first request fail. — Mellester, Dec 14 '21 at 13:23

Laravel Websockets Error in connection Error during WebSocket handshake: Unexpected response code: 404

1 Answers1