I'm having troubles chosing the best design for my app.
I'm coding a mobile app and I need to get pictures from my server, and display them using their gps coordinates attributes on a google map using markers.
So, normally I'd just GET them from my api using a simple GET /pictures, but then I thought of a better (and maybe more elegant) way to do it. I wanted to use socket.io for live updating the pictures, because when I get the pictures from the API, I don't get all of them, I only take the ones that are where the client looks on the map (using google maps' getBounds()), so GETting /pictures everytime the user changes where he looks seemed a little bit slow.
Initially, I used google maps' idle event to GET the pictures in an area.
What I would like to do now, is a live updating map using websockets, but I can't understand how I would implement it in my app. Here's the problem:
user1 gets the pictures in an area. He gets the pictures, and they are drawn on the map using markers. Ok.
user2 creates a picture, in the area user1 looks. Or even more generally: user2 makes an action on a picture user1 is looking (liking it, deleting it, creating a new one, whatever)
Now, how does user1 know that an action has been taken? The server could broadcast an emit, but then what? What about other users that aren't looking at the picture?
I just don't get how to be synchronous with the server: deleting a marker when the picture is deleted, incrementing a number when a picture gets a like. I don't get it, and I want to know because I think it would be a very good time to make a real time app, or maybe I'm forcing it and I should stick to HTTP.
I've thought of using setInterval on the client and asking for the pictures (with fresh informations on it) but I don't know if it's the cleanest way to do it.
Thank you for your time
You can still broadcast an emit using socket.io and that would be enough for users who are currently looking at the same area; but you also need to store this new information somewhere (e.g. Database) for users who are not currently looking at the same area, so that when they go to that area they would get the most up to date information from the server/database.
Related
Following Problem:
I want to create a little app for learning purposes that should do following things:
Sign in with Google / FB / ..
React / Redux fetches users clicker count + clicker count of the top 10 clickers
You see a highscore table with the name and click count of top 10
You see your clicker score and on every click you increase it
Now the challenging Part:
I want to update the database on every click (save the click to the user in the db)
Update the highscore dynamically
So if another user clicks for example 10 times it should update his highscore
I have a little chart to visualize this better (notice it has a 2nd tab on the bottom where I describe the stack I want to use)
My thoughts
I think I have to figure something out to not constantly update the database. Because if I update it on every click I see 2 problems:
a TON of requests which is not good, right?
if I click too fast it wouldn't be recognized right?
What I wonder is, I think I created something similiar but much more simplified a few months ago to test out firebase from google. I saved every click to firebase. I also had a listener with on.("value") or something like that, that created an action every time a new "click" comes in.
This worked perfectly, even when I clicked very fast. How is this possible? How is firebase doing this?
Tech Stack I want to use
Node.js with Express for the Server
MongoDB with Mongoose for Database (eventually mongodb cloud solution like mLab)
React with Redux on the Frontend
React Router
Passport.js for Auth
Now I would like to know if my approach I have in plan is going to work or if this would even work with that kind of stack. I didn't find anything on google that could help me out with this kind of question(s). So how can I update the db to reflect the data I see in my app but not creating an api call per click?
I recommend you looking into using websockets. This will probably be what you're looking for to help you update the database close to real-time. But make sure that you're keeping track of the current user's click in the React/Redux state.
Another solution is to throttle your REST api calls to update the database. The downside of this is the other users in your application won't see the real-time value of every other users. But since you're throttling it'll only be slightly behind.
https://css-tricks.com/the-difference-between-throttling-and-debouncing/
The project I'm working on involves financial data, my issue specifically pertains to chart visualizations with d3.js. So my back-end is in PHP using Laravel and my front-end will request data through an AJAX call to my back-end and it will send data to the client in the response.
I then use d3.js to visualize the data in various graphs. Because this is async and uses async GET requests, I don't have any specific URL path to navigate to in order to 'save' a state. Navigating away from this page will cause a reset for anything a user might have entered.
I am wondering if there is a way to easily integrate some sort of method for saving a chart's state. I am thinking maybe cookies could be something to look into? The user can add various technical indicators such as moving averages and there is technically no limit to how many indicators they would like to show. As a result, a user can concoct some complex charts--all of which would be reset anytime a user wants to refresh the page or in the off-chance they accidentally hit the back button.
I already have user registration on the website so I could also consider just saving chart states on my end, as well, and fetching them when a user navigates to the charts page. I have access to both a MongoDB database and a MySQL database.
I've never done anything like this before since this is my first time I'm working with a deployed app and the first time I've really needed to consider something like this.
Multiple charts also are depicted on this page, if that makes any difference.
Is there a way to retrieve the Life Events of an authenticated Facebook User using the Graph API? It seems like this is simple to do for a Page, but I can't seem to find a way to retrieve a list of Life Events/Milestones for a User. This page appears to show how to display the details of a specific Life Event/Milestone (and since it references the Born Life Event and the user_birthday permission I'm assuming that it can be called for a User), but I can't seem to find a way to pull a list of all of a User's Life Events. Is there a way to do this via the Graph API (or some other method)?
Additionally, I've uncovered these StackOverflow posts on the matter of trying to read this info, but the info is pretty outdated (e.g. using FQL, which has been deprecated.)
Grabbing Facebook life events
Facebook API - Get Life Events (graph-api or FQL)
There is no way to do this for users. Only for pages: https://developers.facebook.com/docs/graph-api/reference/page/milestones
I'm looking to create a notification system for when someone registers to my site. The type of notification system I am wanting is something like stackoverflow has or Facebook. I want a number type notification to appear of how many new registrations I have, but once I click to view the notifications (new registrations) I want the notification alert (like the red square stackoverflow has) to go away.
I am writing this with PHP and have a db table called users that I can pull the users from. I'm just not sure how I can have a notification like this without selecting all of the users to give me a quantity?
So say I have 20 users and 2 new people just registered. I want a notification to display with the number 2. Then when I click on it, for that notification to go away.
How could I go about doing this?
I am designing systems like this.
The way I do it is to have a structured log of events written by the application into a messaging queue/message broker.
Then I have a message consumer that reads the events and updates any metrics I want out of the system.
In this case, you would need a message consumer that decides on what users should receive what messages (some messages could go to all, some only to specific people).
Each user would have to either poll an API that serves these messages, or have a websocket open to receive the data as a stream (this is faster).
I would place an intermediate storage between the message consumer and the API. I would recommend something light and fast, like Redis, for this.
This is a lot of infrastructure to set up, there are other quick and dirty solutions, but this is quite minimal in my opinion.
Assuming each users have an unique ID, you can achieve it very simply by yourself adding very few PHP code.
Answer will definitly depend on your own needs and complexity degree you want to achieve, #firelynx answer can be really great if you want to achieve something big and evolvable (you can definitly have some great fun and learn a lot).
However if you only want a very basic implementation I suggest you to create a "notifications" table in your database, you can use (as a minimum) columns [id, user_id, message, new] where new is a tinyInt or any equivalent.
Then add some notifications to the user(s) of your choice, new should be 1 by default. When the user see the notification, just set new to 0 for related notification(s).
Selecting users that should receive those notifications can then be done depending on user group or some conditions.
If you wanted something simple and not so shinny to begin with, that should do the job well, you can also add a "icon" column to add some fun.
I have an html5/javascript application in which multiple users can be viewing the same set of data of any given time. For the sake of a real world example, lets say its a calendar type page.
So user1 is looking has the browser open and looking at the calendar page and user2 is also on the calendar page. User2 makes a change to the calendar and i'd like (as quickly as possible) for those changes the be recognized and refreshed on user1's screen. What is the best way to do this?
I'm thinking about have a mysql table for active users that stores the page they are currently on and a timestamp for its last update, then use ajax calls to ping the server every few seconds and check for an updated timestamp, if its newer than what they have client side, the new data gets sent and the page "reloaded." I am putting reloaded in quotes because the actual browser window will not be refreshed, but a function will be called via javascript that will reload the page. Sort of the way stack overflow performs its update checks, but instead of telling the user the page has changed and providing a button for reload, it should happen automatically. If user1 is working away on the calendar, it seems it might be quite annoying for user2's screen to constantly be refreshing...
Is this a horrible idea? Is pinging the server with an ajax request every few seconds going to cause major slow downs? Is there a better way to do this? I would like the views on either users side to be real time because its important that user1 not be able to update an element on the calendar page that user2 has already changed.
Update: based on some web sockets research it doesnt seem like a proper solution. First its not compatible with older browsers and i support ie8+ and second i dont need real time updstes for all users on the site. The site is an account based applicatiin and an account can have multiple users. The data needs to sync between those users only. Any other recommendations would be great.
You need realtime app for this. You should have a look at socketio. Everytime a user log in, you make him listen for changes on the server. Then when something changed on the server, every users listening are notified.
you can find examples on the official website : http://socket.io/