Developing a Chat App

I don’t think for one second that I could create the next Discord, but I’ve always wanted to make my own chat app and learn from the journey, and there’s no better time than now, am I right? I also wanted to experiment with novel ideas, like using IndieLogin or ATProto for user accounts and federation.

In the past I might have created a separate simple HTML page and a Node.js/C# server, but I decided to use Astro for the whole stack so I can learn some new concepts that I can apply to my personal website.

Not knowing how to have JavaScript running persistently on Astro, I found this tutorial that coincidentally showed how to specifically make a chat app using server-sent events. There was a bug with Astro that prevented their code from working, and I found GitHub issue and accompanying pull request draft from a couple months ago, but I couldn’t figure out how to fix it myself. I ended up finding a trick to handle connection closures properly, which was the last piece of the puzzle.

It’s a very simple architecture that I will be expanding on soon, but I wanted to deploy it right now and have my friends test it with me! Thank you Kett for showing me how to set up an SSH remote tunnel <3

Here is our silly chat log :3 There are no names because I did not implement it, so have fun guessing who is who :P

sorry for the crude ui I haven't done the css yet lol
meow :3
meoww
hi ketty!!
haaaiiii
😺
this is pretty simply behind the scenes, using SSE
but I dig it :3
the latency you feel is cause of my phone hotspot lol
<marquee>nom</marquee>
awwwww
lol
*bites*
*blepping*
if i refresh does it preserve history
aaahh it seems to
whats sse
mhm! the server currently stores and sends the whole message history
SSE is server-sent events
distinct from websockets in someway o3o
reading the mdn entry on SSE i definitely read this page before lol
waow...
sending comparison screenshot in discord
especially the bit about the connection limit over non HTTP/2 connections
rawr
<
Hewoooo :3
is squishy
hewwo :3
I'm reading that page rn and that's a really odd limitation? why would http/2 be special
hewwoooo
I will have all my messages like 'this' for now
'here is a tiny example :3'
it's all voices unattributed
pfft yeah I didn't get around to usernames or anything lol
i implemented a little chat thing over websockets years ago in godot
'i quite like this way of texting'
I'll have to consider if websockets is preferable for a chat app, I used SSE cause it was just what the tutorial I was following said to use
'is there anyway to send pictures or is it just text?'
it's just text, but I'd like to support images
i seeee
''
thank you guys for testing this silly thing out <3
it's cool to see it working in prod
hehehehe
'you're welcome chai! I always like testing out new things :3'

I don’t know what to call this chat app yet. I’ve come up with names like Harmony and Concord, * Very creative, I know. and even Hackachat because this is may likely be more suited for technical users. There’s probably some cool or silly name that would be perfect for this project, so if you’ve got any suggestions feel free to comment them below :3