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
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
add a comment |
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
add a comment |
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
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
reactjs laravel pusher
edited 19 hours ago
Bakhtiar
asked 19 hours ago
BakhtiarBakhtiar
1389
1389
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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.
add a comment |
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.
add a comment |
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
add a comment |
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.
add a comment |
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.
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.
answered 18 hours ago
Saket AryanSaket Aryan
666
666
add a comment |
add a comment |
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.
add a comment |
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.
add a comment |
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.
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.
edited 13 hours ago
MSeifert
76.7k18147180
76.7k18147180
answered 17 hours ago
BakhtiarBakhtiar
1389
1389
add a comment |
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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