Peer-to-Peer Chat

Using a peer-to-peer (or one-on-one) chat, you can let your users initiate private chats with other users. One of the options to add such a functionality is integrating third-party tools such as AtomChat. But it’s also possible to build a peer-to-peer chat using just Softr and Airtable. Let’s see how.

We are going to break down Cole Fortman’s video that showcases an application where each user has access to the list of all the members in the application and can initiate a chat with any of the members. Users also have access to all the past conversations and can continue from where they’ve left.

Our chat application contains three users: Bob Ross, Tony Stark, and Bruce Wayne. The recording below shows how we log in with Bob Ross’s account, navigate to All Members, and initiate a chat with Tony Stark.

There’s also a Conversations section, where each user can see the list of all the conversations he/she has participated in, open those, and continue chatting.

We are first going to look into the Softr side of the application to see how each page is set up. Then, we will take a closer look into the Airtable base that serves as a data source for the app.

First comes the home page, where we have a List Details block that is connected to the Users table on Airtable. A conditional filter is applied to show each user his/her own details.

The block shows such user details as name and email as well as Total Conversations and Total Conversations Started fields from Airtable, which we’ll explore in greater detail when we proceed to the Airtable setup.

Next, we have the All Members page, which is a List block that shows the list of all users and has a View Profile button that opens the Member Details page, which we’ll discuss next.

Similar to the Home page, the Member Details page contains a List Details block that shows some user info. But it also has a Customizable Form block that consists of a Start Conversation button and sends two hidden field values.

Basically, the form creates a new record in the Conversations table on Airtable, passing the Record ID of the logged-in user who is initiating the conversation as well as the the Recipient user’s Record ID, which is the ID of the current record (user profile) that’s opened in the Member Details page.

When the form is submitted, the user is taken to the All Conversations page (through “On Form Submit” Action), where he/she can already view and access the newly-created conversation. Now, let’s see how the All Conversations page is configured.

The All Conversations page contains an Inbox block that is connected to the Conversations table on Airtable, which contains all the conversations initiated between users.

In order for users to have access to their own conversations only, a conditional filter is applied that shows only those conversations where the logged-in user is either a starter or a recipient of the conversation.

Each conversation contains Recipient User’s Profile Picture, the Conversation ID (displays the names of the starter and recipient users), Last Message (displays time and date of the last message sent within the given conversation), Total Conversation Messages (calculates the total number of messages exchanged within the given conversation), and an Open Conversation button that opens the page with the actual conversation (Conversation Details page).

We’ll take a closer look at how these fields are set up in Airtable in a bit. Now, let’s navigate to the Conversation Details page to see how it’s configured.

The first block is a List Details that’s linked to the Conversations table to indicate which conversation the user is currently on.

The block displays the Conversation ID field, which is simply a combination of the conversation starter and recipient names.

Next comes a Comments block where the messaging happens. It is connected to the Messages table on Airtable.

As you can see below, the block sends such data as Commenter ID (the name of the person initiating the chat), the record ID of the conversation where the messaging happens (Current record parameter), the message body text (Comment field parameter), as well as the date.

That’s it for the Softr-side setup, now let’s navigate to the Airtable base of the project and see how the tables we’ve just been discussing are organized.

First comes the Users table, where all the user data is stored. It contains such fields as Name, Profile Picture, and Email. Further on, we have three linked records:

Then, we have the Total Conversations Started and Total Conversations Received fields, which calculate the number of conversations based on the Conversations Started and Conversations Received fields that we just reviewed. The last Total Conversations field just sums up the value from the two previous fields through a formula.

Here, we have the Conversation Starter User and Recipient User fields (linked records from the Users table) and the Conversation ID field, which is a concatenation of these two fields. Also, there’s the Messages field, which is a linked record from the Messages table (as we’ve already discussed, each message is submitted under a specific conversation and is automatically linked to that conversation).

Then, we have a few fields that look up user data from the Users table.

Lastly, there are a few more fields that calculate things like Total Messages or Conversation Age as well as indicate the Record ID of the record through the RECORD_ID () formula.

The last table we have in this base is the Messages table. Here, we store all the messages linked to their corresponding conversations (Conversations field) and senders (the ID field).

And there you have it. We hope that we’ve been able to provide sufficient detail to let you recreate this (or a similar) setup on your side. Enjoy!