Quick-blox react native QB.chat.EVENT_TYPE.USER_IS_TYPING handler not working for me - react-native

please help for using this typing handler.this is handling for react native typing handler for but not getting any message during user typing please help.here using quick typing handler to catch the user typing but not working properly...please help,My code is here...
const emitter = new NativeEventEmitter(QB.chat);
function userTypingHandler(event) {
const {
type, // name of the event (the one you've subscribed for)
payload, // event data
} = event;
const {
dialogId, // in dialog with id specified
userId, // user with id specified is typing
} = payload;
// handle as
console.log("user is typing", userId);
}
emitter.addListener(QB.chat.EVENT_TYPE.USER_IS_TYPING, userTypingHandler);
return () =>{
emitter.removeListeners(
QB.chat.EVENT_TYPE.USER_IS_TYPING, userTypingHandler
);
}
}, [QB.chat.EVENT_TYPE.USER_IS_TYPING]);

Related

Vue 2 / Nuxt 2 Emit From Axios With Dialog Confirm

i am using Vue 2 / nuxt to emit from a axios post* call which itself is called from a Buefy dialog confirm. The emit from this component will close the window / panel and then re-load the users.
If I call the axios request from the button, this works without any issues, but once being called from the dialog, it just don't work?
*most likely this will be updated to a delete request, just not gotten to that let
See code below:
removeUser() {
this.$buefy.dialog.confirm({
message: 'Continue on this task?',
onConfirm: () => {
this.removeUserFunc()
}
})
},
removeUserFunc() {
// console.log(that)
const that = this
// Build URL
const EndPoint = '/remove_user/' + this.id
this.$axios.post(EndPoint).then((res) => {
// User Remove Message
UserRemoved(this.$swal)
that.$parent.$emit('completed')
// console.log(this.$emit('complete'))
// // Emit 'completed' Message
console.log(that.$emit('completed'))
console.log(that)
}).catch((res) => {
console.log(res)
// Check For Errors
GeneralError(this.$swal)
})
}
I was thinking it was losing access to the correct this, so i was trying to pass that back in, but not sure that is the case?
I have also tried with await, while that sort of works? I think is firing the emit too fast, as it re-loads the users but it still includes the user that as just been deleted?
removeUser() {
this.$buefy.dialog.confirm({
message: 'Continue on this task?',
onConfirm: async() => {
this.removeUserFunc()
await this.$emit('completed')
}
})
},
The this keyword refers to the object the function belongs to, or the window object if the function belongs to no object.
Try to use .bind and use a ES5 function
removeUser() {
this.$buefy.dialog.confirm({
message: 'Continue on this task?',
onConfirm: function() {
this.removeUserFunc()
}.bind(this)
})
},

FCM notification received twice when in the background (service worker)

When im triggering a notification with my website in the background or close, i get two notifications. The first one has missing elements in the payload (icon for example) while the 2nd one has all the info.
The code is running on this site: https://www.maltachamber.org.mt
https://www.maltachamber.org.mt/firebase-messaging-sw.js
The foreground notification also works as intended, the code is at line 2782 for the homepage.
I was able to solve it with a workaround.
Override the push Event with a custom Event class then use the listnerto intercept the incoming messages and use the custom class to re-push the events but without the 'notification' key exposed so firebase won't consider it.
In this way they won't be showed twice.
messaging.onBackgroundMessage(function(payload) {
notificationOptions = { /*...*/ };
self.registration.showNotification("Title",notificationOptions);
});
class CustomPushEvent extends Event {
constructor(data) {
super('push')
Object.assign(this, data)
this.custom = true
}
}
self.addEventListener('push', (e) => {
console.log("PUSH");
// Skip if event is our own custom event
if (e.custom) return;
// Keep old event data to override
let oldNotificationWrapper = e.data
// Create a new event to dispatch, pull values from notification key and put it in data key,
// and then remove notification key
let newEvent = new CustomPushEvent({
data: {
json() {
let newNotificationWrapper= oldNotificationWrapper.json()
newNotificationWrapper.data = {
...newNotificationWrapper.data,
...newNotificationWrapper.notification
}
delete newNotificationWrapper.notification
return newNotificationWrapper
},
},
waitUntil: e.waitUntil.bind(e),
})
// Stop event propagation
e.stopImmediatePropagation()
// Dispatch the new wrapped event
dispatchEvent(newEvent)
});

