Monitor Twilio Voice Call Status - reactjs

I am implementing the Twilio Programmable Voice to allow Outgoing calls to phone numbers from my Website.
I want to display a timer after the call has been picked by the client but I can't figure out how to monitor the status of a call in React.
Twilio Docs - .status() can be used to get the current status of the call.
They have the following endpoint status() which can be used but in this case, should I create a function which keeps on checking the status of the call somehow until it reaches the accepted state?
Is there a way I can track this?

Twilio developer evangelist here.
The best way to track the status of a Twilio Client call at the moment is via the webhook status callbacks that you can set up in TwiML. This means you need to somehow send the data from the webhook to your client, but it is more accurate than polling.
Alternatively, you could just set up a setInterval to check every 100ms, for example, and set your state, cancelling the interval when it is the correct state.

Related

How to subscribe to Salesforce connected app webhooks?

I want to implement a connected OAuth app in Salesforce which should trigger push events in case some entities changed, for example an opportunity was closed.
Zapier implemented something similar
https://zapier.com/apps/salesforce/integrations/webhook
Could not find something I need which is a simple way to subscribe to entity changes using the OAuth client's token and passing a webhook endpoint. I read about apex callouts, streaming API and outbound messages.
Yeah, we solved this exact problem at Fusebit and I can help you understand the process as well.
Typically speaking here's what you need to do:
Create triggers on the Salesforce Objects you want to get updates for
Upload Apex class that will send an outgoing message to a pre-determined URL
Enable Remote Site Setting for the Domain you want to send the message to
Add in Secret Verification (or other auth method) to prevent spamming of your external URL
If you're leveraging javascript, then you can use the jsforce sdk & salesforce tooling API to push the code into the salesforce instance AFTER the Auth flow has occurred AND on Salesforce Instances that have API access enabled (typically - this is enterprise and above OR professional with API enabled).
This will be helpful for you to look through: https://jamesward.com/2014/06/30/create-webhooks-on-salesforce-com/
FYI - Zapier's webhooks implementation is actually polling every 15 minutes, instead of real-time incoming events.
In which programming language?
For consuming outbound messages you just need to be able to accept an XML message and send back "Ack" message to acknowledge receiving, otherwise SF will keep trying to resend it for 24h.
For consuming platform events / streaming API / Change Data Capture (CDC) you'll need to raise the event in SF (Platform Event you could raise from code, flow, process builder, CDC would happen automatically, you just tell it which objects it should track).
And then in client app you'd need to login to SF (SOAP or REST API), subscribe to channel (any library that supports cometd should be fine). Have you seen "EMP Connector", mentioned for example in https://trailhead.salesforce.com/en/content/learn/modules/change-data-capture/subscribe-to-events?trail_id=architect-solutions-with-the-right-api ?
Picking right messaging way is an art, there's free course that can help: https://trailhead.salesforce.com/en/content/learn/trails/architect-solutions-with-the-right-api
And pretty awesome PDF if you want to study for certification: https://resources.docs.salesforce.com/sfdc/pdf/integration_patterns_and_practices.pdf

Display realtime data in reactjs

I'm sending data from my backend every 10 seconds and I wanted to display that data in reactjs. I've searched on the net to use socket.io to display real-time data. Is there a better way to use it?
If you're dead set on updating your data every 10 seconds, it would make more sense to make a request from the client to the server, as HTTP requests can only be opened from client to server. By using HTTP requests, you won't need to use socket.io, but socket.io is an easy alternative if you need much faster requests.
Depending on how you are generating the data being sent from your backend, specifically if you are using a database, there is most likely a way to subscribe to changes in the database. This would actually update the data in realtime, without a 10 second delay.
If you want a more detailed answer, you'll have to provide more detail regarding your question: what data are you sending? where is it coming from or how are you generating it?
I'm working on an autodialer feature, in which an agent will get a call when I trigger the button from the frontend (using react js language), and then automatically all the leads in the agent assigned portal will get back-to-back calls from agent number. However, because this process is automatic, the agent won't know who the agent has called, so I want to establish a real-time connection so that I can show a popup on the frontend that contains information about the lead who was called.

