Firestore Megachat - Let's Build a Chat App

[@Fireship]

Just a heads up... Megachat has been taken down temporarily because we exceeded the free limits of Firestore. This is a result of a user spamming writes to the DB, which has inspired a future video about preventing this type of issue.

[@troykoss]

jerks

[@kld0093]

should i be happy or angry, I'm confused

[@MaximYudayev]

Has that video come out already? Would love to see your solution if it is about change of the disabled parameter on user profile or something else

[@baptiste6436]

@@MaximYudayev I'd guess you'd just create an anti-spam function inside your code

[@kevintlu]

Wait, why do you only have spark plan if you love firebase so much?

[@delta4v]

The opening song of your video is always appealing that makes me enjoy video even more!

[@PlanetComputer]

ghjk

[@mvvbuch]

I’m building a chat app to play and learn firebase :) This is just in time to help :) Thanks

[@zvikarp8149]

Great video! Can't wait for a real-time Google maps + firestore tracking app.

[@himself187]

just deploy more satelites in space, say thousands and thousands of them, then you will be good

[@wobsoriano]

Awesome! Going to have a talk about firebase and will use this as my sample.

[@zozo1603]

Nice job, keep on going. I like how you build on earlier vids :)

[@kumarvishalben]

The best channel on Firebase,,

[@josephsteve08]

i probably picked up a few tricks from this video! you're amazing!

[@troythompson2]

Another really solid video. Had to sign up for a pro membership. Thanks for all the hard work Jeff!

[@jafar1607]

as always.. brevity is what I like about your videos...

[@christopherstock8670]

Good work as always.

[@ockenden]

This is a great solution. Lets face it, a doc for each message is a great way to do it, but 99% of the time you won't need the functionality you are missing out by doing it this way. I'm trying to solve a much bigger problem than this on my app across multiple chats and you've absolutely obliterated the problem and I THINK cut the costs of running my project. I would suggest that you use firebase to set your timestamp, doing it client side can cause all kinds of problems as a user can essentially insert chat messages anywhere they want if you're sorting with your client side timestamp. It would be great if like the other approach you could add an ID to each chat message, that way you could target that message for editing or read receipts. Then again, you could have another field in the doc for read receipts and just update it with a timestamp of when the doc was viewed, then every message that has a server timestamp after it will be marked as read! Just wondering, is it possible to get the file size of a doc in that cloud function? Rather than saying 'after 50 messages', you could just weigh the file and trigger the function if it's 5% off the limit or something? Also, you've now given me a super simple solution to pagination when that cloud function fires. You can just increment a backup doc by 1. Thank you for this, I've been contemplating how to resolve my issue for a while now and you've inspired a few new ideas!

[@Xizor231]

This looks like a fun project!

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@troykoss]

Great stuff as usual!

[@rahulsawant5531]

Great content as always. Thanks 😊👍

[@rajneesh0045]

Amazing content. Thanks a lot and Keep it up.

[@jaytaylor9045]

👍 Good work.

[@patriciovargas3837]

Honestly dude, I'm impressed with your channel and you website overall. Most of the tutorial out there just show how to do basic thins like a todo list, but you take it father and literally show us how to do things that we are going to be used in the real word. Thank so much!! I just did 4 tutorials of yours in the past 3 days and I know my money would be worth for buying the pro membership of your channel. Do you have any student discounts?

[@samywat]

love your videos!

[@morhodesly910]

Cool man. Thank you for the video

[@will_abule]

I love this approach all my cloud function issue is fixed because of statement you made thanks men

[@satheeshrouthu1098]

Appreciate the valuable content!!

[@salahalhaddabi4850]

Thanks Jeff and very nice tips on rxjs especially when it comes to nested subscriptions 👍👍

[@rohanmalik1772]

This chanel is really awesome Thank you!

[@siddhantkumar7036]

Finally a good video on chat app...

[@armandozabala]

The shirt is so great..

[@jilblack1]

great video, helpful tuto ty.

[@RageBasterd]

you make it seem so easy.

[@vikaskumar-im7im]

Thanks for the amazing content.

[@aomo5293]

HI, Very nice video: Thank you

[@JoiAnnKhoo]

Thank you, Hope to see more video out related to bot chat, using state control to manage the workflow and notification for status update.

[@__mayank]

This is exactly what I was looking for!

[@PlanetComputer]

hgjk

[@user-ot1dv6ri4f]

love these videos

[@ajanieniola9172]

Wonderful tutorial

[@razakadam74]

waaooow, my favorite channel on youtube

[@gabrielgutierrez6282]

Thanks for the app!

[@garfiantodwicahyadi413]

Keep sharing jeff

[@FarryEntertainment]

What about billing? This will create many document writes that will increase the cost of the bill?

[@manunoly]

thanks jeff, time to build this chat!!!

[@mehdinaghditam]

Thanks for the great tutorial!

[@RITESHKUMAR-md8fg]

Ohh that's awesome 😮

