This is the second part of the Chatterbox series. For your convenience you can find other parts in the table of contents in Part 1 – Origins

So we have our system for IM and we’d like to have a nice UI for chatting with people. Obviously, we could use regular web interfaces (like for Facebook) but the whole point is to have everything in one place, no matter what network we use. Let’s go and see couple solutions.

Self maintained UI

Obviously, we can just implement something. This doesn’t sound like a big deal, right? Just a webpage, contact list, chat window, text box and button to send message. However, there are many things we take for granted and implementing them just takes time:

• Just a nice UI — reading black text on white background works well for 5 minutes. It’s good to have colors, shapes, etc.
• Timestamp formatting — sounds simple but if you travel then it’s important to show “human friendly” time in local timezone, not something in UTC. This most likely require some front logic in JS
• Link previews — it’s cool to see the page without opening the browser, not to mention playing YT videos or embedding images
• Message markers — was the message sent? Delivered? Displayed? How many people read it in the group chat?
• Highlighting new messages, showing popups, managing sounds
• This should be fast, work on all your devices (imagine HTML support on older tablets, scale to width etc)

There are just so many things to implement. Obviously, having custom UI is good but it’d be great if we could “just have” the UI.

No UI at all

Maybe don’t use UI at all, maybe go with emails, flat files or something similar? Well, this works pretty god for some time but is much harder to maintain. It’s easy to lose track of who you’re talking to (because emails look the same, only subjects are different).

I was using this approach for some time and it worked well for a secondary communicator. Once I switched entirely to Chatterbox, it was a no go. Depending how much you talk to people, it’s just good to have some decent interface.

Also, conversation statuses are slightly harder. How do you indicate that some message was read by the other side? You send another email?

Reusing webclient

You could go with some online IRC or XMPP client, just wire your communicator into server and you’re good. There are even platforms like that — for instance Bitlbee. You expose “regular” server and connect to it using any IRC client you want. What’s more, you can change your client any time, just go with different IRC application. You have it for any OS, any device, desktop-based, web-based, etc.

You may have some hard times with sharing media, though. You need to upload files somewhere, either you host them by yourself, or you reuse some public hostings. This is not as simple as it can be, not to mention, that it still needs to go through IRC protocol (or whatever protocol you use). Can be tricky for bigger files, unrecognized extensions etc.

Showing conversation updates may be harder, though. How to show that someone read the message? You send regular IRC status update? It can get messy.

Big drawback is that this may be effectively stateless. Once you push a message, you cannot modify it which means that any editions, status updates etc are getting hard.

Reusing platform

Obviously, reusing sounds like a good idea. And there are multiple platforms out there which you can use and wire through your IM. Most popular are Slack, Discord, Mattermost, Rocketchat, Fleep.

These platforms are pretty powerful. They have their dedicated mobile clients, web interfaces, they support file uploads, permission managements etc.

How do you show conversation statuses? Just use reactions. You can show “chains” icon to indicate message is being processed or “thumbs up” for delivered one. You can also inject CSS to change background for delivered messages, etc. It maybe slightly harder for mobile client but generally works pretty well. Also, since this is just a web interface, if you need to tune it more (like plug your proxy etc), you can always write simple desktop webview app and do the magic.

I’m using chat like this for couple years now and works really good. I have status updates, chat rooms for each contact, link previews, file uploads etc. What’s more, it’s hosted by the owner so I don’t need to maintain it (we’ll get to security later in this series). And what’s more, it’s free.

How hard is it to script platform like this? It took me 3 hours for the first one. You just need to create new chat room for contact, invite two users (your main which you’ll be logging in and another one for “the other side” (or use webhooks)), configure notifications etc. Everything else is given to you out of the box, depending on the platform you go with.

There are drawbacks obviously. You are not free to implement anything you like (modifying messages may be harder). You may get throttled. You need to implement security (because it is hosted beyond your control). It may just die one day, stop being free, or block your account for suspicious activity. Sure, it may not work at all one day. Also, since you push messages to the platform, they’ll have effectively two timestamps — one of the time when it was pushed to Slack-like place, the other one of the “actual” send time (and these timestamps may be heavily out of sync).