How to leave Voice mail using Twilio?

I'am trying to send recorded messages to phone numbers using twilio & salesforce. The problem i am facing that some times the call is going to Voice mail and the message is not getting recorded as the voice mail recording starts after a certain time. How can twilio manage to monitor that time and play the message after the voice mail starts recording.
Now i know that the voice mail recording system uses a beep before it starts recording. Can i use that DTMF tone to instruct twilio to start playing the recorded message.
Twilio developer evangelist here.
Twilio is able to do some, experimental, checking for answering machines such that it will only start playing after it hears a beep. You can see how to do this in the documentation here. Basically, you need to pass an ifMachine parameter of "Continue". You will then get an "AnsweredBy" parameter in calls to your TwiML so that you can decide what to do. If you do continue, Twilio will wait for the beep.
Let me know if that helps!
Update
The ifMachine parameter has been deprecated and replaced with the new Twilio Answering Machine Detection.
Now you can pass a parameter called MachineDetection with the argument Enable or DetectMessageEnd. Enable tries to give you an answer as soon as possible, passing the result to the TwiML webhook within the AnsweredBy parameter. DetectMessageEnd will call the webhook once the voicemail message has finished playing.

Channel API channel gets disconnected without onclose or onerror calls. JavaScript console has logs of failed HTTP calls to talkgadget.google.com

I have implemented Google App Engine's Channel API feature in my application. Everything runs smoothly. I create new channels every one hour for every user. I have managed to maintain one channel per session (same channel for different tabs in a browser). I have implemented the onerror and onclose methods in such a way that every time they are invoked, a call is made to the server requesting for a valid token.
Sometimes, after the channel's been alive for a while, it gets disconnected. I can see failed HTTP calls to talkgadget.google.com on the JavaScript console. The URLs are something like this:
https://129.talkgadget.google.com/talkgadget/dch/bind?VER=8&clid=.....
These calls have responses like "401 (Token timed out)" or "401 (Token invalid)".
Which is indeed true, the token used by the client is invalid. It should get updated with the new token but the onerror or onclose methods aren't invoked. How am I supposed to figure out when this would happen or how to handle it? There is no real way to say if a client is disconnected or not except for the onerror or onclose methods. This issue is resolved if I refresh the page (I get the valid token from database every time the user refreshes).
I checked the socket objects's "readyState" property and it had the value 1. There are many who face this issue and as of date, there seems to be no valid solution offered by the folks at GAE.
Edit: I'm a premium account holder and this issue is holding back our deployments.
Edit 2: Having one channel per tab reduces the frequency of this happening. But it doesn't solve the problem completely.
It has been six days since I posted the question and there has been no response from the AppEngine team or any other users.
The workaround I applied was to have a button on the site that would fetch the (valid) token from the database, close the channel and then open it again with the token received.
Sometimes its a new token which should've been received before, sometimes its the same token that had been valid all along.
This issue cannot be replicated often I agree, but when it happens, it causes a lot of damage. I hope I find a solution soon.
Edit: Having one channel per tab reduces the frequency of this happening. But it doesn't solve the problem completely.

GAE: Only one channel to a page? How is this enforced?

This may be a naive question but I was planning to create a new channel just before the existing channel timed out to make sure that my client was never without a channel. I thought I was being pretty clever until I read this caveat in the google channel api docs:
One Client Per Channel Per Page
A client can only connect to one channel per page. If an application needs to send multiple types of data to a client, aggregate it on the server side and send it to appropriate handlers in the client’s socket.onmessage callback.
I'm new to this, but it's not obvious to me how the channel unique identifies the page to which it is connected. Is there something in the javascript for channel.open() call that identifies the page it is being called in?
Thanks.
The channel javascript creates a hidden iframe with a given id (on production). The communications takes place within the iframe. The javascript code will always access that iframe (and hence channel).
When you close the socket and channel, the hidden iframe will be destroyed. Afterwards you can create a new channe for the page.

Resources