I'm making a web app that allows users to create an account and then join a room. Inside the room they can click a button and essentially allows them to pick who they are gonna give a gift to randomly. The problem I'm having is how do I update a data object from vue if the database updates for all users. What I mean is if a another user joined a room, the new user has the updated data object but all the other users who came before him will have the outdated data object. So what I'm essentially asking is how would vue update a data object if the database updates.

And by data object I mean something like this

data() {
 return {
  room: { name: "room", users: [] }
 }
}

Does the update() lifecycle hook do that? or computed()? And before anyone answers, remember I need it to update to ALL the users that joined the room.

I'm using vue2 since I'm using vuetify

CodePudding user response：

As Fatur said above, typically with an open-game style like this where you join a room and new users can join and leave, you would want to setup a web connection (web socket) to be constantly aware of who's in the room.

Since you're using the Vuetify framework already, you could probably add Vue Native Websocket to your project pretty easily. I've never used it, but it looks like it's a solid project that's updated on a pretty consistent basis.

The only alternative to this that I can think of immediately would be: every time the user clicks the button to gift a random user, hit the database or API for all of the current users in the room. But again, users could enter the room while you're making this request, and I don't really recommend this. Additionally, this would hammer your database or API pretty hard if you have multiple rooms, which is another reason I don't recommend this.