CODEWITHSUNDEEP
javascriptajaxasp.net-mvcjsonpreal-time
Chris
Chris

Reputation: 51

Best practice for a practical real-time app with .NET MVC4

Hello people and bots,

I'm developing the front-end web application for a system and have hit a little problem.

The whole application has to be on one page, meaning no refreshes or page changes during the flow of the major areas of the application.

It also has to work in all web browsers including IE7 and be deploy-able as a HTML5 application for tablets and mobile phones.

It's based around a user logging in, which is regulated by webforms authentication, then I need to poll or long-poll the server for updates. This would be simple if I could do a request for each part of the system, however if the system gets too big session blocking becomes a problem and it could also end up ddosing itself. So what I need to do is think of a way to send one request and build one response from that request.

My first idea was to build a response model with JSON or XML and let JavaScript regulate what needs to be updated. For example, a new comment has been made on a topic, all the clients see this update near instantly. My idea was to send something like this:

[
    'd':
    {
        'addComment' : [{'topicId':'topic1', 'description':'haha'}, {'topicId':'topic1', 'description':'lol'}],
        'addTopics' : ['topic2','topic708'],
    }
]

JavaScript would then parse this and add "haha", and "lol" to the element with the id "topic1". In theory it seems quite simple to achieve, but as the system is getting bigger it seems to constantly be turning into a big mess.

My second idea was to simply have a set of client-side functions for adding and removing stuff in the DOM, And then use a JSONP technique to call this function.

var addComment = function(commentModel)
{
    var topic = document.getElementById(commentModel.topicId),
        comments = topic.getElementByClassName('comments')[0],
        comment = document.createElement('div');

    comment.innerHTML = commentModel.description;
    comments.appendChild(comment);

    updateUnreadComments();
}

Response:

(function(addComment){
    addComment({ topicId : 'topic1', description : 'haha' })
    addComment({ topicId : 'topic1', description : 'lol' })
})(addComment)

Personally I find both methods a rather annoying workaround for nothing more than simple broadcasting.

I was wondering if anyone else has ever had the same problems and if they have ever come up with a more creative solution.

I would also like to know what kind of security issues I could expect with JSONP.

All help is appreciated!

Upvotes: 1

Views: 531

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038710

You may take a look at SignalR. Scott Hanselman also blogged about it.

Upvotes: 3

Related Questions