Real time react web app with pusher and laravelLaravel and Pusher - API message not sentLaravel 5 broadcast...

Eww, those bytes are gross

How to acknowledge an embarrassing job interview, now that I work directly with the interviewer?

Which branches of mathematics can be done just in terms of morphisms and composition?

Incompressible fluid definition

Activating a Alphanet Faucet Wallet Remotely (without tezos-client)

Table enclosed in curly brackets

What is the purpose of easy combat scenarios that don't need resource expenditure?

Is it a fallacy if someone claims they need an explanation for every word of your argument to the point where they don't understand common terms?

Why does the DC-9-80 have this cusp in its fuselage?

Connecting top and bottom of adjacent circles

How should I state my MS degree in my CV when it was in practice a joint-program?

What's a good word to describe a public place that looks like it wouldn't be rough?

Metadata API deployments are failing in Spring '19

What's the purpose of these copper coils with resitors inside them in A Yamaha RX-V396RDS amplifier?

4 Spheres all touching each other??

Do commercial flights continue with an engine out?

Criticizing long fiction. How is it different from short?

Find the number of ways to express 1050 as sum of consecutive integers

Does Windows 10's telemetry include sending *.doc files if Word crashed?

Where is this triangular-shaped space station from?

What is the wife of a henpecked husband called?

Am I a Rude Number?

How to avoid being sexist when trying to employ someone to function in a very sexist environment?

F1 visa even for a three-week course?



Real time react web app with pusher and laravel


Laravel and Pusher - API message not sentLaravel 5 broadcast authentication endpoint route not working. JSON returned from webapp was invalidLaravel BroadcastingPusher Doesn't Broadcast on Private Channels -PHP/LaravelAuthenticating Pusher using React Native and a Laravel Backendlaravel 5.4 pusher(laravel echo) 403 error with private channelBroadcast private channels do not work in Laravel/PusherLaravel Broadcasting with Pusher isn't Listening with VueLaravel Echo + Pusher subscription_error on private channelGetting 403, error when using private channels with laravel broadcast













8















I want to use pusher for realtime chat and it works properly with public channel but when I use private channel I got this error :



pusher.js:1333 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html


this is laravel code :



Event :



use Dispatchable, InteractsWithSockets, SerializesModels;

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

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

/**
* Get the channels the event should broadcast on.
*
* @return IlluminateBroadcastingChannel|array
*/
public function broadcastOn()
{
return new PrivateChannel('chat');
}


channels.php :



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


