nolancaster / angular2-actioncable Goto Github PK

Hello,

I'm trying to reject a subscription to a channel but following JavaScript Error is throwing:

core.js:15723 ERROR TypeError: Cannot read property 'received' of undefined
    at Subscriptions.push../node_modules/actioncable/lib/assets/compiled/action_cable.js.ActionCable.Subscriptions.Subscriptions.notify (action_cable.js:493)
    at Connection.message (action_cable.js:347)
    at WebSocket.wrapFn (zone.js:1281)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1693)
    at WebSocket.globalZoneAwareCallback (zone.js:1719)

Though the rejected callback is successfully called

I'm using:

• angular2-actioncable: Version 6.0.2
• rxjs: Version 6.5.1

I also tried some older versions of this plugin and rxjs but resulted in the same problem.

Does anyone has a solution?
Thank you :)

I have a basic setup with rails API + devise_token_auth + actionable and angular9 app for the Front.

I basically want to send notifications to a specific group of users not all users.

My code looks like follows:

connections.rb

module ApplicationCable
 class Connection < ActionCable::Connection::Base
  identified_by :current_user

def connect
  self.current_user = find_verified_user
end

private
def find_verified_user
  uid = request.query_parameters[:uid]
  token = request.query_parameters[:token]
  client_id = request.query_parameters[:client]

  user = User.find_by_uid(uid)

  if user && user.valid_token?(token, client_id)
    user
  else
    reject_unauthorized_connection
  end
end
end
end

appointments.rb

class Appointment < ApplicationRecord
validates_uniqueness_of :start_time
belongs_to :slug
belongs_to :user
belongs_to :property
belongs_to :contact


after_create do
  ChangeAppointmentsJob.perform_later self
end

after_update do
  ChangeAppointmentsJob.perform_later self
end
end

ChangeAppointmentsJob

class ChangeAppointmentsJob < ApplicationJob
  queue_as :default

  def perform(appointment)

    ActionCable.server.broadcast 'appointment_channel', data: appointment
  end

end

AppointmentChannel

class AppointmentChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'appointment_channel'
  end

  def unsubscribed
    stop_all_streams
  end
end

websocket.service.ts

openAppointmentChannel() {
const channel: Channel = this.cableService
  .cable(this.webSocketUrl, { client: this.client, uid: this.uid, token: this.access_token })
  .channel('ws://localhost:3000/cable');
  console.log('open appointments channel');
if (channel) {
  this.appointmentsSubscription = channel.received().subscribe(appointment => {
    this.notifications.create('Info', 'WebSocket notif', NotificationType.Info, { theClass: 'primary', timeOut: 6000, showProgressBar: false });

    this.ourNotificationService.notficateReloadAppointments();
  }, err => {
    console.log(err);
  });
}

}

All works perfectly, but my code broadcasts all users !!

Is there any way to do it with angular? send specific params for example

Or I want to do something like this in rails code

ActionCable.server.broadcast_to( User.where(slug_id: current_user.slug_id) ) 

to send a notification to my Front app but not to all users, just users who had slug_id like the user who created or updated the appointment

any ideas, please!

After updating my angular project v5 up to v7

Needs to add support with rxjs 6

It will be fixed doing npm i rxjs-compat but is not the optimal solution.

looking to auto-send a message immediately after a successful subscription. also wondering if there are additional feature plans for this project

Hey there peepz!

We've developed a library that has angular2-actioncable as peerDependency. This library is imported by an application. Both library and application were updated to Angular 10. Although we get compilations errors for the library, the application fails to start.

The error message says angular2-actioncable has missing dependencies: rxjs and @angular/core.

ERROR in The target entry-point "angular2-actioncable" has missing dependencies:
 - @angular/core
 - rxjs

We haven't found any article or issue related to incompatibility so far, but we didn't manage to find where the problem was either.

Just a quick note: it works fine for Angular 9 though.

Any clues on that, please?

Thanks a million!

This happens when calling Cable::disconnect(). The Cable connection was working fine beforehand.

It started happening when upgrading from angular2-actioncable 1.1.5 to 1.2.0.
I'm using actioncable 5.2.0 in both cases.

I suspect this commit breaks it: 6a0485e#diff-6c7420681cfd43be54badf5663c934e2

HI,

