use webhook to trigger a get request in twilio


I am building a chat component. This component uses Redux. My Chat component has a useEffect that dispatch(listConversations()) and retrieves the conversation along with its messages.

When someone sends a text to my chatApp twilio automatically updates the conversation with the new text message. The problem is, in order for me to see the message in my app I have to hit refresh and Execute a useEffect that dispatch(listConversations()).

My solution im thinking is a webhook?

I set up Ngrok successfully on my computer to create a url that points to my localhost backend for development.

http://ngrok.io —-> localhost:5000

I have successfully created a webhook for my conversation like so

 await subClient.conversations.services(convoServiceSid)
        .conversations(newConvoId)
        .webhooks
        .create({
           'configuration.method': 'GET',
           'configuration.filters': ['onMessageAdded', 'onConversationRemoved'],
           'configuration.url': ' http://3de1-a30-00-8547.ngrok.io/conversation-messages',
           target: 'webhook'
         })
        .then(webhook => console.log(webhook.sid));

My thought is that this will trigger a ‘GET’ request to my backend /conversation-messages and this will trigger the function I have below. But what I’m not sure of is if the GET comes from twilio, will the response go to my frontend or back to the Webhook server in this case twilio?

When I refresh my page this function below is called, But when I setup my webhook it doesnt get called. Am I doing this wrong?

  const listConversationMessages = async (req, res) => {
        console.log("list conversation Messages triggered")
        console.log(req.body)
        const { subActServiceSid, subActAuthToken, convoServiceSid} = req.user
        const subClient = require('twilio')(subActServiceSid, subActAuthToken)
        const allConversationSids = []
        const allMessages = []
        const sortedMessages = []
        const options = { weekday: 'long'}
        const monthOptions = { month: 'long'}
       

        await subClient.conversations.services(convoServiceSid)
        .conversations
        .list()
        .then(conversations => conversations.forEach(c => allConversationSids.push(c.sid))); // conversation possibly has "read" property?
        await Promise.all(allConversationSids.map( async (convo) => {
           await subClient.conversations.services(convoServiceSid)
           .conversations(convo)
           .messages
           .list({limit: 20})
           .then(messages => messages.forEach(m => allMessages.push({"messagesId": m.conversationSid, "participantSid": m.participantSid,  "message": m.body, "time": { "day": new Intl.DateTimeFormat('en-US', options).format(m.dateCreated.getDay()), "hour": m.dateCreated.getHours() + ":" + m.dateCreated.getMinutes(), "date": new Intl.DateTimeFormat('en-US', monthOptions).format(m.dateCreated.getMonth()) + " " + m.dateCreated.getDate() + ", " + m.dateCreated.getFullYear()}})));
        }))
       let response
        if(allMessages.length < 1 ) {
        response = [{"messagesId": 1 , "content": [{ "participantSid": 2,  "message": "test"} ]}]
        } else {
        response = allMessages
    }
   
    result = await response.reduce(function (accumulator, indexOfObject) {
        accumulator[indexOfObject.messagesId] = accumulator[indexOfObject.messagesId] || [];
        accumulator[indexOfObject.messagesId].push(indexOfObject);       //it generates a new property a.messagesId with an array if it does not exist (the value of not existing properties is undefined). if exist, it assign itself
        return accumulator;
    }, Object.create({}));
  
    sortedMessages.push(result)
    const finalResult = Object.entries(sortedMessages[0]).map(([id, content]) => ({ id, content }))
    res.json(finalResult)
       }```

Source: React – Stack Overflow

November 20, 2021
Category : News
Tags: node.js | reactjs | redux | twilio | webhooks

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.