I am using Twilio Flex WebChat to send and receive messages. I have a requirement to modify a message before sending it. Hence I added a listener beforeSendMessage in componentDidMount() where I am collecting the body of the message, transforming it, and sending the message. Here the issue is that it's sending both the original message and transformed message. My target is to send the transformed message alone. Can you possibly help me. Thank you.
componentDidMount() {
FlexWebChat.Actions.addListener(
'beforeSendMessage',
async (payload) => {
const { body, channelSid } = payload;
const modifiedBody = transform(body) //Transforming the message here
await FlexWebChat.Actions.invokeAction('SendMessage', {
body: modifiedBody, // Sending the transformed message
channelSid,
})
}
)
}
The reason this is happening is because you are doing a SendMessage Twice.
What you can do with the Listener is modify the payload and let the execution continue and it will continue to execute. If you want to block the message sending you can call abortFunction()
componentDidMount() {
FlexWebChat.Actions.addListener(
'beforeSendMessage',
async (payload, abortFunction) => {
const { body, channelSid } = payload;
payload.body = transform(body); //Transforming the message here
}
)
}
Related
how to detect voice messages on whatsapp with whatsapp-web.js
I tried this but it seems like it doesn't work
client.on('voice', async (msg) => {}
I'm working on a project that saves the various types of files/content sent to my phone which is connected to whatsapp-web.js library.
I suggest you test the solution with some logs on the incoming message type.
You could solve this problem directly from the message reply (msg):
client.on('message', async msg => {
if(msg.type == 'ptt'){
// is a voice message
}
});
also with the mimetype of downloadMedia():
client.on('message', async msg => {
if(msg.hasMedia) {
const media = await msg.downloadMedia();
var mmtype = media.mimetype;
if(media.mimetype.contains('audio/ogg')){
// is a voice message
// don't know if .contains() is the solution try other comparators
}
}
});
I have an iOS app that sends a time sensitive push notification from an event via Cloud Firestore-triggered function.
In my function, I do a simple get operation prior to sending out the push notification, and it gets delivered from 30 sec up to 1 min. Can anyone advise on improving the speed?
I've looked at the online documentation talking about setting a minimum # of instances to reduce a cold start. I've also looked at this SO answer. As someone that's new to this, I admittedly am having difficulty following and pinpointing my advised next step. Any help and guidance would be extremely appreciated.
exports.pushNotification = functions.firestore.document('/users/{userId}').onUpdate((change, context) => {
var recipientUid = context.params.userId;
return admin.firestore().collection('users').doc(recipientUid).get().then(doc => {
const userData = doc.data();
var fcmToken = userData.fcmToken;
var message = {
notification: {
title: sendingTitle,
body: sendingMessage
},
apns : {
payload : {
aps : {
badge : 1,
sound: "default"
}
}
},
token: fcmToken
};
admin.messaging().send(message)
.then((response) => {
console.log('Successfully sent push notification message:', response);
return;
})
.catch((error) => {
console.log('Error sending message:', error);
return;
});
})
});
One possible cause is that you don't correctly manage the life cycle of your Cloud Function: as a matter of fact you are not returning the Promises chain, as shown below (see the comments in the code):
exports.pushNotification = functions.firestore.document('/users/{userId}').onUpdate((change, context) => {
var recipientUid = context.params.userId;
return admin.firestore().collection('users').doc(recipientUid).get()
.then(doc => {
const userData = doc.data();
var fcmToken = userData.fcmToken;
var message = { ... };
return admin.messaging().send(message) // !!! See the return here
}) // And see also that we close the then block here
.then((response) => {
console.log('Successfully sent push notification message:', response);
return;
})
.catch((error) => {
console.log('Error sending message:', error);
return;
});
});
For more details on how to correctly manage the life cycle, I would suggest you watch the 3 videos about "JavaScript Promises" from the Firebase video series as well as read the following doc. Also, reading the doc on how to chain Promises will help.
I'm trying to set up messages delivery status check with twilio. For some reasons twilio statusCallback doesn't fire. Could you please help me to find an error?
Here is a file where I do initialization and send messages:
const Twilio = require('twilio');
const {
TWILIO_ACCOUNT_SID,
TWILIO_AUTH_TOKEN,
TWILIO_PHONE_NUMBER
} = require('config');
const client = new Twilio(TWILIO_ACCOUNT_SID, TWILIO_AUTH_TOKEN);
module.exports = {
send: (body, phoneNumber) => client.messages.create({
body,
to: phoneNumber,
from: TWILIO_PHONE_NUMBER,
statusCallback: 'http://postb.in/b/XXXXXXXX'
})
.then((message) => {
console.log(message.sid);
return message.sid;
})
};
Here is a test where I call message sending after initialization:
const { expect } = require('chai');
const smsUtility = require('utils/sms');
describe('Sms utility', () => {
it('should send a message and return message sid', (done) => {
const body = 'Body';
const number = '+XXXXXXXXXXX';
smsUtility.send(body, number)
.then((messageSid) => {
expect(typeof messageSid).to.equal('string');
return done();
})
.catch((err) => {
console.log(err);
return done();
});
});
});
I use test credentials, but when I replace it with real twilio credentials, I successfully receive a message, so this part works fine. Also, when I try to ping postb.in url manually (with curl), it also works OK. Only statusCallback doesn't work.
Thanks.
Twilio developer evangelist here.
It looks to me like you have everything set up nicely aside from your Postbin URL.
I noticed you show your URL as http://postb.in/b/XXXXXXXX. But the /b/ version of the URL is the dashboard for your Postbin. Requests to the dashboard won't show up on the dashboard.
Instead, you should use the URL that looks like: http://postb.in/XXXXXXXX. Try that and let me know if it's working.
I'm sending out push notifications to users who subscribed to a certain topic in Firebase Messaging. Everything works but after the message gets sent out and I remove the value from event.data.adminRef I get this error message in my Firebase Functions logs:
TypeError: Cannot read property 'receiverId' of null
at exports.sendNotification.ref.onWrite.event (/user_code/index.js:24:38)
at /user_code/node_modules/firebase-functions/lib/cloud-functions.js:35:20
at process._tickDomainCallback (internal/process/next_tick.js:129:7)
Notifcations function:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp(functions.config().firebase);
var ref = functions.database.ref('/notificationRequests/{notificationId}')
exports.sendNotification = ref.onWrite(event => {
var notificationId = event.params.notificationId;
var notificationRequest = event.data.val();
console.log(notificationRequest);
var receiverId = notificationRequest.receiverId;
var message = notificationRequest.message
var data = notificationRequest.data
// The topic name can be optionally prefixed with "/topics/".
var topic = '/topics/user_' + receiverId;
// See the "Defining the message payload" section below for details
// on how to define a message payload.
var payload = {
notification: {
body: message,
sound: 'default'
},
data: { data }
};
var options = {
priority: "high",
contentAvailable: true
};
// Send a message to devices subscribed to the provided topic.
admin.messaging().sendToTopic(topic, payload, options)
.then(function(response) {
// See the MessagingTopicResponse reference documentation for the
// contents of response.
console.log("Successfully sent message:", response);
return event.data.adminRef.remove();
})
.catch(function(error) {
console.log("Error sending message:", error);
});
});
What does it mean? Thanks!
When you remove the message data after sending the message, the removal, which is equivalent to writing a null value, triggers your function to run again, this time with null data. You need to add a check at the top for null data, to short-circuit the second invocation:
if (!notificationRequest) {
return;
}
You also need to return the Promise returned by your sendToTopic().then() code. That ensures your cloud function will be kept alive until the asynchronous processing for sending the message and removing the data completes.
// return added
return admin.messaging().sendToTopic(topic, payload, options)
.then(function(response) {
// See the MessagingTopicResponse reference documentation for the
// contents of response.
console.log("Successfully sent message:", response);
return event.data.adminRef.remove();
})
.catch(function(error) {
console.log("Error sending message:", error);
});
I need to make a POST request and send some data. I'm using the service worker sync to handle offline situation.
But is there a way to pass the POST data to the service worker, so it makes the same request again?
Cause apparently the current solution is to store requests in some client side storage and after client gets connection - get the requests info from the storage and then send them.
Any more elegant way?
PS: I thought about just making the service worker send message to the application code so it does the request again ... but unfortunately it doesn't know the exact client that registered the service worker :(
You can use fetch-sync
or i use postmessage to fix this problem, which i agree that indexedDB looks trouble.
first of all, i send the message from html.
// send message to serviceWorker
function sync (url, options) {
navigator.serviceWorker.controller.postMessage({type: 'sync', url, options})
}
i got this message in serviceworker, and then i store it.
const syncStore = {}
self.addEventListener('message', event => {
if(event.data.type === 'sync') {
// get a unique id to save the data
const id = uuid()
syncStore[id] = event.data
// register a sync and pass the id as tag for it to get the data
self.registration.sync.register(id)
}
console.log(event.data)
})
in the sync event, i got the data and fetch
self.addEventListener('sync', event => {
// get the data by tag
const {url, options} = syncStore[event.tag]
event.waitUntil(fetch(url, options))
})
it works well in my test, what's more you can delete the memory store after the fetch
what's more, you may want to send back the result to the page. i will do this in the same way by postmessage.
as now i have to communicate between each other, i will change the fucnction sync into this way
// use messagechannel to communicate
sendMessageToSw (msg) {
return new Promise((resolve, reject) => {
// Create a Message Channel
const msg_chan = new MessageChannel()
// Handler for recieving message reply from service worker
msg_chan.port1.onmessage = event => {
if(event.data.error) {
reject(event.data.error)
} else {
resolve(event.data)
}
}
navigator.serviceWorker.controller.postMessage(msg, [msg_chan.port2])
})
}
// send message to serviceWorker
// you can see that i add a parse argument
// this is use to tell the serviceworker how to parse our data
function sync (url, options, parse) {
return sendMessageToSw({type: 'sync', url, options, parse})
}
i also have to change the message event, so that i can pass the port to sync event
self.addEventListener('message', event => {
if(isObject(event.data)) {
if(event.data.type === 'sync') {
// in this way, you can decide your tag
const id = event.data.id || uuid()
// pass the port into the memory stor
syncStore[id] = Object.assign({port: event.ports[0]}, event.data)
self.registration.sync.register(id)
}
}
})
up to now, we can handle the sync event
self.addEventListener('sync', event => {
const {url, options, port, parse} = syncStore[event.tag] || {}
// delete the memory
delete syncStore[event.tag]
event.waitUntil(fetch(url, options)
.then(response => {
// clone response because it will fail to parse if it parse again
const copy = response.clone()
if(response.ok) {
// parse it as you like
copy[parse]()
.then(data => {
// when success postmessage back
port.postMessage(data)
})
} else {
port.postMessage({error: response.status})
}
})
.catch(error => {
port.postMessage({error: error.message})
})
)
})
At the end. you cannot use postmessage to send response directly.Because it's illegal.So you need to parse it, such as text, json, blob, etc. i think that's enough.
As you have mention that, you may want to open the window.
i advice that you can use serviceworker to send a notification.
self.addEventListener('push', function (event) {
const title = 'i am a fucking test'
const options = {
body: 'Yay it works.',
}
event.waitUntil(self.registration.showNotification(title, options))
})
self.addEventListener('notificationclick', function (event) {
event.notification.close()
event.waitUntil(
clients.openWindow('https://yoursite.com')
)
})
when the client click we can open the window.
To comunicate with the serviceworker I use a trick:
in the fetch eventlistener I put this:
self.addEventListener('fetch', event => {
if (event.request.url.includes("sw_messages.js")) {
var zib = "some data";
event.respondWith(new Response("window.msg=" + JSON.stringify(zib) + ";", {
headers: {
'Content-Type': 'application/javascript'
}
}));
}
return;
});
then, in the main html I just add:
<script src="sw_messages.js"></script>
as the page loads, global variable msg will contain (in this example) "some data".