BroadcastServiceProvider :



  class BroadcastServiceProvider extends ServiceProvider
{
/**
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
Broadcast::routes(['middleware' => ['auth:api']]);

require base_path('routes/channels.php');
}
}


and this is react js code :



  export const onChatRcv = () => {
try {
Pusher.logToConsole = true;

var pusher = new Pusher('83*********63c912f5', {
cluster: 'ap2',
forceTLS: true,
authTransport: 'jsonp',
authEndpoint: `${baseUrl}broadcasting/auth`,
headers: {
'Authorization' : `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjRhZTA1YjM2ZGNhN2I5NWI4NTJiZjFhOWRiZTQ5ZWE1NzFmNTNkMTE4NWQyOWU0Mjk0ZDI5NmJmZThhZTE0OGQzNzcwODM1MjEzYTg2NzA1In0.eyJhdWQiOiIxIiwianRpIjoiNGFlMDViMzZkY2E3Yjk1Yjg1MmJmMWE5ZGJlNDllYTU3MWY1M2QxMTg1ZDI5ZTQyOTRkMjk2YmZlOGFlMTQ4ZDM3NzA4MzUyMTNhODY3MDUiLCJpYXQiOjE1NTExMDQ3NTYsIm5iZiI6MTU1MTEwNDc1NiwiZXhwIjoxNTgyNjQwNzU2LCJzdWIiOiI1Iiwic2NvcGVzIjpbXX0.HOnNyhQQ48Hj4AZdP5vS5Zd5AfUr5XNP4zgrgR_f2-aAgFw4eWrNeHQSfdJt071_ChRINmv5W7O1LExxGIvCoSjiYFYPmw_8WjdFI_81WHoqM69ve-bgriK6eO1Yf0N3v3fc1DvPk2ZFYXXDmQbMLLXUyUqfjoYGty8AMgxCDulZ1tRMZ2rOVQZJ0ePbTw1eHQdMzBWG36fXWEbczLR99-_Dn8ta8P6iq0XWDr0cimlFzdHsG66iMeI0xWCJ1DRbxzr2LuX0j5zKe0j0_WNZJNbAFfeY87m7FDHjbHTNB1IB9Meh8kITV1mPQLc2n812j2QgW19KKWgpgZcy4tlfIBfT0x-aQAMkIUtmcHW0aEJ8RkHWKZYhyQ8yV61RIL3IxLpepHUVds8CZnxDGQ2NQ4bmb8UE7xQkV-KpmF5fZ0NCCxMuMpYdVkd0t9gc_Jra07_Sq7HbEJHEZbPCfhbDscAZQr2U9ddVaKwiGuFjSGXvOKS_lUAB91lBWada3k15FG2XoBfAv94mai2aWo41sep0nmlBKXPCVbWiczbeNL6ZXm_aE-tkLNS-Pc0veXogxZIaKVhFnRsW5qHTXI8v6sU6Nd9pzrIe173FqXQtzpA_tqrmdWU-lU-u484hWkPn2OcQcSckANpx-7_EVhrAPSfV7-WWamMRp2EC-3uFpmQ`,
},
});

var privateChannel = pusher.subscribe('private-chat' );
privateChannel.bind('App\Events\MessageSent', function(data) {
console.log(data);
});

} catch (error) {
console.error(error);
}
}


what is the problem?
it works when we use public channel but in private channel, we got this warning



Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html









share|improve this question





























    8















    I want to use pusher for realtime chat and it works properly with public channel but when I use private channel I got this error :



    pusher.js:1333 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html


    this is laravel code :



    Event :



    use Dispatchable, InteractsWithSockets, SerializesModels;

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

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

    /**
    * Get the channels the event should broadcast on.
    *
    * @return IlluminateBroadcastingChannel|array
    */
    public function broadcastOn()
    {
    return new PrivateChannel('chat');
    }


    channels.php :



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


    BroadcastServiceProvider :



      class BroadcastServiceProvider extends ServiceProvider
    {
    /**
    * Bootstrap any application services.
    *
    * @return void
    */
    public function boot()
    {
    Broadcast::routes(['middleware' => ['auth:api']]);

    require base_path('routes/channels.php');
    }
    }


    and this is react js code :



