Facebook like chat

Anvil Q&A
1

How to create something like facebook chat? So users can communicate to each other.
e.g:
[pp] {otherusername}
{“Message”}

                                                        [pp]{me}
                                                         {"Message"}

[ Type messge ] [sendButton]

2 Likes
2

I would probably use the DataTables service in the following way:

  • create a table called “messages”
  • give it the columns “to”, “from”, and “message”

So, each row in the table shows a message, who sent it, and who it was sent to.

Something like that ought to work. I think the to-do list app I linked to above would be a great starting point.

3

I have tried that but it does not show them facebook style.

4

Hi @nciphavl! You might be interested in this comments system and live chat app I created in another thread:

2 Likes
5

Hi @shaun I was able to do that. That will be great for a global chat where everyone is just in one group. I want one where people chat one on one.

6

I’m glad you found my example useful. You can convert it into a one-to-one chat system by replacing the to_channel column in the messages table with a to_user column that links to the users table. Then each message is from a user to another user.

The UI is simple to modify too: Change the ‘Channel’ dropdown to select a user instead. When a user is selected in the dropdown, display the messages from that user to the logged-in user, and from the logged-in user to the selected user.

Then instead of channels, you will have a one-to-one chat history between each pair of users.

5 Likes
7

I did the other way.

I have Two tables. Table: Messages and Repleies.

Table Messages has these entities:Column SentTime, Column Read, Column FromUser and Column ToUser. Then table Replies has these entities: Link to users, Text and and Link to table messages. I am just going to alternate them using Conditional programming.

1 Like
8

Hi @shaun I love your commenting system for it also helped me with the App that I am creating on other fields. I will also recognize you in the app that I am creating for you made other things easy for me.

9

Thanks @nciphavl that’s very kind of you :slight_smile: . I’m always happy to help.

10

Hi @shaun,

I’ve updated the CSS to show the chat messages in bottom up manner, instead of top down.

.anvil-role-conversation-panel {
  display: flex;
  flex-direction: column-reverse;
  border: 1px solid #888;
  overflow-y: scroll;
  overflow-x: hidden; /* ew, but I'm not debugging CSS for the next hour */
  height: 60vh;
}

This modified CSS also eliminated the requirement of “scrollDown()” function. Thought it might be useful for some people. :slight_smile:

Even though, this is exactly what I wanted for my experimental chat app; however, I’m still not quite sure how/why the items are getting populated in non-reverse order. Shouldn’t the CSS “flex-direction: column-reverse” affect the ordering?

1 Like
11

Hi @proshno. Could you share a clone link for your version of the app? I can try to figure out what’s going on if I can see the app as a whole.

(If it’s a production app you don’t want to share, perhaps you can create a simplified version with just the chat widget.)

12

Hi @shaun,

Here it is: https://anvil.works/build#clone:OIELGECWMEN5HTGG=FI6UCDN5FSBCG5IFO6F4MUMD

13

Oh I see, that’s based on the Magical Concierge example app. If you want a more cut-down version of a live chat app, have a look my Live Chat app:

https://anvil.works/ide#clone:6APMATYZGK473ZLK=XYBGEZNNM7ELXGFJW6LHHIMM

In either case, you don’t need CSS to change the order from oldest-first to newest-first. You can simply reverse the order of the messages list in the Python code.

In my Live Chat app, you can change:

    return app_tables.messages.search(tables.order_by('when', ascending=False), to_channel=channel)

to:

    return app_tables.messages.search(tables.order_by('when', ascending=True) to_channel=channel)

in ServerModule1.

Reversing the list order is a bit trickier in the Magical Concierge app because it’s only fetching the messages it doesn’t know about, rather than refreshing the entire message list each time. I’ll leave that one as an excercise for the reader ( :wink: ), but here’s a hint: you can import the Data Tables query operators:

import anvil.tables.query as q

which will help with finding which messages have been created since last_seen_event.

Here’s a comprehensive guide to the query operators.

1 Like