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.
Related
This is a general question I have as I am exploring the world of automating some tasks in my workplace.
We have a portal/launchpad environment on our businesses website which has apps shown as tiles.
One of these apps when opened has a homepage that has a bunch of search fields and selectors to interface with (I assume) SAP data.
Ultimately my goal is to be able to send a number to a specific search field on a client-side local webapp (just plain old HTML/jquery stuff) and execute a search for that number in the sapui webapp.
I am getting to an competent level with javascript/HTML/CSS but am completely lost as to where to start with this type of issue as the MVC stuff is completely alien to me.
All my experience has been in creating completely client-side web apps with mostly interface with a local MS Access database.
Is what I am suggesting even possible?
So far I can open the homepage by executing the following code that someone else in the organization used:
window.open('https://fiori.mycompany.com/sap/bc/ui5_ui5/sap/z_cs_ch/index.html
Is it possible to add some form of string after a ?.... at the end of the url?
Again I am completely new to this and looking at the development guides in sapui website isn't shedding any light on it either. Possibly because I don't really know exactly what I am looking for!
Any help /guidance is greatly appreciated.
EDIT:
After comments below I can see the request sent to server is in the following format:
Request GET /sap/opu/odata/sap/someotherlocation/SearchTerm('<variable to search for>')?$format=json HTTP/1.1
Am I right in thinking I could potentially send an ajax request to do something similar? If so, how do I go about it?
Thanks again
There are possibilties to achieve that but i think it's not a real good solution, to fill fields in another web application and to trigger the search.
It would be better if you know the backend service which is used by this Fiori App, and to integrate directly the service. If it's an Fiori App i might be an OData /REST Service. Odata/REST Service also can be called by HTML/jquery JavaScript stuff too.
In order to determine the Service URL and the payload which is used by the web app with the search field, just use Chrome Debugger Tools (or other Browser Debug Tools) and check under Network which server address and which payload parameters are sent to the server, when you trigger the search manually. Hope that helps you little bit.
In the whole Fiori concept, it is definitely possible to have applications to call other applications and to get them to open up exactly at the point the user expects it. E.g. from a order click on a product to be brought to the material master, and have the material master app exactly show the product the user clicked on.
As you mentioned, this would indeed require the target application (that is navigated to) to support some parameters. You mentioned in your question already that you wondered if it would be possible to add a "?...." section to the URL. Fiori apps definitely support this concept, but how it is implemented depends very much on the app itself. In my previous example it could be as easy as e.g. adding ?product_id=abcde though.
Fiori also has very nice extensibility concepts built-in. So if your target app doesn't exactly support the parameters you intend to pass, you could easily extend the app to support it, without having to rewrite of copy the entire app (which would be a disaster when you receive updated from the original developer).
To navigate from one Fiori app to the other, it is advised to use the toExternal method of the CrossApplicationNavigation service, which comes with the Fiori launchpad. This service allows you to specify parameters such as the app you'd like to navigate to, the intent (display, create etc), parameters (such as product ID) and a app specific route (e.g. /supplierdetails to see the supplier details of a product).
The CrossApplicationNavigation service is officially documented in the SAPUI5 SDK, but I'm afraid that the SDK doesn't contain a very elaborate description. However, if you Google for it, you'll find extensive information and examples on SCN and Stackoverflow on this topic as well.
As promised here is what I got to work - actually got the overall method from an answer on here somewhere else.
This will send back enough detail that I can at least show the user some updates however after searching around I believe what I really need to be able to do is batch requests... I'm looking into Apache Olingo to see if that's possible.
function orderSmmary(SO) {
var uri = "https://fiori.<company>.com/sap/opu/odata/sap/<environment>/Details('"+ SO + "')?$format=json";
var http_request = new XMLHttpRequest();
http_request.onreadystatechange = function() {
if (http_request.readyState == 4 ) {
var data = JSON.parse(http_request.responseText);
// Do lots of awesome stuff with response
}
}
http_request.open('GET',uri, true);
http_request.setRequestHeader("Authorization", "Negotiate");
http_request.send();
}
Again this is an entirely clientside solution from completely outside any flori environment so I am hoping to stay completely javascript based.
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.
I've read a few StackOverflow posts related to this subject but I can't find anything specifically helps me in my scenario.
We have multiple monitoring instances within our network, monitoring different environments (Nagios, Icinga, more...). Currently I have a poller script written in PHP which runs every minute via cron, it asks the instance to return all of its problems in JSON, the script then interprets this and pushes it in to a MySQL database.
There is then an 'overview' page which simply reads the database and does some formatting. There's a bit of AJAX involved, every X seconds (currently use 30) it checks for changes (PHP script call) and if there are changes it requests them via AJAX and updates the page.
There's a few other little bits too (click a problem, another AJAX request goes off to fetch problem details to display in a modal etc).
I've always been a PHP/MySQL dev, so the above methodology seemed logical to me and was quick/easy to write, and it works 'ok'. However, the problems are: database constantly being polled by many users, mesh of javascript on the front end doing half the logic and PHP on the back doing the other half.
Would this use case benefit from switching to NodeJS? I've done a bit of Node.JS before but nothing like this. Can I subscribe to MySQL updates? Or trigger them when a 'data fetcher' pushes data in to the database? I've always been a bit confused as I use PHP to create data and javascript to 'draw' the page, is there still a split of NodeJS doing logic and front end javascript creating all the elements, or does NodeJS do all of this now? Sorry for the lack of knowledge in this area...
This is definitely an area where Node could offer improvements.
The short version: with websockets in the front-end and regular sockets or an API on the back-end you can eliminate the polling for new data across the board.
The long version:
Front-end:
You can remove all need for polling scripts by implementing websockets. That way, as soon as new data arrives on the server, you can broadcast it to all connected clients. I would advise Socket.io or the Primus websocket wrapper. Both are very easy to implement and incredibly powerful for what you want to achieve.
All data processing logic should happen on the server. The data is then sent to the client and should be rendered on the existing page, and that is basically the only logic the client should contain. There are some frameworks that do all of this for you (e.g. Sails) but I don't have experience with any of those frameworks, since they require you to write your entire app according to their rules, which I personally don't like (but I know a lot of developers do).
If you want to render the data in the client without a huge framework, I highly recommend the lightweight but incredibly useful Transparency rendering library. Using this, you can format a Javascript object on the server using Node, JSONify it, send it to the client, and then all the client would have to do is de-JSONify it and call Transparency's .render.
Back-end:
This one depends on how much control you have over the behaviour of the instances you need to check. I assume you have some control, since you can get all their data in a nice JSON format. So, there are multiple options.
You can keep polling every so often. This is the easiest solution since it requires no change to the external services. The Javascript setInterval function is very useful here. Depending on how you connect with the instances, you might be able to use a module like Request to do the actual request, so that takes out a bunch more of the heavy lifting.
The benefit of implementing the polling in your Node app as well, is that you will receive the data in your Node app and that way you can immediately broadcast it to the clients, even before inserting it into a database. This will greatly reduce the number of queries on your database.
An alternative to polling would be to set up a simple Express-based API where the applications can post their 'problems', as you call them. This way your application will get notified the moment a problem occurs, and combined with the websockets connection to the client this would result in practically real-time updates.
To be more redundant, you would have a polling timer alongside the API, so that you can check the instances in case there's something wrong that causes them to not send over any more data.
An alternative to the more high-level API would be to just use direct socket communication, which is basically the same approach only using a different set of functions.
Lastly, you could also keep the PHP-based polling script. This would be the most efficient solution since you wouldn't go and replace everything. Then from the Node app that's connected to the clients with websockets, you could set an interval to query the database every so often and broadcast the updates. This will still greatly reduce the number of queries, since no matter how many clients are connected there will only be one query, the response of which then gets sent to all connected clients.
I hope my post has give you some ideas of how you could implement your application using Node. Keep in mind though that I am just one developer, this is how I would approach building your application in Node. There will definitely be others who have different opinions.
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.
I have spend almost three days now on learning node.js. I went through an online webcast that cleared the basics. I checked out several samples and tutorials how to build simple apps like webserver, chat program, connecting to mySQL DB, using mongo DB with json...
So far so good. But reaching my goal is still impossible because those simple scenarios always just end when it starts getting intersting.
My destination is to build a demo project that is able to do the following:
1- hold a simple list of data objects serverside
2- show them on webpage of all connected clients
3- allow web-clients to modify the data objects
4- almost immediately updates all the other clients pages as soon an object was modified
(For the first step it would be ok to assume all the objects are once loaded and held in memory of the server (service?) - instead of polling the db for changes or subscrie any DB events - what seems to be another big X-Files topic people fill books about...).
Concerning 1 -3: I already realized using mongodb and json and some addd/edit/delete methods taken from the following walkthrough: http://cwbuecheler.com/web/tutorials/2014/restful-web-app-node-express-mongodb/
Concerning 4: After looking at couple of chat app samples (e..g. http://nodecode.de/chat-nodejs-websocket) I thought this might be a good approach to solve this task, by just broadcasting the object that has been changed through socket (instead of sending a chat text message).
So I tried to combine these samples to one application that match my needs. But I failed. Even before wiring up the functionality I already stuck when I tried to place the two functionalities of showing/modifying the object list and provide the chat function just on one page side by side.
Maybe I am still missing some basics. Maybe the approach is wrong. I can't find samples for a similar task anywhere. So I guess now it's time to ask pros for some help where or how to start.
Thanks in advance.
You are on the right track. Websocket is the right approach.
"already stuck when I tried to place the two functionalities of showing/modifying..."
Without reading your code, I can't really give you a detailed answer to the problem, but here is a vague high level summery of what I would do:
Create an api endpoint on the server-side for the client to read and update the data.
Figure out how to initiate a connection from server to client using websocket.
Send a notification using websocket to the client every time the api receives an "update" request.
Write a set of functions on the client side to fetch and render new data every time when a notification comes from server