      export const onChatRcv = () => {
    try {
    Pusher.logToConsole = true;

    var pusher = new Pusher('83*********63c912f5', {
    cluster: 'ap2',
    forceTLS: true,
    authTransport: 'jsonp',
    authEndpoint: `${baseUrl}broadcasting/auth`,
    headers: {
    'Authorization' : `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjRhZTA1YjM2ZGNhN2I5NWI4NTJiZjFhOWRiZTQ5ZWE1NzFmNTNkMTE4NWQyOWU0Mjk0ZDI5NmJmZThhZTE0OGQzNzcwODM1MjEzYTg2NzA1In0.eyJhdWQiOiIxIiwianRpIjoiNGFlMDViMzZkY2E3Yjk1Yjg1MmJmMWE5ZGJlNDllYTU3MWY1M2QxMTg1ZDI5ZTQyOTRkMjk2YmZlOGFlMTQ4ZDM3NzA4MzUyMTNhODY3MDUiLCJpYXQiOjE1NTExMDQ3NTYsIm5iZiI6MTU1MTEwNDc1NiwiZXhwIjoxNTgyNjQwNzU2LCJzdWIiOiI1Iiwic2NvcGVzIjpbXX0.HOnNyhQQ48Hj4AZdP5vS5Zd5AfUr5XNP4zgrgR_f2-aAgFw4eWrNeHQSfdJt071_ChRINmv5W7O1LExxGIvCoSjiYFYPmw_8WjdFI_81WHoqM69ve-bgriK6eO1Yf0N3v3fc1DvPk2ZFYXXDmQbMLLXUyUqfjoYGty8AMgxCDulZ1tRMZ2rOVQZJ0ePbTw1eHQdMzBWG36fXWEbczLR99-_Dn8ta8P6iq0XWDr0cimlFzdHsG66iMeI0xWCJ1DRbxzr2LuX0j5zKe0j0_WNZJNbAFfeY87m7FDHjbHTNB1IB9Meh8kITV1mPQLc2n812j2QgW19KKWgpgZcy4tlfIBfT0x-aQAMkIUtmcHW0aEJ8RkHWKZYhyQ8yV61RIL3IxLpepHUVds8CZnxDGQ2NQ4bmb8UE7xQkV-KpmF5fZ0NCCxMuMpYdVkd0t9gc_Jra07_Sq7HbEJHEZbPCfhbDscAZQr2U9ddVaKwiGuFjSGXvOKS_lUAB91lBWada3k15FG2XoBfAv94mai2aWo41sep0nmlBKXPCVbWiczbeNL6ZXm_aE-tkLNS-Pc0veXogxZIaKVhFnRsW5qHTXI8v6sU6Nd9pzrIe173FqXQtzpA_tqrmdWU-lU-u484hWkPn2OcQcSckANpx-7_EVhrAPSfV7-WWamMRp2EC-3uFpmQ`,
    },
    });

    var privateChannel = pusher.subscribe('private-chat' );
    privateChannel.bind('App\Events\MessageSent', function(data) {
    console.log(data);
    });

    } catch (error) {
    console.error(error);
    }
    }


    what is the problem?
    it works when we use public channel but in private channel, we got this warning



    Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html









    share|improve this question



























      8












      8








      8








      I want to use pusher for realtime chat and it works properly with public channel but when I use private channel I got this error :



      pusher.js:1333 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html


      this is laravel code :



      Event :



      use Dispatchable, InteractsWithSockets, SerializesModels;

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

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

      /**
      * Get the channels the event should broadcast on.
      *
      * @return IlluminateBroadcastingChannel|array
      */
      public function broadcastOn()
      {
      return new PrivateChannel('chat');
      }


      channels.php :



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


      BroadcastServiceProvider :



        class BroadcastServiceProvider extends ServiceProvider
      {
      /**
      * Bootstrap any application services.
      *
      * @return void
      */
      public function boot()
      {
      Broadcast::routes(['middleware' => ['auth:api']]);

      require base_path('routes/channels.php');
      }
      }


      and this is react js code :



