I made a chat app

General Showcase
1

so I made a chat app in 2 days

it’s like replyte but less features :+1:

https://replit.com/@QwertyQwerty88/Chat

this forum feels kinda dead ngl

only new topics are bugs, replit help, code help

this is the first new showcase in about a week

:woman_shrugging:

8 Likes
3

Yeah, 6 days. The sort by creation date list shows the gaps pretty well:
https://ask.replit.com/c/general/showcase/42?order=created

3 Likes
4

@QwertyQwerty88 Nice!

1 Like
5

@QwertyQwerty88 Just asking, how fo you get the user’s pfp to show up when posting? Not as in ReplAuth, but as in taking the image from auth into the HTML?
Is it storing the headers of the pfp in a variable, then return it to the html, before putting <img src="{{ pfp }}">?

1 Like
6

When a new message is created, I add a dictionary to db['messages'] which has another dictionary with user info:

@socketio.on('message')
def new_message(data: dict) -> None:
    data['timestamp'] = datetime.now().isoformat()
    data['user'] = {
        'name': users.current.username,
        'pfp': request.headers['x-replit-user-profile-image']  # <--
    }
    db['messages'].append(data)
    emit('message', data, broadcast=True)
    print(f"{data['user']['name']} sent a message: {data}")

I use this info in chat.html by looping through the messages:

<div id="messages">
  {% for message in messages %}
  <div class="message">
    <img src="{{ message['user']['pfp'] }}" alt="PFP" class="pfp" />
    <span class="username">{{ message['user']['name'] }}</span>
    <span class="timestamp">{{ message['timestamp'] | format }}</span>
    <p>{{ message['content'] }}</p>
  </div>
  {% else %}
  <p>No messages yet. Start the discussion!</p>
  {% endfor %}
</div>

And I define messages to be db['messages']:

@app.context_processor
def context_processor() -> dict:
    return {
        'none': None,
        'user': users.current,
        'messages': db['messages']  # <--
    }
1 Like
7

This form is not advertised a lot for some reason