How to use or integrate this library with fire-base real time database

[prashantpimpale93]

I am using firebase real-time database for chat feature so how do I integrate this library with firebase.

[prashantpimpale93]

I manage to get the user list on the current UI
Here is the screenshot:

Every response will be highly appreciated!

[rpaschoal]

Hi @prashantpimpale93 ,

I have no experience using Firebase, but as long as you can implement your logic inside your ChatAdapter, you should manage to get the chat working as per your requirements.

On the NodeJS demo I have setup, you can check the message being broadcast to other users with Socket.IO. I believe you have to find a similar way of broadcasting your messages by using Firebase.

Have a look at this and see if it is of any help: https://firebase.google.com/docs/cloud-messaging/android/send-multiple

Cheers!

[prashantpimpale93]

Thanks for reply @rpaschoal. I have created one adapter (demo-adapter) in that I am writing my logic or firebase queries. But I want to modify that method which gets called on user click. I checked but need your help!

[prashantpimpale93]

Currently, I have developed the whole chat module with the help of Angular Material design and chat app and firebase queries are working fine on production but for UI this one is quite good and which I loved most.

[prashantpimpale93]

Can I use only HTML (UI part) of this library?

[rpaschoal]

@prashantpimpale93 What would you like to do when a user gets clicked? Perhaps we can start creating events that you could potentially bind into this module.

[rpaschoal]

@prashantpimpale93 This is a very good idea, could you please suggest a couple of events you would like to bind to?

EG: OnChatWindowOpened

We can elaborate a few and I will implement them for a next release 👍

[prashantpimpale93]

Yes.

1. There is a right side window in that list of user's is available on user click a new tab is created but that method or event should be available in demo-adapter.ts where we can call firebase query with userId and fetch the message for this userId (If that is already available then please suggest).
2. On message send which is currently fine.
   in addition, to above I have implemented the notification part for browsers.

[rpaschoal]

@prashantpimpale93

1. This is already available on the ChatAdapter through the method public abstract getMessageHistory(userId: any): Observable<Message[]>;. This is invoked every time you click to open a window and the Observale collection from the response will be parsed on the new chat window. Just make sure you have the property historyEnabled enabled (Which is enabled by default).
2. This a great feature! I haven't thought of that before. Could you send a pull request with the code addition to send browser notifications? (I assume you are talking about Chrome toast notifications or something similar)

Here is the contributing guide: https://github.com/rpaschoal/ng-chat/blob/master/CONTRIBUTING.md

[prashantpimpale93]

Yes. Will look at getMessageHistory() Method

[prashantpimpale93]

For the second point:
I am new to GitHub, please define the set of the step (For pull or add code and then push) where I can implement the code in this library

[prashantpimpale93]

Ohh sorry I didn't see that shared link. Will check it out

[prashantpimpale93]

@rpaschoal Expect more detailed information to contribute.

1. Repository forked in my personal account
2. Then tried to clone using git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
   But got an error:

remote: Not Found
fatal: repository 'https://github.com/prashantpimpale93/https://github.com/prashantpimpale93/ng-chat.git/' not found

[rpaschoal]

@prashantpimpale93 Just had a look at your fork, your clone URL is: https://github.com/prashantpimpale93/ng-chat.git

[prashantpimpale93]

Got that! I was trying with userName and then repo URL. Successfully cloned.
Where do I implement notification code, In demo folder or in src folder?
Please share any document related to that contribute.

[prashantpimpale93]

@rpaschoal can u please suggest which dependencies are required to run the project? Ex. Angular version and other third-party dependencies etc. It would better for me if you list down the commands

[rpaschoal]

@prashantpimpale93

All changes must go to the SRC directory, that is the core of the module. You should have everything you need from NPM dependency wise.

If you're not comfortable with doing the change, I can do it. Just list your main ideas here and I will work them out as soon as I have a spare time. I can then show you the pull request with the changes so you can grasp the idea around developing for this package.

If you have the code snippet for the browser notification, post it here as well, that will save me some time while adding everything to the main module :)

[prashantpimpale93]

@rpaschoal Yes exaclty!

1. That is what I was thought yesterday but by doing it by myself I will get to know how the actual process works to contribute on GitHub as I new here, that is why I trying to get all information from you!

Here is the code snippet:
For user permission:

Notification.requestPermission().then(function (permission) {
  if (permission == 'denied') {
    alert('You denied to show notification');
  } else if (permission == 'granted') {
    alert('You allowed to show notification');
  }
});

Notification trigger code:

if (Notification.requestPermission) {
    var notify;
    notify = new Notification('New message from ' + data.val().userName, {
      'body': data.val().message,
      'icon': 'image_url',
      'tag': data.val().userName
    });
    notify.onclick = function () {
     // Method which will be called after click event of notification panel
    }
  }
else {
    alert('Please allow the notification first');
  } 

The above code will reside in your sendMessage(message: Message): void {} method.

Will expect some help from you on point no 1! 🎉

[rpaschoal]

@prashantpimpale93 I've started working on the browser notifications. I will be releasing version 1.0.11 in the following days and it will include both notification and event features that you have suggested.

Have a look at the following commit to see how I usually add features to this chat module:

afee655

Bits of code blocks here and there, test the package with the demo project via NPM link and then after it is all working sweet I just add unit tests around the new feature.

You asked earlier in this thread about using the HTML part of this project. I suggest that we develop all new features here. By doing this, a lot of people will get new features for the package and it will grow both in code base and adoption from the community.

[prashantpimpale93]

@rpaschoal I am stuck at one problem. I have asked one question in StackOverflow Here is the link to the question - https://stackoverflow.com/questions/50654263/unable-to-bind-data-to-the-list

Please look once n get back to me if you're familiar with this.

[rpaschoal]

@prashantpimpale93 I think there is something wrong with the link you've posted.

Version 1.0.11 is almost ready, have implemented the changes and ideas we have discussed, added unit tests and updated the docs. I just have to do a bit of smoke testing before releasing it to NPM.

Have a look at the events that will be exposed in the new version:

Events

(onUserChatClicked): Event emitted every time a user is clicked on the chat window and a new chat window is opened.
(onUserChatOpened): Event emitted every time a chat window is opened, regardless if it was due to a user click on the friends list or via new message received.
(onUserChatClosed): Event emitted every time a chat window is closed.

What do you think? Will these fulfill the requirements of your implementation? The onUserChatClicked event is only invoked if the window is not already opened. Do you believe we should invoke this every time a user is clicked on the friends list even if the window is already opened, or is it good the way I've designed and implemented it?

By the way, I am keeping the pull request open for you to have a look on how I've implemented the code: #53

Cheers!

[rpaschoal]

Hmm, looking at this event list, I might refactor the name of the first event to onUserClicked

[prashantpimpale93]

Thanks a lot!!! The problem is the method getmessagehistory() returns an observable of message in that method I m calling my firebase api which is aync call hence the control is already gets returned before firebase data load.

…

On 4 Jun 2018 9:45 a.m., "Rafael Carvalho" ***@***.***> wrote: Hmm, looking at this event list, I might refactor the name of the first event to onUserClicked — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Akdz9HQyZVtvfIcYgcmc2OVadTx7xT7-ks5t5LRPgaJpZM4UMNZq> .

[rpaschoal]

@prashantpimpale93 Can't you just return an Observable from your Firebase call? Just wrap it inside an Observable.

[prashantpimpale93]

Yes. I have tried out that also but some configuration or due to dependencies that is not working. Do you have any friend who has worked on firebase? Thanks & Regards, Prashant Pimpale "This e-mail and any attached documents may contain confidential or proprietary information. If you are not the intended recipient, you are notified that any dissemination, copying of this e-mail and any attachments thereto or use of their contents by any means whatsoever is strictly prohibited. If you have received this e-mail in error, please advise the sender immediately and delete this e-mail and all attached documents from your computer system."

…

On Mon, Jun 4, 2018 at 12:35 PM, Rafael Carvalho ***@***.***> wrote: @prashantpimpale93 <https://github.com/prashantpimpale93> Can't you just return an Observable from your Firebase call? Just wrap it inside an Observable. I'll most likely release 1.0.11 tomorrow by the way. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#52 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/Akdz9G_dSHpQR5Ne3Ia3ZfZwxTh_L15Aks5t5NxOgaJpZM4UMNZq> .

[rpaschoal]

I know a few @prashantpimpale93, but they are busy professionals. If you have a Firebase related question, I would advise you to post it on StackOverflow.

1.0.12 is now published on NPM: https://www.npmjs.com/package/ng-chat

Have a look at the new features that you've suggested. Thank you for the ideas.

I am closing this issue as the thread has gone too long and we have deviated from the main issue. If you have any further questions, please open a new issue here in GitHub. Feel encouraged to post your Firebase doubts here too, but if you do, please post your full adapter code so I or someone else can have more information to help you.

[prashantpimpale93]

Ok thanks for your help @rpaschoal!