        export const onChatRcv = () => {
      try {
      Pusher.logToConsole = true;

      var pusher = new Pusher('83*********63c912f5', {
      cluster: 'ap2',
      forceTLS: true,
      authTransport: 'jsonp',
      authEndpoint: `${baseUrl}broadcasting/auth`,
      headers: {
      'Authorization' : `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjRhZTA1YjM2ZGNhN2I5NWI4NTJiZjFhOWRiZTQ5ZWE1NzFmNTNkMTE4NWQyOWU0Mjk0ZDI5NmJmZThhZTE0OGQzNzcwODM1MjEzYTg2NzA1In0.eyJhdWQiOiIxIiwianRpIjoiNGFlMDViMzZkY2E3Yjk1Yjg1MmJmMWE5ZGJlNDllYTU3MWY1M2QxMTg1ZDI5ZTQyOTRkMjk2YmZlOGFlMTQ4ZDM3NzA4MzUyMTNhODY3MDUiLCJpYXQiOjE1NTExMDQ3NTYsIm5iZiI6MTU1MTEwNDc1NiwiZXhwIjoxNTgyNjQwNzU2LCJzdWIiOiI1Iiwic2NvcGVzIjpbXX0.HOnNyhQQ48Hj4AZdP5vS5Zd5AfUr5XNP4zgrgR_f2-aAgFw4eWrNeHQSfdJt071_ChRINmv5W7O1LExxGIvCoSjiYFYPmw_8WjdFI_81WHoqM69ve-bgriK6eO1Yf0N3v3fc1DvPk2ZFYXXDmQbMLLXUyUqfjoYGty8AMgxCDulZ1tRMZ2rOVQZJ0ePbTw1eHQdMzBWG36fXWEbczLR99-_Dn8ta8P6iq0XWDr0cimlFzdHsG66iMeI0xWCJ1DRbxzr2LuX0j5zKe0j0_WNZJNbAFfeY87m7FDHjbHTNB1IB9Meh8kITV1mPQLc2n812j2QgW19KKWgpgZcy4tlfIBfT0x-aQAMkIUtmcHW0aEJ8RkHWKZYhyQ8yV61RIL3IxLpepHUVds8CZnxDGQ2NQ4bmb8UE7xQkV-KpmF5fZ0NCCxMuMpYdVkd0t9gc_Jra07_Sq7HbEJHEZbPCfhbDscAZQr2U9ddVaKwiGuFjSGXvOKS_lUAB91lBWada3k15FG2XoBfAv94mai2aWo41sep0nmlBKXPCVbWiczbeNL6ZXm_aE-tkLNS-Pc0veXogxZIaKVhFnRsW5qHTXI8v6sU6Nd9pzrIe173FqXQtzpA_tqrmdWU-lU-u484hWkPn2OcQcSckANpx-7_EVhrAPSfV7-WWamMRp2EC-3uFpmQ`,
      },
      });

      var privateChannel = pusher.subscribe('private-chat' );
      privateChannel.bind('App\Events\MessageSent', function(data) {
      console.log(data);
      });

      } catch (error) {
      console.error(error);
      }
      }


      what is the problem?
      it works when we use public channel but in private channel, we got this warning



      Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html









      share|improve this question
















      I want to use pusher for realtime chat and it works properly with public channel but when I use private channel I got this error :



      pusher.js:1333 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html


      this is laravel code :



      Event :



      use Dispatchable, InteractsWithSockets, SerializesModels;

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

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

      /**
      * Get the channels the event should broadcast on.
      *
      * @return IlluminateBroadcastingChannel|array
      */
      public function broadcastOn()
      {
      return new PrivateChannel('chat');
      }


      channels.php :



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


      BroadcastServiceProvider :



        class BroadcastServiceProvider extends ServiceProvider
      {
      /**
      * Bootstrap any application services.
      *
      * @return void
      */
      public function boot()
      {
      Broadcast::routes(['middleware' => ['auth:api']]);

      require base_path('routes/channels.php');
      }
      }


      and this is react js code :



