I have very limited knowledge in jQuery. I need to develop a page which should show the count of new message posted. In twitter and stackoverflow websites, I have seen a div which shows the count of new tweet/questions posted and while clicking on it, the newer ones are shown on the top. Below added are the sample images:
Please suggest whether it can be attained using jQuery or Ajax.
Thanks
Those examples look like push rather than pull behaviors. By this I mean that the server is saying to the page 'hey there is a new tweet in this tag' rather than the page asking 'is there any new tweet? No not yet? OK, I'll ask again in 5sec'.
Since you are on ASP.NET, you can easily push notifications from server to client by using the good SignalR library.
You still have to detect on the server that there are new 'things' and send a message (with signalR) to the matching clients. And also handle the message on the client and show a piece of UI.
As you are using ASP.NET, you can use an UpdatePanel to help handle making the call and updating your content. Note that the UpdatePanel uses AJAX, and can be set to automatically update on a specified time interval.
What I would do, if I were you, is use the UpdatePanel to call a method that makes a request to the Twitter API and grabs all of the new tweets that you have not already grabbed. Then count the number of tweets returned and, if that number is greater than zero, I would display the "X tweets with new activity", or whatever counter message you are looking to show.
If you are not strong with jQuery, this may be the best solution for you, as you could get away with using the UpdatePanel and a Repeater to render out your tweets, and update the ones displayed when clicking a button/link/etc, with or without postback (whichever is your preference for this implementation).
Important Side-Note
Note that Twitter API v1.1 requires you to use oAuth Tokens, which should not be included in AJAX calls. You should only be using server-side code to make requests to the Twitter API, and, thus, this solution is likely to be the best for you, as you can write your request code in the code-behind (thus keeping your Twitter keys and tokens safe), and call it using the UpdatePanel.
Update
I am not usually one to promote my own libraries on Stack, but if you need help with making the request to Twitter's API using oAuth, take a look at my C# library for Twitter requests. The documentation includes instructions for setting up oAuth access on Twitter and is very verbose in helping you make calls with the library. It also includes MSDN-style documentation for the library, itself, an example request, and full IntelliSense for all classes, methods, and properties. If nothing else, it should help you set up your requests. If you have any trouble with it, let me know and I can help you out.
You need to retrieve the new messages using a $.ajax call which you repeat every few minutes or so using setTimeout. But for that ajax call to work you have to have some sort of API endpoint you can retrieve the data from.
This is not just something you can build by dropping in a jQuery plugin somewhere and be done with it. You need to have knowledge about Javascript, jQuery and your specific API before you can do anything. Try checking out the jQuery basic tutoorial.
You can create a WCF service to get latest messages which you can call using setTimeout to update your message div in real time using Ajax or you can use SignalR to add real time functionality.
Related
When you search using the textbox in netflix.com, the URL updates automatically on what you type. It changes to something like https://www.netflix.com/search?q=test. The results also updates automatically or in real time.
I would like to know how this was done. Not the DB query part but more of the real-time/automatic update of the results with the use of GET functions. I was wondering if this could be done using Node.js, and javascript? Where should I get started?
Kind of related but not important: I saw this question with a fiddle code but didn't contain DB query and not updating the URL.
question
All of this is JavaScript, but specifically there are two parts to this.
For the first, the fetching of fresh data, this is done via the Fetch API. (Or on older sites, XHR/AJAX.) Using this API, the client-side JavaScript can make an HTTP request to the server and read the response. What is used server-side (like Node.js) isn't important... most anything can be used for this. (Node.js though is awfully convenient... it's my preferred method, but it isn't a requirement that you use it.) With the response data, it's parsed and injected into the page however the script wants to do it.
The second part you're asking about is the URL change. This is often done with the History API. That way, the developer can control what the URL says. This allows the user to bookmark this particular page for later use.
My goal is to create a real-time chat similar to the Facebook chat, from scratch. I want to store all the messages on a database table (MySQL) and every time a new message is sent by a user, if the receiver is connected then a request will be sent to the receiver's browser and the message will appear on the chat window.
I don't want to have the client to check if a new message for the user was sent, but I want the server to send the request to the client's browser.
I know that this can be achieved using the Comet technique (I saw this stackoverflow question) but I am not able to find a good guide on how to implement this for this certain problem.
I want to use php and javascript and as less extra software or frameworks as possible.
I use WAMPServer and I have Windows.
If you know a good guide or tutorial or can provide any guidelines on how I could achieve what I want, it would be very helpful.
Try use for this CppComet open source comet server. There have api for php and other languages.
And viwe this chat example or this
You can also use Node.JS with PHP. Creating a Real-Time Chat App with PHP and Node.js
I have already developed an application which is not completely Real-time messaging system, but it works like realtime. Built using without any external new frameworks/API, just used known and familiar skills to develop this using: Ajax jquery, PHP, Mysql, Javascript.
Logic used is:
All messages will be stored in database,
When you load page all messages will be loaded from database.
When you get new messages after reloading, the new messages has to be
loaded/displayed without reloading whole page again right? This is done
using javaScript and ajax jquery. I have set time out for EVERY 0.5 seconds
to reload only new messages and display them.
In my code, At first when the page loads all messages will be loaded in div
tags each, Later whenever new message gets into db it will displayed into new
div tags. its Simple and works without any external API.
To refresh new messages and throw them in to div tags .load() from ajax jquery is used,
to refresh every 0.5secs Javascript is used to set timeout.
I don't know what your exact question is but Websockets is the answer!
https://github.com/crossbario/autobahn-js
https://github.com/voryx/Thruway
(FYI, when you see WAMP in the context of websockets they're talking about something that's not windows/apache/mysql/php)
Unfortunately you can't make a real time application with PHP it self you can use a framework like Laravel in PHP and use packages like laravel-websockets and create a realtime application. laravel-websockets is really useful for creating a realtime application. laravel and the laravel websokcets with any front end you can do this
http://beyondco.de/docs/laravel-websockets
https://laravel.com/docs/
You can easy create anything with it just try to understand the fundamental concept of websokcets .
I am at the stage where I am thinking of integrating a social login method into my site. Of course my first one will be the facebook login before moving onwards.
Basically my question is : Which language is best for this type of OAuth connection, and which is going to let me do everything I want?
This will encompass all OAuth connections in general eventually, but specifically Facebook for now.
From what I have read of the documentation, the JavaScript SDK allows you to login, and connect to the open graph API - which in turn will allow me to post / upload etc etc. This is also available in PHP.
From experience which is the more durable route to go?
PHP or JAVASCRIPT
The best and recommend way to authorize users is the JavaScript SDK (FB.login). No redirect needed (better usability), very easy to handle, no PHP needed (the new PHP SDK needs PHP 5.4+). Use PHP only for stuff that involves usage of the App Secret or Extended Access Tokens. And for cron jobs, obviously. You can even just forget about the PHP SDK and use your own CURL calls.
Btw, security is no problem, you should just activate "appsecret_proof" in the App Settings.
More information about appsecret_proof:
https://developers.facebook.com/docs/graph-api/securing-requests
http://www.devils-heaven.com/facebook-php-sdk-4-0-tutorial/
One more reason (and one of the most important ones) is the possibility to refresh Access Tokens (=User Sessions) easily without page refresh by using FB.getLoginStatus.
And another reason is that you need to upgrade to new PHP SDK versions on your own. The JavaScript SDK does not need any upgrades, in the lase few years you only had to change one or two parameters in some cases, the SDK gets downloaded from the Facebook servers.
Also, if you add Social Plugins, you need the JavaScript SDK anyway.
TL;DR PHP/both
I'd really recommend PHP. You'll want to store the login in database. If you do it via JS, you'll need to make an Ajax call to the server, which is not really that secure.
Having said that, they are targeted for different uses. JS is for frontend more, while PHP is for backend (db storage, checks, actual site login, etc). Using JS will let you generate the buttons on the fly, while using PHP you'll need to do some more coding.
Somehting else, the php library will get updated from time to time and you'll need to keep up after testing. JS also, but it's easier, since the code usually works.
If you only want one, use PHP. You can control what the code does and JS will not break your site since it's written by you. However, I'd recommend using both since you will probably want more than just simple login
Edit:
As facebook states, use PHP SDK: Usually this means you're developing with PHP for a Facebook Canvas app, building your own website, or adding server-side functionality to an app that already uses the Facebook SDK for JavaScript.
https://developers.facebook.com/docs/reference/php/4.0.0
The best route would be to use both, together. Some users might have javascript disabled or you might do something within your javascript code that will not work on some browsers. So as a fallback method you can use php api.
Going with only php would be solid and will work regardless of what the users client is, but you can make the user experience better with javascript.
Still, in most cases you'll end up having to use both.
I have just spent the afternoon playing with the JavaScript SDK for facebook and I have to admit I think this is going to be the best option for what I need.
If anyone else is reading this, it may not be perfect for you - but with the way my application has been built I think it is a perfect fit. Here is why :
My standard login system uses JavaScript to grab my form data, then validate, which then passes the validated data via AJAX to a PHP validation script. Which in turn returns a JSON response to the original AJAX call. If my call comes back with "ok" : true then we are good to go basically.
The way the facebook JavaScript SDK works is almost a perfect little jigsaw puzzle to bolt onto the system I am using. All I require is a little bit of profile data, to then keep a record of this user on my system. THIS is provided by facebook, then validated by myself.
However, other social network logins may not be as nice and simple to use as the facebook API, so I could end up changing my mind on the overall system. For now just using facebook, I think the JavaScript SDK is absolutely spot on, as it just gets the information for you to run through your own validation on site. As I said this is a perfect fit for my system however it may not be for yours.
Can anybody give me a direction, I want to know how to do auto updating pages like facebook have for new status updates, new likes etc. Ie., if you have a status open in a window and a user click "like", the +1 like automatically appears.
Thanks in advance.
These are done using a PUSH model (subscribe / publish).
The client side first subscribes by issuing an AJAX request. This AJAX request stays alive indefinitely. When the server receives a new like / comment, it publishes this update to the client side thereby ending the AJAX request. The client receives this update and isntantly issues another AJAX request.
It is broadly categorized as Comet.
Once before, I had implemented a Comet web chat application and wrote a somewhat technical write up of what went into it. You can read it here, if interested.
Comet Web Chat Application
Edit:
A heartbeat mechanism (PULL model) is definitely easier to implement, but a PUSH model is far more efficient.
You'll need to use ajax, which is a way to communicate with the database without reloading the web page : you could for example use the
$ajax
function of jQuery framework : here's the doc
im not posting code, but here's a quick overview of what you might wanna do:
have the "like" image
create a script that binds a click handler to the image.
once clicked, the script sends an AJAX request to the server to increment the like
if that request succeeds, return data to the script indicating that it was a success. you might also want to return the number of likes and so on.
once the script knows the success, have it change your "like" image.
as for counting likes, well, its up to you. for a very broad question, this is a broad answer that will point you to the right path.
I'm sure this question has been asked before, but I can't find a thread that explains it in a way that makes sense to me.
I'm creating a bookmarklet/browser plugin written in Javascript. This script makes calls to an api, effectively sending a users activity information from one site to another. (think, making a tweet when a user posts a facebook status)
This site loads javascript right into the site. The API I'm using requires an MD5 hash to be generated using an API secret code. This is no problem, I'm making an ajax call to a PHP script I'm hosting elsewhere, that returns the correct string.
Problem is I don't want the user to be able to make a call to this same script to generate their own strings, with the secret embedded to abuse the API. Is their a way I can only allow calls to this API when I want to make them?
Or maybe I'm approaching this from the wrong direction.
You cannot dictate how a client executes your javascript. There is no way to create a "secure" request, or insure that it wasn't modified by an attacker. This is the nature of the client/server system. The page its self can be modified using GreaseMonkey and any request can be modified or replayed using TamperData.
1) you should open a token on your DB like GUID.
this guid will represent some info and can only be executed once ( put a db field in table called "isAlreadyuse" -type bit).
now ,
when the ajax will call itself - you send this guid to the server.
the server will see if the guid exists
and emits its logic and update thefield to "1".