Giter Club home page Giter Club logo

angular-laravel-echo's Introduction

Angular Laravel Echo

This package is a simple service to allow easy integration of Laravel Echo into angular. The service tries to follow the general functionality of Laravel Echo as closely as possible. The most important difference is the use of Observable streams instead of callbacks for events/notifications, this simplifies integration into Angular a lot and (more importantly) makes sure only one listener per subscribed event/notification has to be created.

One important note is that (since Laravel Echo itself does not supply a way to stop listening for events) you must make sure to call leave for any channel that is no longer required, not just unsubscribe the event subscriptions (otherwise a memory leak will occur).

Versions

With the release of Angular 6.0, breaking changes were introduced in the form of the updated dependency on RxJS 6 so consult the following chart for what version of the package to use based on your version of Angular.

Angular Version Package Version
>= 6.0 2.*
< 6.0 1.*

Documentation

Documentation for the module is available on github pages at https://chancezeus.github.io/angular-laravel-echo/

Contributors

angular-laravel-echo's People

Contributors

chancezeus avatar wizofgoz avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

angular-laravel-echo's Issues

listen doesn't catch the event (I've joined to the channel) - Angular 9

Hi, thx for this wrapper.

I use Angular 8, installed the ngx-laravel-echo package. Everything seems fine, I can see that the client connected, joined to the channel, and also I can see the event has been fired in laravel-echo-server's console, but on client side it seems I can't catch the event.

In my contoller:

  ngOnInit() {
    if(this.EchoService.connected){
      this.EchoService.join('test-channel','public');
      this.EchoService.listen('test-channel', 'App\\Events\\UserPostUpload').subscribe( data =>
          {console.log('MSG:',data);}
      );
    }


  }

In laravel-server's console:

Console: [08:42:48] - xxxxxxxxxxxxxxxxx joined channel: test-channel
Channel: test-channel
Event: App\Events\UserPostUpload

Excepted result:
MSG: {foo:bar} appears in the clients' JavaScript console

Current result:
Nothing happens

what is the correct flow to listen to a channel

I'm trying to do it this way, but I get an error

this._echoService
            .login({
                'Authorization':'Bearer ' + window.localStorage.getItem('vimbo_token')
            }, this.user ? this.user.id : 0)
            .join('test-channel', 'private')
            .listen('test-channel', '*')
            .pipe(takeUntil(this._unsubscribeAll))
            .subscribe(res => console.log('res', res));

namespace error angular 9

ERROR in node_modules/angular-laravel-echo/src/services/lib.service.d.ts:24:14 - error TS2702: 'Echo' only refers to a type, but is being used as a namespace here.

24 options: Echo.Config;
~~~~
node_modules/angular-laravel-echo/src/services/lib.service.d.ts:30:14 - error TS2702: 'Echo' only refers to a type, but is being used as a namespace here.

30 options: Echo.NullConfig;
~~~~
node_modules/angular-laravel-echo/src/services/lib.service.d.ts:36:14 - error TS2702: 'Echo' only refers to a type, but is being used as a namespace here.

36 options: Echo.PusherConfig;
~~~~
node_modules/angular-laravel-echo/src/services/lib.service.d.ts:42:14 - error TS2702: 'Echo' only refers to a type, but is being used as a namespace here.

42 options: Echo.SocketIoConfig;
~~~~
node_modules/angular-laravel-echo/src/services/lib.service.d.ts:240:20 - error TS2702: 'Echo' only refers to a type, but is being used as a namespace here.

240 readonly echo: Echo.EchoStatic;

Channel does not exist

Hello,

Trying to set this up, we get an error "Channel 'test-channel' does not exist" When trying to listen.

this.echoService.listen('test-channel', 'test-event').subscribe( data => 
    console.log(data) 
);

Any ideas what's wrong? Thanks.

add support for angular 7

When attempting to update my project to Angular 7 (released today) I get the following error message:

$ ng update @angular/cli @angular/core
Package "angular-laravel-echo" has an incompatible peer dependency to "@angular/common" (requires "^5.0.3" (extended), would install "7.0.0").
Package "angular-laravel-echo" has an incompatible peer dependency to "@angular/core" (requires "^5.0.3" (extended), would install "7.0.0").
Package "angular-laravel-echo" has an incompatible peer dependency to "rxjs" (requires "^5.5.2", would install "6.3.3").
Incompatible peer dependencies found. See above.

socket.io compacity

I'm using the "ngx-laravel-echo": "^1.0.26".
After times testing, the working compatible socket.io-client is 2.3.1

If you run into an error like INTERCEPTORS, or io is not a function , that perhapse you are using socket.io-client higher version than 2.3.1

Error when using Pusher

Hello, thank you so much for providing this package.

How can I get this working using Pusher. I've set it up according to the docs, but I get this error in the console:

Uncaught (in promise): ReferenceError: Pusher is not defined ReferenceError: Pusher is not defined

Thanks!

I'm using Angular 6 along with v2 of this package.

Update for Angular 6?

Any chance you would be interested in updating this repo for the new Angular 6.0 release? I'm getting an invalid peer dependency from this package since Angular 6 uses RXJS 6.

How to properly add X-Socket-ID header?

Laravel can take advantage of the X-Socket-ID header if provided on each request. How should I properly add this?

Of course I'm using Angular... I see you have the registerjQueryAjaxSetup() method, but when I attempt to use like:

this.EchoService.echo.registerjQueryAjaxSetup(), I get:

ERROR in {file_path} error TS2341: Property 'echo' is private and only accessible within class 'EchoService'.

I don't think the correct thing to do is change to public, but I try anyhow and I get no errors, but the header is not applied.

I also try applying headers manually, but not sure how if I cannot access the echo instance.

Thanks!

Auth header not set on login function

When you use only the "login" function from the EchoService, the header is not present in the "Request Headers". If I add the "auth: { headers: .... }" in the config, it will be present. But this is not the usecase, because you want set this in the configs. Also if I define it in the config, it will be performed twice.

Anyone can help me? Thanks!

Multiple "socket.io" connections

How to implement multiple "socket.io" connections?

NgxLaravelEchoModule.forRoot(echoConfig1) // code line 1
NgxLaravelEchoModule.forRoot(echoConfig2) // code line 2

The final effect is "code line 2"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.