Realtime web programming: how does it work? - javascript

As a web developer, I have developed a chat service and some other real-time collaborative services with the help of third-party services like Redis or Pusher. They provide simple API's that I can use publish/subscribe model to achieve bidirectional communication over the webserver. I want to now implement a simple push notification without the use of any third-party services, but I am not quite sure how to achieve this. The situation is as below:
Backend is in Python (Django)
A user receives a private message from another user.
The recipient should be notified without having to refresh the web browser.
My questions:
From this post, Django seems a bad option to achieve such functionality while Node.js is a good one. Is it true? If it is, why is that?
Is it possible to open a websockets from client to the server, to listen to certain changes to a specific model? (ex. when there's a new message in Message model, update the DOM)
I appreciate any help a lot!

WebSockets are exactly what you want here. They are however, a (comparatively) recent addition to browsers and as a result, support is not ubiquitous. WebSocket Support
The websocket model allows you to connect a socket from a server to a client with a web browser, then send messages from the server and receive them asynchronously at the client and vice versa.
Because Node.js is Javascript and the chances are you will be writing your client in Javascript, it lends itself as a sensible choice for writing coupled components, such as in this scenario.
The most popular WebSocket library is Socket.io which was built for use with Node.js. With Socket.io, your notification model would look something like this:
Server
io.sockets.on('connection', function (socket) {
socket.emit('notification', { name: 'Notification', message: 'It\'s here');
});
Client
var notifications = document.getElementById('nlist');
socket.on('notification', function(notification) {
var div;
// make some DOM changes
document.title = notification.name;
div = document.createElement('div');
div.innerHTML = notification.message;
notifications.appendChild(div);
socket.emit('received-notification');
});
Socket.io allows you to use custom event names, as shown here, which makes designing communication APIs that little bit easier. It also has fallbacks for XHR Long Polling and Flash sockets, in the circumstance that the user does not have Web Sockets.
Node will be faster than Django in this circumstance, but you may find that your codebase is more manageable in Django if this is your first venture into Node. It can be kinda difficult to design an application with a series of callbacks like this. I haven't ever used WebSockets with Django, but my experience with Tornado and WebSockets has been poor.

If you just need unidirectional communication as pushing notifications, you'll better have a look at Server Side Events instead of Websockets.
SSE is much easier to implement, it doesn't need any special protocol (just standard HTTP) and does automatic reconnection.
Creating private messages would be done using good old XMLHttpRequests and should be filtered on client-slide.
Node.js is pretty good for serving SSE: its event loop implementation only uses one thread to manage multiple persistent connections.
Have a look at sse-pubsub which provides an easy way to send notifications.

Related

Node - Broadcasting to specific clients with WebSockets/ws

I am developing an application where I would like to set up a system with a web socket system that supports namespacing. I'm using the WebSockets/ws websocket library and I'd like to take a socket.io inspired approach where clients can subscribe to topics and only receive messages sent for that topic but I cannot figure out how to implement this without using socket.io (I'd rather not use it) and I'm currently looking for any guidance that anyone may have on the subject.

Call ajax when value is inserted on database [duplicate]

Of course I am aware of Ajax, but the problem with Ajax is that the browser should poll the server frequently to find whether there is new data. This increases server load.
Is there any better method (even using Ajax) other than polling the server frequently?
Yes, what you're looking for is COMET http://en.wikipedia.org/wiki/Comet_(programming). Other good Google terms to search for are AJAX-push and reverse-ajax.
Yes, it's called Reverse Ajax or Comet. Comet is basically an umbrella term for different ways of opening long-lived HTTP requests in order to push data in real-time to a web browser. I'd recommend StreamHub Push Server, they have some cool demos and it's much easier to get started with than any of the other servers. Check out the Getting Started with Comet and StreamHub Tutorial for a quick intro. You can use the Community Edition which is available to download for free but is limited to 20 concurrent users. The commercial version is well worth it for the support alone plus you get SSL and Desktop .NET & Java client adapters. Help is available via the Google Group, there's a good bunch of tutorials on the net and there's a GWT Comet adapter too.
Nowadays you should use WebSockets.
This is 2011 standard that allows to initiate connections with HTTP and then upgrade them to two-directional client-server message-based communication.
You can easily initiate the connection from javascript:
var ws = new WebSocket("ws://your.domain.com/somePathIfYouNeed?args=any");
ws.onmessage = function (evt)
{
var message = evt.data;
//decode message (with JSON or something) and do the needed
};
The sever-side handling depend on your tenchnology stack.
Look into Comet (a spoof on the fact that Ajax is a cleaning agent and so is Comet) which is basically "reverse Ajax." Be aware that this requires a long-lived server connection for each user to receive notifications so be aware of the performance implications when writing your app.
http://en.wikipedia.org/wiki/Comet_(programming)
Comet is definitely what you want. Depending on your language/framework requirements, there are different server libraries available. For example, WebSync is an IIS-integrated comet server for ASP.NET/C#/IIS developers, and there are a bunch of other standalone servers as well if you need tighter integration with other languages.
I would strongly suggest to invest some time on Comet, but I dont know an actual implementation or library you could use.
For an sort of "callcenter control panel" of a web app that involved updating agent and call-queue status for a live Callcenter we developed an in-house solution that works, but is far away from a library you could use.
What we did was to implement a small service on the server that talks to the phone-system, waits for new events and maintains a photograph of the situation. This service provides a small webserver.
Our web-clients connects over HTTP to this webserver and ask for the last photo (coded in XML), displays it and then goes again, asking for the new photo. The webserver at this point can:
Return the new photo, if there is one
Block the client for some seconds (30 in our setup) waiting for some event to ocurr and change the photograph. If no event was generated at that point, it returns the same photo, only to allow the connection to stay alive and not timeout the client.
This way, when clients polls, it get a response in 0 to 30 seconds max. If a new event was already generated it gets it immediately), otherwise it blocks until new event is generated.
It's basically polling, but it somewhat smart polling to not overheat the webserver. If Comet is not your answer, I'm sure this could be implemented using the same idea but using more extensively AJAX or coding in JSON for better results. This was designed pre-AJAX era, so there are lots of room for improvement.
If someone can provide a actual lightweight implementation of this, great!
An interesting alternative to Comet is to use sockets in Flash.
Yet another, standard, way is SSE (Server-Sent Events, also known as EventSource, after the JavaScript object).
Comet was actually coined by Alex Russell from Dojo Toolkit ( http://www.dojotoolkit.org ). Here is a link to more infomration http://cometdproject.dojotoolkit.org/
There are other methods. Not sure if they are "better" in your situation. You could have a Java applet that connects to the server on page load and waits for stuff to be sent by the server. It would be a quite a bit slower on start-up, but would allow the browser to receive data from the server on an infrequent basis, without polling.
You can use a Flash/Flex application on the client with BlazeDS or LiveCycle on the server side. Data can be pushed to the client using an RTMP connection. Be aware that RTMP uses a non standard port. But you can easily fall back to polling if the port is blocked.
It's possible to achive what you're aiming at through the use of persistent http connections.
Check out the Comet article over at wikipedia, that's a good place to start.
You're not providing much info but if you're looking at building some kind of event-driven site (a'la digg spy) or something along the lines of that you'll probably be looking at implementing a hidden IFRAME that connects to a url where the connection never closes and then you'll push script-tags from the server to the client in order to perform the updates.
Might be worth checking out Meteor Server which is a web server designed for COMET. Nice demo and it also is used by twitterfall.
Once a connection is opened to the server it can be kept open and the server can Push content a long while ago I did with using multipart/x-mixed-replace but this didn't work in IE.
I think you can do clever stuff with polling that makes it work more like push by not sending content unchanged headers but leaving the connection open but I've never done this.
You could try out our Comet Component - though it's extremely experimental...!
please check this library https://github.com/SignalR/SignalR to know how to push data to clients dynamically as it becomes available
You can also look into Java Pushlets if you are using jsp pages.
Might want to look at ReverseHTTP also.

Socket reading and writing from a web browser app

There is a server I need to talk to that publishes a protocol over TCP/IP for querying data from a database and listening on a socket to receive notifications when data is updated. The sever guys provide a Java API which uses this TCP protocol. This means I could easily write a Swing App to talk to this server.
I would like a browser based solution. As the protocol is known to me, could I do this in JavaScript? My app will have to display the data in a table. I have heard of Web Sockets but I'm not sure if it will allow this two way communication. Is it feasible? Is there a better way that is cross platform and will work in most browsers? Should I be considering a Java Swing based solution that runs inside a browser?
EDIT: What about changing the code in my C++ server to add an additional interface that my Javascript code can communicate directly with it?
The WebSocket protocol differs from TCP/IP sockets. You will have to write something to link them together.
You can do this perfectly well in JavaScript: use Node.js. There's enough tutorials to be found on the subject. The best way to link it to your in-browser JS is through Socket.IO.
Create a Node.js server that connects to the api
Make the server talk to your web app
Use it :)
This will work cross-platform and cross-browser (Socket.IO can use/emulate websockets even on IE6(!!)). You'll have to run a server-app (the Node.js app) though.
My personal opinion is that if you want a web/browser based solution, you should use native technology, and not Java.
Hope this helps :)

MVC / websockets in node.js

I'm thinking about building some intranet applications that make use of websockets. I'm currently using Python/Pylons for my web framework on the server, and doing polling to update items in the DOM of the page. Pylons is not well suited to communicate with websockets (IMHO) as it uses a thread per connection. I'm considering using node.js as the server to communicate with the websocket connections from my web application. Here's the "10,000 foot view" of my application:
Pylons delivers the web content (html, css, images, javascript, etc.)
JavasSript on the page application opens up websocket(s) to the node.js server
The node.js server pushes data to the application through the websocket
JavaScript updates the page DOM elements based on the data from the websocket
The data in the case above comes from a MySQL database, which is where my question comes from. I've set up MVC type applications before, and can do the same kind of thing in node.js. However, if I have a long lived websocket open to the node.js server, how does node.js become aware of changes in the Model and push them out to the application? For instance if I want to update totals presented on the web application page, and those totals change due to actions in the system outside of node.js (other web applications), how is node.js notified of those changes? The thing that comes to mind is to have node.js poll the database for various changes and propagate the changes to the various Views. But to me that just sounds like I'm moving my polling from the web application to the node.js server?
Anyone have any ideas, suggestions or pointers on this?
Thanks in advance!
Doug
You can either:
Let the Python scripts notify the node.js application (via a socket or via HTTP)
Or poll from node.js because it is not aware of changes outside it's environment
Polling is considered bad because it doesn't scale. When having a single process that polls does scale because it doesn't need more connections when another user connects. So basically:
// query every second or so
setInterval(function () {
// query database
doSomeDatabaseStuff(function (res) {
// check dirty
if (res.changed) {
// notify all clients
allConnectedSockets.forEach(function (socket) {
socket.send({ msg: "update" });
});
}
})
}, 1000);
This way you have one single process polling the database, and a scalable architecture to notify your connected clients. The database can still be filled from any source.
Sails.js is an MVC framework for node that has the unique distinction of RESTfully routing Socket.io messages in the same way as your Express routes.
Sails currently uses Sequelize, and is configured by default to use mySQL (but also supports SQLite and Postgres). We're switching to a model that lets you choose your own ORM, which will allow us to support JugglingDB (which adds support for Mongo, amongst others)
It also comes bundled with a front-end component, Mast. Mast provides similar functionality to Meteor, in that it allows you to talk directly to the database from the client. If you need to provide more complex functionality, you just add a controller on the backend.
More here: https://github.com/balderdashy/sails

Instant Message on browser

Introduction: I want to develop the chat client that user can chat on the browser and I use the protocol call xmpp. Because of HTML5 web socket not yet available I try flash xmlsocket instead.
Problem: I cannot connect to the server via browser. I'm not sure why, but I think that it is the problem of the server configuration.
Question: Which is the best jabber server suitable for this job?
Most probably this is a permission issue. Either that or you've just configured the wrong host/port to connect to. Flash is not allowed to connect to other hosts than the one it was gotten from itself. You have to explicitely allow flash connections on the receiving side of the request (so on the chat server that you are connecting to). Google for crossdomain.xml to get more info.
ejabberd sounds like a suitable option for you. ejabberd is xmpp server written in erlang and is used quite widely. Many of the well known web based im services like www.meebo.com etc are known to be running on ejabberd. It allows you to install other transports which would let you enable talking to users of other protocol like yahoo, msn, icq etc.
You can also have a look at the xiff action script library by ignite realtime. It is an xmpp client library in action script. If you use this library you would just need to implement the ui components.
Hum... flash is ok, but you'd be better of using something like BOSH, which is basically an HTTP layer over XMPP.
Ejabberd would be a good server, as it supports BOSH, I don't know about OpenFire or Tigase (but I'd say they do). Other servers should be looked at carefully because they don't seem to have a "dynamic" community.
You will need a lot of Javascript, and for that, I can recommend StropheJS, which is probably the very best library out there today.
We have created a MUC (Multi-user chat room) client called Aristochat that works in the browser recently at Superfeedr. You can find the code on Github and an example here.

Categories