        export const onChatRcv = () => {
      try {
      Pusher.logToConsole = true;

      var pusher = new Pusher('83*********63c912f5', {
      cluster: 'ap2',
      forceTLS: true,
      authTransport: 'jsonp',
      authEndpoint: `${baseUrl}broadcasting/auth`,
      headers: {
      'Authorization' : `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjRhZTA1YjM2ZGNhN2I5NWI4NTJiZjFhOWRiZTQ5ZWE1NzFmNTNkMTE4NWQyOWU0Mjk0ZDI5NmJmZThhZTE0OGQzNzcwODM1MjEzYTg2NzA1In0.eyJhdWQiOiIxIiwianRpIjoiNGFlMDViMzZkY2E3Yjk1Yjg1MmJmMWE5ZGJlNDllYTU3MWY1M2QxMTg1ZDI5ZTQyOTRkMjk2YmZlOGFlMTQ4ZDM3NzA4MzUyMTNhODY3MDUiLCJpYXQiOjE1NTExMDQ3NTYsIm5iZiI6MTU1MTEwNDc1NiwiZXhwIjoxNTgyNjQwNzU2LCJzdWIiOiI1Iiwic2NvcGVzIjpbXX0.HOnNyhQQ48Hj4AZdP5vS5Zd5AfUr5XNP4zgrgR_f2-aAgFw4eWrNeHQSfdJt071_ChRINmv5W7O1LExxGIvCoSjiYFYPmw_8WjdFI_81WHoqM69ve-bgriK6eO1Yf0N3v3fc1DvPk2ZFYXXDmQbMLLXUyUqfjoYGty8AMgxCDulZ1tRMZ2rOVQZJ0ePbTw1eHQdMzBWG36fXWEbczLR99-_Dn8ta8P6iq0XWDr0cimlFzdHsG66iMeI0xWCJ1DRbxzr2LuX0j5zKe0j0_WNZJNbAFfeY87m7FDHjbHTNB1IB9Meh8kITV1mPQLc2n812j2QgW19KKWgpgZcy4tlfIBfT0x-aQAMkIUtmcHW0aEJ8RkHWKZYhyQ8yV61RIL3IxLpepHUVds8CZnxDGQ2NQ4bmb8UE7xQkV-KpmF5fZ0NCCxMuMpYdVkd0t9gc_Jra07_Sq7HbEJHEZbPCfhbDscAZQr2U9ddVaKwiGuFjSGXvOKS_lUAB91lBWada3k15FG2XoBfAv94mai2aWo41sep0nmlBKXPCVbWiczbeNL6ZXm_aE-tkLNS-Pc0veXogxZIaKVhFnRsW5qHTXI8v6sU6Nd9pzrIe173FqXQtzpA_tqrmdWU-lU-u484hWkPn2OcQcSckANpx-7_EVhrAPSfV7-WWamMRp2EC-3uFpmQ`,
      },
      });

      var privateChannel = pusher.subscribe('private-chat' );
      privateChannel.bind('App\Events\MessageSent', function(data) {
      console.log(data);
      });

      } catch (error) {
      console.error(error);
      }
      }


      what is the problem?
      it works when we use public channel but in private channel, we got this warning



      Cross-Origin Read Blocking (CORB) blocked cross-origin response http://20.30.0.236:8000/login with MIME type text/html






      reactjs laravel pusher






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited 19 hours ago







      Bakhtiar

















      asked 19 hours ago









      BakhtiarBakhtiar

      1389




      1389
























          2 Answers
          2






          active

          oldest

          votes


















          3














          You can think of accessing a private channel as if you are making a private auth request to the server .
          You Cant Directly Access A private channel from react Because of Security Reasons.
          As Mentioned In CodeAcademy ....




          Servers are used to host web pages, applications, images, fonts, and much more. When you use a web browser, you are likely attempting to access a distinct website (hosted on a server). Websites often request these hosted resources from different locations (servers) on the Internet. Security policies on servers mitigate the risks associated with requesting assets hosted on different server




          You Need a policy in your laravel app to add CORS (CROSS ORIGIN REQUEST SHARING )
          Initially It was a bit complicated But You can use this library.



          Now You can make any kind of private requests to your laravel app.



          PS



          Dont Forget to add checks in your broadcasts routes in channels.php as you are just simply returning true without any checks.






          share|improve this answer































            6














            The default route broadcasting/auth can't retrieve a suitable response so I added the custom authEndPoint.



            web.php:



            Route::get('pusher/auth', 'PusherController@pusherAuth');


            and added PusherController:



            class PusherController extends Controller
            {
            /**
            * Authenticates logged-in user in the Pusher JS app
            * For presence channels
            */
            public function pusherAuth()
            {

            $user = auth()->user();

            if ($user) {
            $pusher = new Pusher('auth-key', 'secret', 'app_id');
            $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
            $callback = str_replace('\', '', $_GET['callback']);
            header('Content-Type: application/javascript');
            echo($callback . '(' . $auth . ');');
            return;
            }else {
            header('', true, 403);
            echo "Forbidden";
            return;
            }
            }
            }


