Connect Laravel echo from Angular project

Question

I have a Laravel-echo-server with Redis running on my local. I created a test API endpoint, that emits broadcastable event.

on http://localhost:8000/api/web-socket-test I see the response in echo server CLI.

I set-up laravel-echo auth key and I can get the stat info from server API http://localhost:6001/apps/APP_ID/status?auth_key=b73a61d0.

The problem is with connecting to echo-server from Angular via ws: protocol. My connection code is

import {webSocket, WebSocketSubject} from 'rxjs/webSocket';

export class MyComponent implements OnInit, OnDestroy {

  myWebSocket: WebSocketSubject<any> = webSocket('ws://127.0.0.1:6001');

  ngOnInit() {
    this.myWebSocket.subscribe(
      msg => console.log('message received: ' + msg),
      err => console.log(err),
      () => console.log('complete')
    );
  }

And finally I've got an error: WebSocket connection to 'ws://127.0.0.1:6001/' failed: Connection closed before receiving a handshake response.

How can I establish ws connection?

stackoverflow.com/a/77571697/14344959

Harsh Patel
– Harsh Patel

2023-11-29 13:46:27 +00:00
Commented Nov 29, 2023 at 13:46 — Harsh Patel
– Harsh Patel, Commented Nov 29, 2023 at 13:46

jon · Accepted Answer · 2020-02-13 12:44:42Z

1

I believe you want to try connecting using the socket.io client libraries instead of using rxjs raw websockets.

Although it's not immediately clear from the laravel echo server docs, the project title states it's a 'Socket.io server for Laravel Echo'. So I'm assuming you should use the socket.io client libraries for connections.

answered Feb 13, 2020 at 12:44

jon

814 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Denys Siebov Over a year ago

But what url and protocol should I use? Is this correct way to connect ws://127.0.0.1:6001.

jon Over a year ago

In the laravel-echo docs it appears you don't need to specify this, only host and port. You need to pass in a client instance of io (socket.io client) and then make sure to specify the 'broadcaster' option with value 'socket.io' too. See the laravel-echo socketio-connector.ts source code for more details in here: github.com/laravel/echo

Harsh Patel Over a year ago

@jon hey laravel echo doesn't works for me in Angular. can you share your working sample code of angular?

this.echo = new Echo({       broadcaster: 'socket.io',       client: io,       host: 'http://localhost:6001', // Change this to your Laravel Echo server host     }); this.echo.connector.socket.on('connect', () => {             console.log('CONNECTED');         });

I'm can't getting this log. and can't see websocket request in broswer network section. what's wrong?

jon Over a year ago

maybe it's authorization? here's a snippet

this.echo = new Echo({           auth: { headers: { Authorization: 'Bearer ' + this.authToken } },           client: io,           host: this.host,           broadcaster: 'socket.io',           key: this.echoServerAuthKey,         });

Collectives™ on Stack Overflow

Connect Laravel echo from Angular project

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related