[FIXED] Why isn't Nginx changing the protocol to WebSocket?

Issue

I am trying to run Laracvel-echo.

Host configuration:

location /socket.io {
    proxy_pass http://127.0.0.1:6002/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
    proxy_set_header Host $host;
}

I catch headers with Socat:

socat -v TCP-LISTEN:6002,fork TCP:127.0.0.1:6001

On my DEV server, I see that everything is ok, the protocol is changing (HTTP/1.1 101 Switching Protocols):

2020/10/22 13:51:36.147102  length=175 from=0 to=174
HTTP/1.1 101 Switching Protocols\r
Upgrade: websocket\r
Connection: Upgrade\r
Sec-WebSocket-Accept: yU0AKhFOQaw5j9cQS8oq2bjx1pw=\r
Sec-WebSocket-Extensions: permessage-deflate\r

But in PRODUCTION server i see GET protocol (GET /socket.io HTTP/1.1):

 2020/10/22 13:50:34.161919  length=588 from=0 to=587
GET /socket.io HTTP/1.1\r
Upgrade: websocket\r
Connection: Upgrade\r
Host: localhost:6002\r
Pragma: no-cache\r
Cache-Control: no-cache\r
Authorization: Basic YWlkYXI6MTIzMTIz\r
User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36\r
Origin: chrome-extension://pfdhoblngboilpfeibdedpjgfnlcodoo\r
Sec-WebSocket-Version: 13\r
Accept-Encoding: gzip, deflate\r
Accept-Language: ru-RU,ru;q=0.9,en-US;q=0.8,en;q=0.7\r
Sec-WebSocket-Key: rq5CaFXEzZ/vWSnOJ5H3PA==\r
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits\r

My question is related to this: WebSocket with Laravel-echo-server: 502 Bad gateway Is the NGINX problem or am I wrong?

Help me please!)

Solution

I don't know what the problem is, but I found a solution. I've updated a lot: updated Nginx to 1.19.1, possibly installed some additional modules. Installed npm not globally, but locally. And it worked ...

Attention: this only works if you write location /socket.io.

Answered By - Aidar

Answer Checked By - Clifford M. (PHPFixing Volunteer)

Read More

[FIXED] Refresh JWT token before Laravel Echo authentication

Issue

My web front end can no longer authenticate to Laravel's broadcast authentication endpoint when my browser tab comes back from being in the background because my JWT token has expired. How can I fix this?

This is my current code:

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: '{{ config('broadcasting.connections.pusher.key') }}',
    cluster: 'eu',
    forceTLS: true,
    auth: {
        headers: {
            'Authorization': 'Bearer ' + keycloak.token
        }
    }
});

This is how I refresh my JWT token before calling other authenticated endpoints:

keycloak.updateToken(30).then(() => {
    axios({
        url: url,
        headers: {'Authorization': 'Bearer ' + keycloak.token},
        params: params
    }).then(response => {
        console.log(response.data);
    });
});

When looking at Echo's source code on Github it seems possible to register interceptors. Is that the right direction? It doesn't seem possible to place a callable into the auth object of Echo's connection options.

Anybody know how I can solve my problem?

Solution

The authentication can be customized per these docs: https://laravel.com/docs/9.x/broadcasting#customizing-the-authorization-request

Therefore the answer is to refresh the JWT token inside the authorize callable.

Answered By - GGGforce

Read More