[@aravindmj3723]

Hope to see more of this kind. Next time please reduce the speed.

[@harpymaslow]

So exactly the video that I needed haha. Are you spying on me ? xD Great video. Thanks a lot

[@PlanetComputer]

ghjk

[@lemonplz]

Best intro yet

[@77thoughts]

thanks man!!! You're awesome

[@boogiedowngames6893]

Just what I needed!

[@PlanetComputer]

ghkj

[@saravananr7681]

every playlist of your video can connected one between one(little bit rxjs, firestore.....)!

[@Fireship]

You can piece them together to build almost anything :)

[@djanblom]

Really great video - thanks a lot :) Could you make a vid about Angular, Firestore and Signaling/PeerConnections(webRtc)?

[@wobsoriano]

I hope we can get a video on firestore real-time with pagination combination.

[@rajrathore4182]

arrayUnion doesn't support servertimestamp. What approach do you suggest to add a reliable timestamp to each message?

[@aidenlangley6439]

Am I right in thinking that sub-collections would remove the document size constraint for this data model?

[@narcodico]

Good shit!

[@gautamsjain]

The issue with this approach is that partial documents aren't read in firebase. So each time the document is updated, the whole document will need to be downloaded for each user that is currently online and chatting. The network egress cost could be more or less equal to what this approach is trying to save. A possible solution for that would be to use this approach along with a webrtc based text chat. The currently online users will get updated p2p while the users that come later will load the last 100 messages in one lump sum document. I haven't tried this yet, so I am not sure what the cist diff would be. But it makes sense in my head. What do you think?

[@davidlutta2503]

I Love FireBase !!!

[@Fireship]

Me too :)

[@tomlemanh5506]

Ayy new video!

[@shashank5383]

Thanks :) Can you make tut on Ionic chat app

[@PureAlbania]

Getting my head around why didn't used the first approach. "the drawback you need to execute a document read for every message on the UI". Why don't just execute a query to get all messages. Even could limit with a Where case and get only the latest using a timestamp?

[@themindstorm9947]

Did you find an explanation for why he did not?

[@KelvinWKiger]

Because precisely, with firestore you pay for each document read, not the query. In the first approach if you would execute a query to get all your messages, you would end up paying a read for each message because each one of them are in a separate document. Take time to read the billing documentation, best for you.

[@KelvinWKiger]

How ever if go with the first approach, and use the _Where_ case to get only the latest message, you will be happy with this solution until your users *log out* and *log in* later willing to read back all the conversations they had.

[@professorhuert7853]

You gotta be careful using this structure because you also pay for egress traffic. Think about it: if the chat reaches 1MB (which it will if it's a very used chat app), then each new user will download 1MB. That'll quickly reach the GBs of download, which then becomes more expensive than paying for the individual reads/writes.

[@aniketpriyadarshi2801]

What copy pasting software do you use

[@herantd]

Wish you could start making these videos with vue 😜

[@OverAndOverAndOver]

Can SMS be implemented? How would this be done?

[@darshangowda309]

Awesome video! I think the decrease in latency for cloud functions is because of the cold start ? And also, would it be economical to use firebase instead ? (only for the chat documents) Considering the union writes, reads from cloud function on every chat and then finally all the deletes!

[@Fireship]

The latency has seemed exceptionally fast lately on several projects, even considering the cold start. RTDB could be more economical, but the total storage cost per GB is much higher, so it depends on your needs.

[@okopyl]

Yo. Could you please record a video showing how to make a web app with WebSockets using Firebase only?

[@DJNomadX]

how do you make is to that two users are connected based on a certain criteria?

[@TheDPsoft]

Comment for the chance! Watching video right now

[@TheCass240]

how would you check if a chat already exists between the two users?

[@Joekay1956]

Hi, I'm trying to rebuild your example, but can't deploy the cloud function to firebase, because of 'src/index.ts:45:18 - error TS2532: Object is possibly 'undefined'. 45 const data = change.after.data();' Why is it so? Thanks for answers. I'm really desperate about this problem. :( And great channel :)

[@peppeneppe4726]

Is it the normal case to save the chat messages unencrypted? I’m afraid that it will not fit the policies of data protection. I mean I could read some really private chats, if I just look at the database. Is it legal to do it this way? Serious question and thanks in advance!

[@Jredivo]

Peppeneppe This is not a profession implementation. It’s more of a demonstration on how to create a basic chat through firebase.

[@rubenheymans1988]

Great content as usual, however it's a bit complicated, can you add references to the docs for the more advanced stuff?

[@Fireship]

I hear you, the full writeup has links to the docs, but I would be happy to extend any specific parts you think need more details. angularfirebase.com/lessons/build-group-chat-with-firestore/

hi there, let think for a moment... what happens if you wan to storage the chat history and you wan to recover it, like a normal chat, what can i do?

[@wilsonsfiso3310]

no matter what I try, I cant get it to create a chat :( , would love to see your home component.... I've looked everywhere for it. much love from South Africa

[@josephfouad3561]

Something I can't understand about rejecting a subcollection or root collection data model, you said to avoid client read per message, but this will happen because every write with trigger a client read as you are listening to changes the document. Why not just make messages into their own collection , then listen to the query snapshot change on that collection? you may also limit the query to only the last document. Thanks

[@Fireship]

I am not rejecting a sub-collection approach, just offering this as a possibility. The reads will only occur when the user is actively listening to the chat. In many cases, the user will be away then open a chat with N new messages, which can be fetched with 1 read.

[@josephfouad3561]

@@Fireship Ok, Thanks for the reply :)

[@Shashank.Shinde]

I want this T-shirt

[@andymonga5801]

Luckily if you set the same document multiple times they don’t get updated by firestore !!!! Your condition if(charLen >= 10000 || msgLen >= maxLen) would trigger the cloud function forever and you would ruin us all ^^ With greater than or equal, this function is triggered twice. First time your condition is met with the upper limit maxLen , then it updates the doc. But all the other times msgLen equals maxLen and it would keep updating infinitely. As I said before, you are lucky here and firestore stops triggering at the second iteration because the docs are the same. You should use a strict comparison instead. if(charLen > 10000 || msgLen > maxLen)

[@nikhiltalwar318]

Awesome !

[@pheaktrakim1212]

If I have something wrong hope you will help me !

[@dusanjovanovski8605]

I don’t agree how you structure data. Overall, good tutorial. Keep up great work

[@KelvinWKiger]

Anything to propose instead?

[@goodcareat]

your content is awesome! how to get a t-shirt? :)