I have a subscription to get informed, when a channel subscription was disconnected.
The subscription is really importend, so I want to reconnect. But I cam't find a way, to reconnect.
The this.channel.connected()-Subscription is not getting fired.

init(token: string) {
  this.connect(token);
  this.subscribe(token)
}

connect(token) {
  this.channel = this.cableService.cable(environment.cable_url, {token: token}).channel('GuestappChannel')
  this.cable = this.channel.cable;
}

subscribe(token) {
  this.channel.connected().subscribe(() => {
    this.globals.log('Websocket connected', LogType.info, true)
  })
  
  this.channel.disconnected().subscribe(() => {
    this.globals.log('Websocket disconnected', LogType.error, true)
    this.connect(token);
  })
}

When I load the page I have the log.

[12:07:55-541]: Websocket connected

For testing, I peform this.cable?.disconnect(); after 20 seconds.

[12:08:07-896]: Websocket disconnected

But then I can't establish a new connection.

Hey,

I am currently using angular2-actioncable to introduce websocket in our current application.
Our backend is a rails api only application. We are looking to a way to authentication.
Can we pass headers when we are going to connect to /cable or should we send everything authentication related via params

Best regards

I'm trying to use ActionCable to send events from the client side to the server, but learned that the channel.send() method has no provision to handle this.

e.g. channel.send('appear', { user_id: 12345 }) - this would call the 'appear' method in my channel.

Example of this can be found here: http://guides.rubyonrails.org/action_cable_overview.html#example-1-user-appearances

Is there another way I can achieve the desired result with your lib? I don't really want to revert back to the standard ActionCable library if I can help it.

In angular2-actioncable 6.0.2 and rxjs 6.3.3: Piping the connected() Observable through other operators seems to break.

Here's my app.component.ts:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { first, map } from 'rxjs/operators';
import { ActionCableService, Channel } from 'angular2-actioncable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'sb-angular';

  constructor(private actionCableService: ActionCableService) {}

  ngOnInit() {
    var channel = this.actionCableService
      .cable('ws://localhost:3000/cable')
      .channel('SyncChannel');

    channel.connected().pipe(first()).subscribe(x => console.log(x));
  }

}

This causes the error:

AppComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: sink._addParentTeardownLogic is not a function
    at Subject.push../node_modules/angular2-actioncable/angular2-actioncable.es5.js.Observable.subscribe (angular2-actioncable.es5.js:528)
    at Observable.push../node_modules/angular2-actioncable/angular2-actioncable.es5.js.Observable._subscribe (angular2-actioncable.es5.js:574)
    at Observable.push../node_modules/angular2-actioncable/angular2-actioncable.es5.js.Observable.subscribe (angular2-actioncable.es5.js:529)
    at FirstOperator.push../node_modules/rxjs/_esm5/operators/first.js.FirstOperator.call (first.js:71)
    at Observable.push../node_modules/angular2-actioncable/angular2-actioncable.es5.js.Observable.subscribe (angular2-actioncable.es5.js:525)
    at AppComponent.push../src/app/app.component.ts.AppComponent.ngOnInit (app.component.ts:22)
    at checkAndUpdateDirectiveInline (core.js:12411)
    at checkAndUpdateNodeInline (core.js:13935)
    at checkAndUpdateNode (core.js:13878)
    at debugCheckAndUpdateNode (core.js:14771)

I cannot reproduce this error when piping other base observables; it only happens when I use observables from angular2-actioncable.

Hello,

I have a channel instanced in my angular app but i want to perform with action 'pull_items' in a ruby api with some data, but doesn't happend properly? or i really dont understand what is the porpose to perform method with the action param and data param.

Here look a example

const cable = this.cable.getActualCable();
const channel = cable.channel('ShoppingCartChannel');
channel.perform('push_items', 'some');
channel.perform('pull_items')

then the channel.connected()suscription must catch with a calback fn some data

when i debug with develop tools in chrome i see my other channel doing the perform correctly like this
{"command":"message","identifier":"{\"channel\":\"NotificationChannel\"}","data":"{\"action\":\"unreads\"}"}

and 'push_items'

{"command":"message","identifier":"{\"channel\":\"ShoppingCartChannel\"}","data":"\"some\""}

I see a difference between to logs in the key data

then what should i do?

I appreciate your understanding

Hi,

Cable's constructor already permits params to be a Function, but this function must be synchronous. It would really help if params could return a Promise.

Thanks in advance