message push system facebook style - javascript

I'm working at a community site for a friends mmo-guild, just to increase my skills and learn new techniques.
my idea is to build a message/notification/whatever push system alâ facebook style. that means if someone sends you a message, a new post in the board appears or something similar you get a little notification just like facebook uses it (you get a little red number in your userbar at the top of the page).
now i don't know what to google for. is a "push system" the right definition for this?
how could i do it?
i also looked in different questions and read about node.js and comet.
The concept of these technologies is clear to me (from other languages, like Java)
So you have (e.g. node.js) server which pushes a message (if available) to the client. how do i handle such a push on a client? i need something like a listener, do i?
Thanks for answers

You'll find this realtime web technology guide a good starting point if you have a particular back-end technology in mind e.g. search for 'php' or 'ruby' for find a hosted or self-hosted realtime technology.
how do i handle such a push on a client?
i need something like a listener, do i?
The paradigm frequently used with all this technologies is PubSub. PubSub is achieved on the client in different ways with different technologies.
The technology you use to communicate between the client and server varies between solution but the move is very much towards the best approach being WebSocket. However, the libraries used by the realtime web technology you choose will abstract away from using WebSockets directly.
I'll demonstrate how you would subscribe to data using the Pusher JavaScript library:
var pusher = new Pusher('YOUR_APP_KEY'); // connect
var channel = pusher.subscribe('my-channel');
channel.bind('my_event', function(eventData) {
// handle event data
});
Pusher use channels and it's a commonly used term, but other technologies refer to these as topics or subjects. Channels can be used to filter data or be specific to a particular topic e.g. 'my_football_team' and events are a way of filtering data further e.g. 'new_news_item', 'score_update'.

There are various techniques to do a "push" from the server to the browser. See Wikipedia.
For a guild website that is your first attempt at doing this, it will probably be easiest to just periodically poll the server with an XMLHttpRequest and update the page content if there is new data.
Once that works, you can change it into a continuous "long poll", which gets answered by the server only when there is new data, thus reducing network traffic and making the notifications more instantaneous.

Related

PHP, MySql, JavaScript - Pushing data from server to client (Live chat)