            This works and subscribes the channel.






            share|improve this answer

























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54966575%2freal-time-react-web-app-with-pusher-and-laravel%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              3














              You can think of accessing a private channel as if you are making a private auth request to the server .
              You Cant Directly Access A private channel from react Because of Security Reasons.
              As Mentioned In CodeAcademy ....




              Servers are used to host web pages, applications, images, fonts, and much more. When you use a web browser, you are likely attempting to access a distinct website (hosted on a server). Websites often request these hosted resources from different locations (servers) on the Internet. Security policies on servers mitigate the risks associated with requesting assets hosted on different server




              You Need a policy in your laravel app to add CORS (CROSS ORIGIN REQUEST SHARING )
              Initially It was a bit complicated But You can use this library.



              Now You can make any kind of private requests to your laravel app.



              PS



              Dont Forget to add checks in your broadcasts routes in channels.php as you are just simply returning true without any checks.






              share|improve this answer




























                3














                You can think of accessing a private channel as if you are making a private auth request to the server .
                You Cant Directly Access A private channel from react Because of Security Reasons.
                As Mentioned In CodeAcademy ....




                Servers are used to host web pages, applications, images, fonts, and much more. When you use a web browser, you are likely attempting to access a distinct website (hosted on a server). Websites often request these hosted resources from different locations (servers) on the Internet. Security policies on servers mitigate the risks associated with requesting assets hosted on different server




                You Need a policy in your laravel app to add CORS (CROSS ORIGIN REQUEST SHARING )
                Initially It was a bit complicated But You can use this library.



                Now You can make any kind of private requests to your laravel app.



                PS



                Dont Forget to add checks in your broadcasts routes in channels.php as you are just simply returning true without any checks.






                share|improve this answer


























                  3












                  3








                  3







                  You can think of accessing a private channel as if you are making a private auth request to the server .
                  You Cant Directly Access A private channel from react Because of Security Reasons.
                  As Mentioned In CodeAcademy ....




                  Servers are used to host web pages, applications, images, fonts, and much more. When you use a web browser, you are likely attempting to access a distinct website (hosted on a server). Websites often request these hosted resources from different locations (servers) on the Internet. Security policies on servers mitigate the risks associated with requesting assets hosted on different server




                  You Need a policy in your laravel app to add CORS (CROSS ORIGIN REQUEST SHARING )
                  Initially It was a bit complicated But You can use this library.



                  Now You can make any kind of private requests to your laravel app.



                  PS



                  Dont Forget to add checks in your broadcasts routes in channels.php as you are just simply returning true without any checks.






                  share|improve this answer













                  You can think of accessing a private channel as if you are making a private auth request to the server .
                  You Cant Directly Access A private channel from react Because of Security Reasons.
                  As Mentioned In CodeAcademy ....




                  Servers are used to host web pages, applications, images, fonts, and much more. When you use a web browser, you are likely attempting to access a distinct website (hosted on a server). Websites often request these hosted resources from different locations (servers) on the Internet. Security policies on servers mitigate the risks associated with requesting assets hosted on different server




                  You Need a policy in your laravel app to add CORS (CROSS ORIGIN REQUEST SHARING )
                  Initially It was a bit complicated But You can use this library.



                  Now You can make any kind of private requests to your laravel app.



                  PS



                  Dont Forget to add checks in your broadcasts routes in channels.php as you are just simply returning true without any checks.







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered 18 hours ago









                  Saket AryanSaket Aryan

                  666




                  666

























                      6














                      The default route broadcasting/auth can't retrieve a suitable response so I added the custom authEndPoint.



                      web.php:



                      Route::get('pusher/auth', 'PusherController@pusherAuth');


                      and added PusherController:



