I have a question I tried googling but couldn't get what I was expecting. Hope people around here will make me clear.
Am working on AngularJS from last few months and now I have a situation where there is a list of data. This list is loaded via a server(PHP).
Each list has a tracking image which changes according to the status set in the database.
Now I want this tracking image to change when the admin changes the status of that list in the database.
Right now it happens when I reload the page or when I go back and come again on this listing page.
I know there is something called $watch and in js we have setInterval.
But is this a good idea to use $watch or setInterval as it will check continuously in the database for change. Am just wondering if this will lead to the crash or it will make my application to get slow.
Please note am developing a PhoneGap application using AngularJS.
Please throw your ideas it might be helpful. Thank you
Well, this is probably not the right place to answer your question but there is no problem in using $watch in AngularJS.
But, using setInterval and continuously polling your server will be expensive and is a waste of resource. You should probably go for the something called WebHooks.
Resources:
https://en.wikipedia.org/wiki/Webhook
http://www.webdesignermag.co.uk/automate-mobile-app-development/
Since you are developing a PhoneGap application, you can also use the Push Notification concept of Android and iOS.
If you want to let the server update your client, without the client repeatedly asking for it, then you will need to use websocket libraries. If your server is not able to supply a websocket service, then i fear that doing a $http.get every certain timeperiod is your only option. But yes it sucks, because of the often unneccesary data travels.
Related
I need to be able to update an image on a website thats in HTML while using Spring Boot as a backend. Right now I'm using JavaScript to update the image after a set amount of time but it's not in time with when the image is updated in my database making it skip some of them. It also uses a lot of requests to the server and I don't know if that is good or bad. Is there a way to be able to send an event from java to javascript or use a javascript function in java to update the image. I've tried looking it up before but I haven't found anything that has done exactly what I needed it to do. Some of the stuff have found doesn't work in my project either.
I've tried using eval engine in java to use a javascript function in java but I never got it to work. I made a loop in javascript to request an api url to retrieve the image from the databse but it was off time. That's all I've been able to try and nothing else has been close to what I needed to happen.
I think you can use WebSocket to establish connections between the frontend and the backend so that you can push notification to frontend and reflect the changes. This too has its own complexity like managing all the connections. This is only recommended if you really need real time reflections or else what you are doing is fine.
I am rendering an HTML page from javascript. I need to refresh certain contents periodically. I kick-start my JS from node, I use sendFile() method to render HTML contents to my localhost. The question is how do I access the elements within the rendered contents?
One possible approach I am thinking is webscraping. I follow the sequence within my index.js as follows: readFile(myHtml) -> scrape & modify contents -> renderFile(myHtml).. is this the only method? Or do we have any elegant methods? I know there is a way in Angular, but I am using plain vanilla JS at the moment, and I want to do a quick fix.
Thanks,
I did lot of research on my above question, as there were no answer, so finally found a correct solution to my problem. So the answer I am going to share is not a direct answer to above question, but overall solution I was looking for in the first place. I confess I didn't share my entire problem, I was just trying to get a quick fix to a roadblock on my way in previous approach.
I wanted to refresh my webpage periodically using access token which expires after a session. In my previous approach, I was using backend to handle both tasks obtaining token from Auth server and also refreshing my webpage. So, I loaded the html from backend and thought of refreshing it each time with fresh values, so I was able to scrape it, update it and had the fresh page ready to go. However, each refresh was failing because of res.send() or res.writeFile() methods were failing with "Err: headers already set, can't set headers again" error message.
So I looked at my architecture, and I realized it would be possbile to split the tasks between frontend and backend. So the page was refreshed by frontend script everytime using the token passed by backend, backend obtained fresh token before the session expired and passed it to fronend using socketio. There are several ways to pass values between fronend and backend, but I found it lot more convenient and we can use custom events as well.
So, the lesson I learnt from this is, "when the problem is so uncommon, re-look at your architecture".
Hope this piece of post helps someone in similar situation.
For example: i've changed "user balance" in my database, how to update this value direct on client side. So my client in this case see that change immediately.
I don't like to do it with jQuery since it will be slow with required speed and will makes some performance troubles.
a website called blockchain.info does that somehow, maybe he is using websocket.
BTW I tried to use Ratchet webSocket but I don't know how to link each connection to specific client.
Any help would be appreciated, ask me if you have any questions.
If it is a new project, try using the meteor framework, but I don't know if such a drastic change makes sense for the size or stage of your project or the criticality of your requirement. Meteor is very good for "subscribing" to changes in data and updating the view based on that. In fact, it is very trivial in meteor. However, moving your entire application to meteor may not make sense, only you can decide. Check out https://www.meteor.com/
I commend your dedication to efficiency. Maybe take a look at this site to see if thats what you're looking for.
AJAX with Vanilla JavaScript
I get some data from a page abc.html using Ajax and I store it in a table.
Once the data get stored in the table(i.e. commit takes place), I want that data to be updated in the page xyz.html in runtime so that the users can see the updates without having to refresh the page.
I have got the data and updated the data in the table.
But I don't know what to do once the data gets stored in the table.
I believe ajax is required to update the webpage xyz.html.
It would be of great help if someone can point to a resource on what approach to follow to implement it.
--Update--
I am a newbie but I am not asking anyone to write the code for me. Thanks.
You are going to have to look into something like Socket.IO for real-time updating.
http://socket.io/
Basically, socket.io is a javascript library built on top of Node.JS that constantly trolls a servers looking for new activity. This is sort of ajax, but an ajax request is normally prompted by a user (by a button click or scrolling to the bottom of the page, for example).
I'm not gonna write the code for you. If you are new, it's not going to be an easy thing to accomplish. This may seem like a simple feature, but it's actually quite complex.
If you start writing code, and get stuck, come back and ask a question, but no one is going to write this feature for you for free buddy, sorry.
Here is a tutorial on how to write a real-time updating chat-application with Socket.IO. Take some time and get to know how Socket.IO works and you should be able to figure out how to make it work for your needs.
Basically, I have created a NODEJS app that uses Jade as its templating engine, along with Express and a MySQL database.
I am looking to create a new page which allows user to share a portion of text, and then a div underneath it named "Wall" will update dynamically with the new status.
Basically, it would ideally be similar to Facebook where something is typed, shared and then the page updates below dynamically. I'm also looking to have the wall page update when a new post have been shared from a users friend. All updates shared by the users would be sent to a database.
I have conducted a lot of searches but seem unable to gather a right answer.
I have narrowed it down to the use of either of the following: JQuery, Ajax, PHP.
Since the site I am building is built in JS - what is my best option?
I'm pretty new to all of this, but I assume when a user clicks share it calls a JS file which then stores the update in the database. But how do I get my "Wall" to refresh upon new content?
Any help greatly appreciated.
You've posed a conceptual question. So I'll do my best to explain some of the conceptual options you can choose to further explore and do your own research on how to best implement it with your project.
You have two paths to go here.
You can have your own wall update (do a refresh / re-render on the UI side) upon a successful AJAX write to your database, this would be something you implement in your AJAX callback function - basically the JS function that gets executed after your write request (submitting the new post) to the database returns successful.
A whole other branch of options you could explore, is implement either of the following options to basically "listen" in for changes server-side, and have the re-rendering react as the callback you use:
Polling - basically issue a request every X number of
seconds to check if there have been updates, or change of state on
server-side.
WebSockets - checkout Socket.io. Through this you can "push" messages from the server-side to your clients. As a note, WebSockets are not universally supported in every browser and from past experience I've found WebSocket protocols even differ by browser versions. So if you need universal support, I'd go with a polling method.
Good luck on your project, hope this helps!
Use...
setTimeout(function(){
/* update wall here */
}, 1000)
to poll your "Wall" backend and updated the content.