I am trying to create a social network with live chat system, so that users can have notification that they have a new message or receive a message after it was sent from another user in real time.
I am new to this, I have made front end (div that will hold messages that are fetched from DB, in form of a paragraph) and DB design, but I am not sure what to use for back end. My best solution so far is to make Ajax call for every user in every few seconds interval, but this looks like inefficient solution for many registered users.
I have searched the web and haven't found any good and up-to-date solutions and I would appreciate if someone could share some experience or point me in the right direction.
Few ways to do it:
websocket (with socketio it's the best)
Server Sent Event Long Pooling Pooling (Ajax)
The best now is websocket. But you can have some problems if your chat needs to work behind some firewall. But the overall perf if you use websocket, you will use something like 80% less resources.

Angular2- few questions related to data saving in a static web page

Im coding a static page app using Angular, which shows various Instagram and Twitter posts of the company, and shows the details of the members. I have few questions regarding this, and would like any help.
Firstly, I have about 100+ contacts to display on the first page. Should I create a Json by myself and retrieve it from the service, or should I create a backend and save it there ? I do not have any backend as of now.
Other thing, I was able to retrieve Instagram Json with media content using their API, the doubt im facing is, once I have the call done, will the Json change automatically when the user adds/edits their posts? Or will the Json be the same as I first called it with? Any help is appreciated. Thanks.
For your case, as you have fewer data using Firebase is the best approach. If you write a backend and maintaining it would cost you more. You can use Firebase service URL to retire those records. In future, if you want to add more data it would be easy.My suggestion is Firebase.
Should I create a Json by myself and retrieve it from the service, or should I create a backend and save it there ?
Are you revealing credentials or other sensitive information in the client? That would be one reason to have a backend apart from Instagram or Twitter. Do you envision exhausting API rate limits of Instagram or Twitter APIs? That would be another reason; you could cache results in your backend to reduce external API traffic. Do you need to process (reduce? translate?) the data before it gets to the client, or are you satisfied with performing any processing on the client (e.g. is it fast enough)?
TL;DR: It depends a lot on your particular requirements.
If you do want a backend, the recommendation in the answer from #praneeth-reddy to use Firebase is excellent. If you only need processing/transformation but no caching or separate storage, then AWS Lambda may also be worth considering. If you need more control (build vs. buy), you could write your own backend.
...will the Json change automatically when the user adds/edits their posts? Or will the Json be the same as I first called it with?
Angular can help you update content automatically if the client side data (think browser JavaScript memory) changes via its automatic change detection functionality, but you would have to provide your own logic (e.g. in Angular services perhaps leveraging RxJS) to update the client side data based on data from the APIs. You could poll to update periodically, or for better performance listen for changes using an asynchronous event/push mechanism such as websockets or streams.

adding a web layer that supports Asynchronous reloading

I am at a loss. recently i have started learning Spring MVC by creating a web application that will post live updated sports scores. the business logic is basically done, but i have no idea how to create the web view. Specifically, Is there anything available that will allow the view to automatically refresh asynchronously from within Spring? If i want to do a refresh of the scores listing anytime new data gets added to the connected database, is that something that can be done with some sort of ajax dependency/ templating engine?
what about Angular.js or some variation of Meteor.js (atmosphere)? As you might tell, I'm pretty confused on how the web layer works..
any direction would be greatly appreciated.
You could use Websockets to broadcast data to connected users as it gets added to the database. With a PubSub pattern you can additionally limit the amount of messages to only the ones your client is interested in eg. filter out scores of non-visible games.
https://spring.io/guides/gs/messaging-stomp-msgsjs/

Pubnub Presence feature in Python (GAE)

PubNub, its really awesome for real-time communication. as per as documention given by pubnub team, am done with subscribe and publish instance, its working fine.
Now am wondering how get a particular user already/presence with PubNub channels in Python(GAE) apps, but I didn't find a complete guide to how to implement this feature in both server and client side.
NOTE: am using here Python Google App Engine & Javascript.
PubNub presence is a way to follow up on joins/leaves in a channel, what you need is the here_now feature if I understand correctly,
Taken from the Pyton lib is (https://github.com/pubnub/pubnub-api/tree/master/python/)
here_now = pubnub.here_now({
'channel' : 'hello_world',
})
print(here_now['occupancy'])
print(here_now['uuids'])
And now you can iterate on whoever is in the channel right now,
this can't be done in the javascript though so you'd have to have perhaps another channel for each of your real channels that you can send the information from the server-side to the client side and then update something accordingly.

How to create a page which gets real time updates from PubSubHubbub

I want to know if it is possible to use javascript/html or php, etc... to create a page that receives continuous updates from a feed that uses PubSubHubbub?
How can I do this?
I am new to this, and any tips would be helpful.
Random suggestion - booth WebHooks and PubSubHubbub look cool. Article:
Webhooks let applications talk to each
other using very simple HTTP. Webhook
enabled applications run (so far) on
app hosting sites in the cloud. What
makes them different is that they
constantly scan for POSTS to a
designated URL. To use the
application, you register your
application with the other webhook
enabled application and provide a
callback URL. You POST data from
your app to the url of the receiving
app, and monitor the callback URL for
its response. Your app then takes the
POST it received and processes it.
Pubsubhubbub (PSHB) is a realtime,
multicasting webhooks enabled publish
and subscribe system. Historically on
the net, most information is received
after it is pulled. For example, we
set up receive intervals for our
email. Our browsers update our RSS
feeds at pre determined intervals. We
repeat the same searches over and
over, just looking to see if there is
anything new. Even when we get alerts
for new email or information, the
alerts are generated by actively
polling the source. PSHB changes that.

Categories