[@ishraq95]

for me return { id: doc.payload.id, ...doc.payload.data() }; its not working.. some errors are showing..

[@shahzadchaudhary560]

quick note: I don't think subcollections count against the parent document's size limitation. Can someone confirm this?

[@alimodz6253]

You are referring to your episodes by number but I can't see any numbers anywhere!!

[@bantinggamer4962]

you keep reference to different episodes but i have no idea how to find them.

[@adnanmalik9543]

Are you up for a video learning platom app/web app project? Basically Like Netflix

[@adnanmalik9543]

*platform

[@vamankumarpatel2652]

github code is not perfect when we do npm i then error is coming pls check. sir

[@tweetydx9967]

If only 1mgb can be stored for document, then how can we stored videos?

[@roethermedia]

Videos should be stored in Firebase Storage. Just add the reference-URL of the video to the Firestore. Then you can access the video via the link in the database.

[@sergioguerrero3117]

Hi, sorry about my english, y try to use firesore but when send or recibe data firestore Is so slow and dont connect whit server AND use local copy , ¿ Can u help me?

[@berdenpaul]

NICE!

[@patrickmullot73]

Hurray to Jeff and his Clone!

[@Fireship]

Haha, was wondering if anyone would catch that

[@r4jjin]

I need T shirt 🤗

[@xit]

I wanna win async await tee.. Remembering good times.

[@lobo22t]

Why firestore and not realtime database?

[@josmbolomnyoi2498]

its hard to learn without source codes..i will have to change channel now thanks in advance

[@kunalr_ai]

Thanks for the episode but I couldn't get it

[@gauthamgrao145]

Awesome

[@camilotabares3778]

Hi Just subscribe to you´re channel, will love to have the sticker

[@pheaktrakim1212]

Sent me this link please sir !

[@amritgupta1792]

Every thing best ...

[@wavesforthemasses]

I feel that this approach is completely wrong for 2 reasons: 1) you are downloading all the messages over and over again at every update. Yes, you'll pay less money, but if the chat is really active, the user will need to download the whole document over and over again at every new message. This means he's downloading way more KB than he needs. Plus you are running a firestore cloud function that will increase your reads and writes..you'll at least double your reads. Anyway this problem with the cloud function could be fixed just checking the messages size on client side and letting the client automatically decide when to create a new archive document that will be populated by a cloud function (archive onCreate) with the old messages. 2) this chat is based on how much you trust people to not hack it. All the users in the chat will be allowed to update that messages field and removing everything or editing someone else messages. You cannot prevent this behavior. So this approach is not secure. SOLUTION If you want to keep your approach instead of having 1 field named messages containing an array of messages, you should have 2 fields (or more, based on the number of allowed members): messages_{firstUserID}: [messages] messages_{secondUserID}: [messages] AND another field named "allowed_members": allowed_members: [firstUserID, secondUserID] SECURITY RULES SIDE: this way you can prevent a member to update a field he shouldn't update. CLIENT SIDE: you download both fields (messages_{firstUserID} and messages_{secondUserID}) and combine them in a single array and sort by date. This is anyway still totally not secure because members can edit their own messages and change the submit date as they prefer. The subcollection approach is probably the only safe one right now.

[@marshallvance6757]

does anyone have a .json file of the database I can import. Thanks.