{"id":1960,"date":"2022-05-11T21:56:16","date_gmt":"2022-05-11T20:56:16","guid":{"rendered":"https:\/\/www.codingfriends.com\/?p=1960"},"modified":"2022-05-11T21:56:34","modified_gmt":"2022-05-11T20:56:34","slug":"laravel-websockets-some-gotchas","status":"publish","type":"post","link":"https:\/\/www.codingfriends.com\/index.php\/2022\/05\/11\/laravel-websockets-some-gotchas\/","title":{"rendered":"Laravel Websockets, some gotchas!"},"content":{"rendered":"\n

There is a really nice websocket composer package for laravel but a couple of issues that you may hit along the way! So the package is by beyondcode and it is here<\/a>. A really nice package, but here are some gotchas that I came across.<\/p>\n\n\n\n

  1. 403 Forbidden error on the auth URL<\/li>
  2. 401 Unauthorized error on the auth URL<\/li>
  3. Using namespaces within the listen to Echo method<\/li><\/ol>\n\n\n\n

    So, the first 2 are kinder within the manual but I didn’t read it and in turn came up with the issues!. So going to split the 3 issues into separate areas below<\/p>\n\n\n\n

    403 Forbidden error on the auth URL<\/h2>\n\n\n\n

    When you aren’t using the websocket locally, then you may hit request error of 403 and this is because of the gate defined within the Beyondcode class WebSocketsServiceProvider and method called registerDashboardGate <\/p>\n\n\n\n

    protected function registerDashboardGate() { Gate::define(‘viewWebSocketsDashboard’, function ($user = null) { return app()->environment(‘local’); });<\/p><\/blockquote>\n\n\n\n

    and this as you can tell, is checking if the current application is running within the “local” environment setting and hence why you didn’t notice it whilst testing locally, the problem is within the config\/websockets.php file<\/p>\n\n\n\n

    ‘middleware’ => <\/p>

    [ ‘web’, Authorize::class, ],<\/p><\/blockquote>\n\n\n\n

    where the Authorize::class is the beyondcode class calling the above method, so we just need to replace with our authorization middleware e.g. jwt.auth.<\/p>\n\n\n\n

    401 Unauthorized error on the auth URL<\/h2>\n\n\n\n

    The next issue I noticed was an error similar to <\/p>\n\n\n\n

    $key cannot obtain from null<\/p><\/blockquote>\n\n\n\n

    This is because of the AuthenticateDashboard method that has<\/p>\n\n\n\n

    $app = App::findById($request->header(‘x-app-id’));
    $broadcaster = new PusherBroadcaster(new Pusher( $app->key,<\/p><\/blockquote>\n\n\n\n

    This is because the x-app-id wasn’t being passed in within the auth request, so altering the laravel Echo javascript object creation to include the following key value pair (please note I change the websockets.php path configuration to “websockets”<\/p>\n\n\n\n

    window.Echo = new Echo({ ……. <\/p>

    authorizer : (channel, options) => {
    return {
    authorize: (socketId, callback) => {
    axios.post(‘\/websockets\/auth’, {
    socket_id : socketId,
    channel_name: channel.name,
    },
    { headers: { ‘x-app-id’: ‘<your ID from within the websockets.php configuration file, normally this is apps>’ } })
    .then((response) => {
    \/\/ error report
    callback(false, response.data)
    })
    .catch((error) => {
    \/\/ error report
    callback(true, error)
    \/\/ throw new Error(error)
    })
    },
    }
    },<\/p><\/blockquote>\n\n\n\n

    Using namespaces within the listen to Echo method<\/h2>\n\n\n\n

    The last part was the namespace issue within the echo listen to the method, where I don’t want to define the namespace of the broadcast every time like (where the App.Events was the namespace within php)<\/p>\n\n\n\n

    window.Echo.private(`dashboard.${dashboardID}’) .listen(‘App.Events.DashboardUpdate’, (e) => { e.message.value.forEach(function (value) { vm.$set(vm.data, value.key, value.value) }) })<\/p><\/blockquote>\n\n\n\n

    So, like the above fix, we just need to add an option to the new Echo object within the javascript<\/p>\n\n\n\n

    window.Echo = new Echo({ ……. <\/p>

    namespace : ‘App.Events’,<\/p><\/blockquote>\n\n\n\n

    Those were the things that caused me to think, so thought it may be a good idea to post about it encase anyone else has the same issue, if you need more information on each please say!<\/p>\n","protected":false},"excerpt":{"rendered":"

    There is a really nice websocket composer package for laravel but a couple of issues that you may hit along the way! So the package is by beyondcode and it is here. A really nice package, but here are some gotchas that I came across. 403 Forbidden error on the auth URL 401 Unauthorized error … Continue reading Laravel Websockets, some gotchas!<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[430,17],"tags":[428,429],"class_list":["post-1960","post","type-post","status-publish","format-standard","hentry","category-laravel","category-php","tag-lavarvel","tag-websockets"],"_links":{"self":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/1960","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/comments?post=1960"}],"version-history":[{"count":2,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/1960\/revisions"}],"predecessor-version":[{"id":1962,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/posts\/1960\/revisions\/1962"}],"wp:attachment":[{"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/media?parent=1960"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/categories?post=1960"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codingfriends.com\/index.php\/wp-json\/wp\/v2\/tags?post=1960"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}