                      class PusherController extends Controller
                      {
                      /**
                      * Authenticates logged-in user in the Pusher JS app
                      * For presence channels
                      */
                      public function pusherAuth()
                      {

                      $user = auth()->user();

                      if ($user) {
                      $pusher = new Pusher('auth-key', 'secret', 'app_id');
                      $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
                      $callback = str_replace('\', '', $_GET['callback']);
                      header('Content-Type: application/javascript');
                      echo($callback . '(' . $auth . ');');
                      return;
                      }else {
                      header('', true, 403);
                      echo "Forbidden";
                      return;
                      }
                      }
                      }


                      This works and subscribes the channel.






                      share|improve this answer






























                        6














                        The default route broadcasting/auth can't retrieve a suitable response so I added the custom authEndPoint.



                        web.php:



                        Route::get('pusher/auth', 'PusherController@pusherAuth');


                        and added PusherController:



                        class PusherController extends Controller
                        {
                        /**
                        * Authenticates logged-in user in the Pusher JS app
                        * For presence channels
                        */
                        public function pusherAuth()
                        {

                        $user = auth()->user();

                        if ($user) {
                        $pusher = new Pusher('auth-key', 'secret', 'app_id');
                        $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
                        $callback = str_replace('\', '', $_GET['callback']);
                        header('Content-Type: application/javascript');
                        echo($callback . '(' . $auth . ');');
                        return;
                        }else {
                        header('', true, 403);
                        echo "Forbidden";
                        return;
                        }
                        }
                        }


                        This works and subscribes the channel.






                        share|improve this answer




























                          6












                          6








                          6







                          The default route broadcasting/auth can't retrieve a suitable response so I added the custom authEndPoint.



                          web.php:



                          Route::get('pusher/auth', 'PusherController@pusherAuth');


                          and added PusherController:



                          class PusherController extends Controller
                          {
                          /**
                          * Authenticates logged-in user in the Pusher JS app
                          * For presence channels
                          */
                          public function pusherAuth()
                          {

                          $user = auth()->user();

                          if ($user) {
                          $pusher = new Pusher('auth-key', 'secret', 'app_id');
                          $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
                          $callback = str_replace('\', '', $_GET['callback']);
                          header('Content-Type: application/javascript');
                          echo($callback . '(' . $auth . ');');
                          return;
                          }else {
                          header('', true, 403);
                          echo "Forbidden";
                          return;
                          }
                          }
                          }


                          This works and subscribes the channel.






                          share|improve this answer















                          The default route broadcasting/auth can't retrieve a suitable response so I added the custom authEndPoint.



                          web.php:



                          Route::get('pusher/auth', 'PusherController@pusherAuth');


                          and added PusherController:



                          class PusherController extends Controller
                          {
                          /**
                          * Authenticates logged-in user in the Pusher JS app
                          * For presence channels
                          */
                          public function pusherAuth()
                          {

                          $user = auth()->user();

                          if ($user) {
                          $pusher = new Pusher('auth-key', 'secret', 'app_id');
                          $auth= $pusher->socket_auth(Input::get('channel_name'), Input::get('socket_id'));
                          $callback = str_replace('\', '', $_GET['callback']);
                          header('Content-Type: application/javascript');
                          echo($callback . '(' . $auth . ');');
                          return;
                          }else {
                          header('', true, 403);
                          echo "Forbidden";
                          return;
                          }
                          }
                          }


                          This works and subscribes the channel.







                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited 13 hours ago









                          MSeifert

                          76.7k18147180




                          76.7k18147180










                          answered 17 hours ago









                          BakhtiarBakhtiar

                          1389




                          1389






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54966575%2freal-time-react-web-app-with-pusher-and-laravel%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              Popular posts from this blog

                              El tren de la libertad Índice Antecedentes "Porque yo decido" Desarrollo de la...

                              Puerta de Hutt Referencias Enlaces externos Menú de navegación15°58′00″S 5°42′00″O /...

                              Castillo d'Acher Características Menú de navegación