How to create a 2 ways conversation between a web app and smart phone via SMS

Overview

May be you received these appointment confirmation via SMS where you have to answer C, to confirm. I have been playing for years with the Twilio API to send text message, but I wanted to build a 2 way conversations, that is to say

1. From a web app client a person can send a SMS text to my iPhone
2. I receive the text and from my iPhone I can answer the text with another text. The answer is then sent back in real time to the web app.

Try the web app: Start a conversation with me, using this web app and my iPhone.

Applications

In these 2 screen shots, you can see that 

1. A user went to the address ftorres.azurewebsites.net/sms, then enter the text 'How are you?' and press the Send button. I received the message as an SMS text on my iPhone.
2. I answered back with the message 'Ok and you' which was received right away by the web app running in the browser.

Technical Implementation

A few words about the Twilio SMS api

When you want to send SMS with the Twilio API, you first need to buy a phone number, which cost $1 per month. This phone number allow you to

1. When you send a SMS text programmatically, the SMS text for the receiver comes from this phone number.
2. When you answer the text, the answer is sent to this phone number, which does nothing. But you can setup a web hook associate with this phone number to be called when it received a text. In other words when somebody send a SMS text this phone number, a custom REST API call is made and the custom API can do something with the source phone number and text message itself.

Sending the SMS text

1. From the web app, when the Send button is clicked, the app execute the following REST call
• https://xxxxxx.azurewebsites.net/api/sms/19787606031/How%20are%20you%3F
2. In the Azure cloud at the address https://xxxxxx.azurewebsites.net/api/sms is an Azure Function written in C# that will use the Twilio API to send the SMS text (source method SendSms in the file AzureFunctions.SMS.API.cs).

Handling the answer

When I answer to the first text message, my answer and plenty of other information are sent the Twilio phone number I bought, the phone number is associated with a web hook configured with the following URL

• https://xxxxxx.azurewebsites.net/api/sms/receive

The REST API is written in C# and running in another Azure Function (source method ReceiveSms in the file AzureFunctions.SMS.API.cs).

What the ReceiveSms method does is, it take all the name/value coming from Twilio (including the variable body which contain the text of the answer), serialized then into a JSON object and  publish the JSON string into an MQTT channel.

My Web App is listening to this MQTT channel and when it received a message, this mean that I sent an asnwer to the person behind the browser. The Web App parse the JSON, extract and display the content of the property Body.

List of technologies

Front end:	REACT
Back end:	Azure Functions written in C#, implementing a REST API. I developed the Azure Functions with Visual Studio (rather then from the cloud editor), ran and debug locally, then publish in Azure.
SMS Provider:	Twilio
Real time communication:	MQTT (broker www.CloudMQTT.com)

Multi Users Support

In the current state of the code, I cannot support having conversation with multiple users.
One thing I could do to support it is to prefix all the text message with a [Web-App-Id] text-message.

The Web-App-Id, can just be a unique random id, which would also be used as the MQTT client id. Therefore when each web apps running different browser instances receive an answer, they client could  determine is the answer is addressed to itself.

The annoying thing with this solution is that I would have to prefix my answer with [Web-App-Id],
to define the destination user, and I am not very good with iPhone keyboard.