React Native Firebase push notification

I have a requirement to automatically send push notifications to my application when new data is inserted into firebase.
Is there any way to do so ?
Thanks !
You can use Firebase Functions as a middleware function for sending push notifications via FCM to the device If the database value is changed.
Adding an example from my FirebaseDBtoFCMFunction repo.
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
exports.sendPushNotification = functions.database
.ref('/users/{user_id}') // Put your path here with the params.
.onWrite(async (change, context) => {
try {
const { after } = change;
const { _data } = after;
const { deviceToken } = _data.receiver; // Always send the device token within the data entry.
if(!deviceToken) return;
const payload = {
notification: {
title: 'Notification',
body: `FCM notification triggered!`
},
data: context.params // Passing the path params along with the notification to the device. [optional]
};
return await admin.messaging().sendToDevice(deviceToken, payload);
} catch (ex) {
return console.error('Error:', ex.toString());
}
});
Inside your application add child_change (valueChanged) or child_add event for specific database location than when it changes, it will fired.
From doc.
FirebaseDatabase.DefaultInstance
.GetReference("Leaders").OrderByChild("score")
.ValueChanged += HandleValueChanged;
}
void HandleValueChanged(object sender, ValueChangedEventArgs args) {
if (args.DatabaseError != null) {
Debug.LogError(args.DatabaseError.Message);
return;
}
// Do something with the data in args.Snapshot
}
For nodejs value listener

I have created a chat application in which every ten second it takes records from database but i want to show notification at taskbar

I want to show new message notification at taskbar in asp.net MVC or in somewhere to aware user that new message have came.
You can add one Boolean column in you table namely "Seen" with default false value. when user open that message then update that value as true. so you will be easily able get not seen messages for notification. and you can show notification at the top of the page in header section.
We can show desktop notification by javascript function
function createNotification() {
var options = {
body: 'This is the body of the notification',
icon: 'stupidcodes.com.png',
dir: 'ltr'
};
var notification = new Notification("Hi there", options);
notification.onclick = function () {
window.open(document.URL);
};
}
function notifyMe() {
if (!("Notification" in window)) {
alert("This browser does not support desktop notification");
}
else if (Notification.permission === "granted") {
createNotification();
}
else if (Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
if (!('permission' in Notification)) {
Notification.permission = permission;
}
if (permission === 'granted') {
createNotification();
}
});
}
}
first check throgh ajax function if there is any unread funtion then call this notifyMe() function

Type and payload are being dispatched without calling it

I'm currently working on a react-native app with a chat feature. I'm using redux to store my states. So after pressing the send-button to send a message, an action is called to send the message to firebase and show it on the screen afterwards.
My current problem is that while the action I called dispatches the right type/payload, another type/payload is also being dispatched, which is not being dispatched in the called action. Apparently somehow another action is being called containing the type/payload.
The code of the action which is not being called is the following:
const getChatData = (chatIDs, userName, uid) => async dispatch => {
console.log('hasdhkhwerljlkbgkanndhadndngknnjnjsnfjskdnfjsuvhshdifhuishiduhfuishdkfnkjsndf')
const chatData = []
for (const key of chatIDs) {
[...]
// get message
firebase.database().ref('messages/' + key)
.orderByChild('timestamp').limitToLast(1)
.on('child_added', snapshot => {
const { text, timestamp, user } = snapshot.val();
const { name } = user;
chatData.push({ key, members: displayNameArray, text, timestamp, name })
dispatch({
type: GET_CHAT_DATA,
payload: chatData
})
})
})
}
}
As I said, the type GET_CHAT_DATA is being dispatched eventhough this action is not being called. Furthermore, the console.log doesn't show the long test message, which should mean that this action is not being called, right?
What could cause this weird behaviour?
Thank you so much!
So the thing is even though you did not execute the function but in there you registered an event on firebase
.on('child_added', snapshot => { })
Now whenever this child_added event will trigger, the handler will be executed.
That is why your dispatcher is running because its inside the event handler.
firebase.database().ref('messages/' + key)
.orderByChild('timestamp').limitToLast(1)
.on('child_added', snapshot => {
// this is the event handler which is executing
// when the "child_added" event is triggered
const { text, timestamp, user } = snapshot.val();
const { name } = user;
chatData.push({ key, members: displayNameArray, text, timestamp, name })
dispatch({
type: GET_CHAT_DATA,
payload: chatData
})
})
})