Веб-приложение в режиме реального времени реагирует с толкачом и Laravel - PullRequest
Новая
       7

Веб-приложение в режиме реального времени реагирует с толкачом и Laravel

0 голосов
/ 03 марта 2019

Я хочу использовать пушер для чата в реальном времени, и он работает правильно с общедоступным каналом, но когда я использую частный канал, я получаю эту ошибку: 

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

это код laravel:

Событие: 

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 \Illuminate\Broadcasting\Channel|array
 */
public function broadcastOn()
{
    return new PrivateChannel('chat');
}

channel.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');
    }
}

и это код реагирования js: 

  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);
    }
}

в чем проблема?это работает, когда мы используем публичный канал, но в частном канале, мы получили это предупреждение 

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

Ответы [ 2 ]

0 голосов
/ 03 марта 2019

Маршрут по умолчанию broadcasting/auth не может получить подходящий ответ, поэтому я добавил пользовательский authEndPoint.

web.php: 

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

и добавил 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;
        }
    }
}

Это работает и подписывается на канал.

0 голосов
/ 03 марта 2019

Вы можете думать о доступе к частному каналу так, как будто вы делаете частный запрос авторизации на сервер.Вы не можете получить прямой доступ к частному каналу из-за соображений безопасности.Как уже упоминалось в CodeAcademy ....

Серверы используются для размещения веб-страниц, приложений, изображений, шрифтов и многого другого.Когда вы используете веб-браузер, вы, вероятно, пытаетесь получить доступ к отдельному веб-сайту (расположенному на сервере).Веб-сайты часто запрашивают эти размещенные ресурсы из разных мест (серверов) в Интернете.Политики безопасности на серверах снижают риски, связанные с запросом ресурсов, размещенных на разных серверах

Вам нужна политика в вашем приложении laravel для добавления CORS (CROSS ORIGIN REQUEST SHARING) Первоначально это было немного сложно, но вы можетеиспользуйте эту библиотеку .

Теперь вы можете делать любые личные запросы к вашему приложению laravel.

PS

Не забудьте добавить проверки в маршруты ваших трансляций в channel.php, поскольку вы просто возвращаете true без каких-либо проверок.

...