Chat: Best practices and options

[m1ga]

I would love to here some best practices for building a chat inside your apps:

• which chat provider do you use?
• extra parts for push (e.g. Firebase)?
• how do you implement the chat bubbles? Scrolling, Lazy loading etc.
• extras like encryption, sending/viewing images or videos?

So far I only did some tests using PubNub since they have section about Titanium at https://www.pubnub.com/docs/sdks/javascript/titanium and a basic ListView for the messages and a TextField for the input. But no production chat yet.

Anyone got some experience about stability and reliability?

Available chat providers:

• PubNub
• live chat with Socket.io (Demo project)
• Slack API
• Pusher

[juancarlosso]

Well... i made one in a very rustic way, but functional so far. it was made with setTimeout.
Chat_preview
Chat_preview2
Is not the best solution, but the chat works fine.

[m1ga]

but that will just be a live chat or do you use push if the app is closed?

[juancarlosso]

Yes, there are push notifications involve.
If i text, the other part receive push and viceversa.

[juancarlosso]

Now.. the bubble is made of 3 images.... Top, Middle and Bottom...
So, i create a view with SIZE and vertical layout and then i put the top image, after that i add a view with a label using the finally the bottom image..

`var vistaChat = Ti.UI.createView({
        width:  Ti.UI.FILL,
        height: Ti.UI.SIZE,
    });
    row.add(vistaChat);
    var vistaIzquierda = Ti.UI.createView({
        width: '1%',
        left: 0,
        height: Ti.UI.SIZE
    });
    vistaChat.add(vistaIzquierda);
    
    var vistaDerecha = Ti.UI.createView({
        left: '2',
        width: '99%',
        height: Ti.UI.SIZE,
        layout: 'vertical',
    });
    vistaChat.add(vistaDerecha);
    var superior = Ti.UI.createImageView({ 
        image: ( tipo=="ENVIAR") ? '/images/BtopUsuario.png' : '/images/Btop.png',
        width: '99%',
        height: '20'
    });
    vistaDerecha.add(superior);

    var medio = Ti.UI.createView({
        layout: 'vertical',
        backgroundImage: ( tipo=="ENVIAR") ?  '/images/BmiddleUsuario.png' : '/images/Bmiddle.png',
        width: '99%',
        height: Titanium.UI.SIZE
    });

    var lblTexto = Titanium.UI.createLabel({
        right: '5.5%',
        width: '83%',
        height: Titanium.UI.SIZE,
        textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
       	text: texto,
       	color: colorTexto,
       	font: { fontFamily: params.fuente_primaria, fontSize: 14 }
    });
    medio.add(lblTexto);

    var lblFecha = Titanium.UI.createLabel({
        right: '5.5%',
        width: '83%',
        height: Titanium.UI.SIZE,
        textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT,
       	text: fecha, // Utiles.FechaCadena(fecha),
       	color: params.color6,
       	font: { fontFamily: params.fuente_primaria, fontSize: 10 }
    });
    medio.add(lblFecha);

    vistaDerecha.add(medio);
    var inferior = Ti.UI.createImageView({
        image: ( tipo=="ENVIAR") ? '/images/BbottomUsuario.png' : '/images/Bbottom.png',
        width: '99%',
        height: '20'
    });
    vistaDerecha.add(inferior);`

And here you have the bubbles images.
http://jasoluciones.info/temporal/chatbubbles.zip

[caspahouzer]

I used slack requesting their api to realize a support chat.

Every support request opens a new thread. This thread was read out and displayed like WhatsApp.

The support member just replies in the thread and the app receives a push.

Unfortunately I have no screenshot, but it looks very nice. With profile images and so on.

[m1ga]

Interesting approach, I like that you can use the normal Slack app for the support user!
I've added the Slack API to the list in the first post 👍

[joshualambert]

Pusher FTW! We used OneSignal to notify the user that there were messages available if the app was in the background. When the app went into focus, Pusher library was loaded off screen in a webView to drive the chat experience that lived over in a ListView. It was a solid experience and super performant too.

[joshualambert]

https://pusher.com/

[m1ga]

Nice! Added that to the list. They have a native API too and there are (really) old modules (iOS, iOS, Android), perhaps that would make it even better to use instead of a webview

[nuborian]

Build a chat a while ago using socket.io and a listview. working like expected, but couldn't reach the 100% smooth "feeling" like whatsapp for example. Let's say it was 80-90%. 2 years ago or so - maybe with newest SDK's / better devices it's more "native". =)

[gjerlow]

We have a couple of apps in production with PubNub as the messaging service. Using PubNub for messaging with push notifications, and firebase.couldmessaging for receiving the push messages in the app. Only positive experiences using PubNub so far, and they provide most of the chat features needed (encryption, meta-data, sending images etc.)

For the chat UI we have used both ScrollView and ListView to display the messages. Both are working fine, but in our experience the ListView approach is more performant and easier to work with.

I guess a TableView would be a good choice if more complex UI is needed, such as quick reply buttons, message reactions etc.

[m1ga]

Sounds great! TableView/ListView performance should be the same with >9.3.x (both use RecyclerViews).
Thanks for the feedback