Click here to Skip to main content
15,884,298 members
Articles / Web Development / ASP.NET

Social News

Rate me:
Please Sign up or sign in to vote.
4.98/5 (115 votes)
12 Aug 2012CPOL22 min read 210.9K   5K   175  
A facebook-like application implementing KnockoutJs and SignalR
/*!
* SignalR JavaScript Library v0.5.2
* http://signalr.net/
*
* Copyright David Fowler and Damian Edwards 2012
* Licensed under the MIT.
* https://github.com/SignalR/SignalR/blob/master/LICENSE.md
*/
(function(n,t){"use strict";var u;if(typeof n!="function")throw"SignalR: jQuery not found. Please ensure jQuery is referenced before the SignalR.js file.";if(!t.JSON)throw"SignalR: No JSON parser found. Please ensure json2.js is referenced before the SignalR.js file if you need to support clients without native JSON parsing support, e.g. IE<8.";var i,o,r={onStart:"onStart",onStarting:"onStarting",onSending:"onSending",onReceived:"onReceived",onError:"onError",onReconnect:"onReconnect",onStateChanged:"onStateChanged",onDisconnect:"onDisconnect"},h=function(n,i){if(i!==!1){var r;typeof t.console!="undefined"&&(r="["+(new Date).toTimeString()+"] SignalR: "+n,t.console.debug?t.console.debug(r):t.console.log&&t.console.log(r))}},s=function(i){var r;return(i=n.trim(i),i.indexOf("http")!==0)?!1:(r=t.document.createElement("a"),r.href=i,r.protocol+r.host!==t.location.protocol+t.location.host)},f=function(t,i,u){return i===t.state?(n(t).trigger(r.onStateChanged,[{oldState:t.state,newState:u}]),t.state=u,!0):!1},e=function(n){return n.state===i.connectionState.disconnected};i=function(n,t,r){return new i.fn.init(n,t,r)},i.connectionState={connecting:0,connected:1,reconnecting:2,disconnected:4},i.fn=i.prototype={init:function(n,t,i){this.url=n,this.qs=t,typeof i=="boolean"&&(this.logging=i)},ajaxDataType:"json",logging:!1,state:i.connectionState.disconnected,reconnectDelay:2e3,start:function(u,e){var o=this,h={transport:"auto",jsonp:!1},a,l=n.Deferred(),c=t.document.createElement("a");return f(o,i.connectionState.disconnected,i.connectionState.connecting)===!1?(l.resolve(o),l.promise()):(n.type(u)==="function"?e=u:n.type(u)==="object"&&(n.extend(h,u),n.type(h.callback)==="function"&&(e=h.callback)),c.href=o.url,c.protocol&&c.protocol!==":"?(o.protocol=c.protocol,o.host=c.host,o.baseUrl=c.protocol+"//"+c.host):(o.protocol=t.document.location.protocol,o.host=t.document.location.host,o.baseUrl=o.protocol+"//"+o.host),o.wsProtocol=o.protocol==="https:"?"wss://":"ws://",s(o.url)&&(o.log("Auto detected cross domain url."),h.transport==="auto"&&(h.jsonp||(h.jsonp=!n.support.cors,h.jsonp&&o.log("Using jsonp because this browser doesn't support CORS")),h.transport=h.jsonp===!0?"longPolling":["webSockets","longPolling"])),o.ajaxDataType=h.jsonp?"jsonp":"json",n(o).bind(r.onStart,function(){n.type(e)==="function"&&e.call(o),l.resolve(o)}),a=function(u,e){if(e=e||0,e>=u.length){o.transport||l.reject("SignalR: No transport could be initialized successfully. Try specifying a different transport or none at all for auto initialization.");return}var s=u[e],h=n.type(s)==="object"?s:i.transports[s];h.start(o,function(){o.transport=h,f(o,i.connectionState.connecting,i.connectionState.connected),n(o).trigger(r.onStart),n(t).unload(function(){o.stop(!1)})},function(){a(u,e+1)})},t.setTimeout(function(){var t=o.url+"/negotiate";o.log("Negotiating with '"+t+"'."),n.ajax({url:t,global:!1,cache:!1,type:"GET",data:{},dataType:o.ajaxDataType,error:function(t){n(o).trigger(r.onError,[t.responseText]),l.reject("SignalR: Error during negotiation request: "+t.responseText),o.stop()},success:function(t){if(o.appRelativeUrl=t.Url,o.id=t.ConnectionId,o.webSocketServerUrl=t.WebSocketServerUrl,!t.ProtocolVersion||t.ProtocolVersion!=="1.0"){n(o).trigger(r.onError,"SignalR: Incompatible protocol version."),l.reject("SignalR: Incompatible protocol version.");return}n(o).trigger(r.onStarting);var f=[],u=[];n.each(i.transports,function(n){if(n==="webSockets"&&!t.TryWebSockets)return!0;u.push(n)}),n.isArray(h.transport)?n.each(h.transport,function(){var t=this;(n.type(t)==="object"||n.type(t)==="string"&&n.inArray(""+t,u)>=0)&&f.push(n.type(t)==="string"?""+t:t)}):n.type(h.transport)==="object"||n.inArray(h.transport,u)>=0?f.push(h.transport):f=u,a(f)}})},0),l.promise())},starting:function(t){var i=this,u=n(i);return u.bind(r.onStarting,function(){t.call(i),u.unbind(r.onStarting)}),i},send:function(n){var t=this;if(t.state===i.connectionState.disconnected)throw"SignalR: Connection must be started before data can be sent. Call .start() before .send()";if(t.state===i.connectionState.connecting)throw"SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.";return t.transport.send(t,n),t},sending:function(t){var i=this;return n(i).bind(r.onSending,function(){t.call(i)}),i},received:function(t){var i=this;return n(i).bind(r.onReceived,function(n,r){t.call(i,r)}),i},stateChanged:function(t){var i=this;return n(i).bind(r.onStateChanged,function(n,r){t.call(i,r)}),i},error:function(t){var i=this;return n(i).bind(r.onError,function(n,r){t.call(i,r)}),i},disconnected:function(t){var i=this;return n(i).bind(r.onDisconnect,function(){t.call(i)}),i},reconnected:function(t){var i=this;return n(i).bind(r.onReconnect,function(){t.call(i)}),i},stop:function(t){var u=this;if(u.state!==i.connectionState.disconnected){try{u.transport&&(u.transport.abort(u,t),u.transport.stop(u),u.transport=null),n(u).trigger(r.onDisconnect),delete u.messageId,delete u.groups}finally{f(u,u.state,i.connectionState.disconnected)}return u}},log:function(n){h(n,this.logging)}},i.fn.init.prototype=i.fn,u={addQs:function(i,r){return r.qs?typeof r.qs=="object"?i+"&"+n.param(r.qs):typeof r.qs=="string"?i+"&"+r.qs:i+"&"+t.escape(r.qs.toString()):i},getUrl:function(n,i,r,u){var o=i==="webSockets"?"":n.baseUrl,f=o+n.appRelativeUrl,e="transport="+i+"&connectionId="+t.escape(n.id);return n.data&&(e+="&connectionData="+t.escape(n.data)),r?(u&&(f=f+"/reconnect"),n.messageId&&(e+="&messageId="+n.messageId),n.groups&&(e+="&groups="+t.escape(JSON.stringify(n.groups)))):f=f+"/connect",f+="?"+e,f=this.addQs(f,n),f+="&tid="+Math.floor(Math.random()*11)},ajaxSend:function(i,u){var f=i.url+"/send?transport="+i.transport.name+"&connectionId="+t.escape(i.id);f=this.addQs(f,i),n.ajax({url:f,global:!1,type:"POST",dataType:i.ajaxDataType,data:{data:u},success:function(t){t&&n(i).trigger(r.onReceived,[t])},error:function(t,u){u!=="abort"&&(u!=="parsererror"||i.ajaxDataType!=="jsonp")&&n(i).trigger(r.onError,[t])}})},ajaxAbort:function(i,r){if(typeof i.transport!="undefined"){r=typeof r=="undefined"?!0:r;var u=i.url+"/abort?transport="+i.transport.name+"&connectionId="+t.escape(i.id);u=this.addQs(u,i),n.ajax({url:u,async:r,timeout:1e3,global:!1,type:"POST",dataType:i.ajaxDataType,data:{}}),i.log("Fired ajax abort async = "+r)}},processMessages:function(t,i){var u=n(t);if(i){if(i.Disconnect){t.log("Disconnect command received from server"),t.stop();return}i.Messages&&n.each(i.Messages,function(){try{u.trigger(r.onReceived,[this])}catch(i){t.log("Error raising received "+i),n(t).trigger(r.onError,[i])}}),i.MessageId&&(t.messageId=i.MessageId),i.TransportData&&(t.groups=i.TransportData.Groups)}},foreverFrame:{count:0,connections:{}}},i.transports={webSockets:{name:"webSockets",send:function(n,t){n.socket.send(t)},start:function(e,o,s){var h,a=!1,l=this,c=!o,y,v=n(e);if(t.MozWebSocket&&(t.WebSocket=t.MozWebSocket),!t.WebSocket){s();return}e.socket||(h=e.webSocketServerUrl?e.webSocketServerUrl:e.wsProtocol+e.host,n(e).trigger(r.onSending),h+=u.getUrl(e,this.name,c),e.log("Connecting to websocket endpoint '"+h+"'"),e.socket=new t.WebSocket(h),e.socket.onopen=function(){a=!0,e.log("Websocket opened"),o?o():f(e,i.connectionState.reconnecting,i.connectionState.connected)===!0&&v.trigger(r.onReconnect)},e.socket.onclose=function(t){if(a)typeof t.wasClean!="undefined"&&t.wasClean===!1?(n(e).trigger(r.onError,[t.reason]),e.log("Unclean disconnect from websocket."+t.reason)):e.log("Websocket closed");else{s?s():c&&l.reconnect(e);return}l.reconnect(e)},e.socket.onmessage=function(i){var f=t.JSON.parse(i.data),o;f&&(o=n(e),f.Messages?u.processMessages(e,f):o.trigger(r.onReceived,[f]))})},reconnect:function(n){this.stop(n),(n.state===i.connectionState.reconnecting||f(n,i.connectionState.connected,i.connectionState.reconnecting)===!0)&&(n.log("Websocket reconnecting"),this.start(n))},stop:function(n){n.socket!==null&&(n.log("Closing the Websocket"),n.socket.close(),n.socket=null)},abort:function(){}},serverSentEvents:{name:"serverSentEvents",timeOut:3e3,start:function(e,o,s){var c=this,a=!1,l=n(e),h=!o,y,v;if(e.eventSource&&(e.log("The connection already has an event source. Stopping it."),e.stop()),!t.EventSource){s&&(e.log("This browser doesn't support SSE."),s());return}l.trigger(r.onSending),y=u.getUrl(e,this.name,h);try{e.log("Attempting to connect to SSE endpoint '"+y+"'"),e.eventSource=new t.EventSource(y)}catch(p){e.log("EventSource failed trying to connect with error "+p.Message),s?s():(l.trigger(r.onError,[p]),h&&c.reconnect(e));return}v=t.setTimeout(function(){a===!1&&(e.log("EventSource timed out trying to connect"),e.log("EventSource readyState: "+e.eventSource.readyState),h||c.stop(e),h?e.eventSource.readyState!==t.EventSource.CONNECTING&&e.eventSource.readyState!==t.EventSource.OPEN&&c.reconnect(e):s&&s())},c.timeOut),e.eventSource.addEventListener("open",function(){e.log("EventSource connected"),v&&t.clearTimeout(v),a===!1&&(a=!0,o&&o(),h&&f(e,i.connectionState.reconnecting,i.connectionState.connected)===!0&&l.trigger(r.onReconnect))},!1),e.eventSource.addEventListener("message",function(n){n.data!=="initialized"&&u.processMessages(e,t.JSON.parse(n.data))},!1),e.eventSource.addEventListener("error",function(n){if(!a){s&&s();return}e.log("EventSource readyState: "+e.eventSource.readyState),n.eventPhase===t.EventSource.CLOSED?(e.log("EventSource reconnecting due to the server connection ending"),c.reconnect(e)):(e.log("EventSource error"),l.trigger(r.onError))},!1)},reconnect:function(n){var r=this;t.setTimeout(function(){r.stop(n),(n.state===i.connectionState.reconnecting||f(n,i.connectionState.connected,i.connectionState.reconnecting)===!0)&&(n.log("EventSource reconnecting"),r.start(n))},n.reconnectDelay)},send:function(n,t){u.ajaxSend(n,t)},stop:function(n){n&&n.eventSource&&(n.log("EventSource calling close()"),n.eventSource.close(),n.eventSource=null,delete n.eventSource)},abort:function(n,t){u.ajaxAbort(n,t)}},foreverFrame:{name:"foreverFrame",timeOut:3e3,start:function(i,f,e){var s=this,h=u.foreverFrame.count+=1,c,l,o=n("<iframe data-signalr-connection-id='"+i.id+"' style='position:absolute;top:0;left:0;width:0;height:0;visibility:hidden;'></iframe>");if(t.EventSource){e&&(i.log("This brower supports SSE, skipping Forever Frame."),e());return}n(i).trigger(r.onSending),c=u.getUrl(i,this.name),c+="&frameId="+h,o.prop("src",c),u.foreverFrame.connections[h]=i,i.log("Binding to iframe's readystatechange event."),o.bind("readystatechange",function(){n.inArray(this.readyState,["loaded","complete"])>=0&&(i.log("Forever frame iframe readyState changed to "+this.readyState+", reconnecting"),s.reconnect(i))}),i.frame=o[0],i.frameId=h,f&&(i.onSuccess=f),n("body").append(o),l=t.setTimeout(function(){i.onSuccess&&(i.log("Failed to connect using forever frame source, it timed out after "+s.timeOut+"ms."),s.stop(i),e&&e())},s.timeOut)},reconnect:function(n){var r=this;t.setTimeout(function(){if(n.frame&&(n.state===i.connectionState.reconnecting||f(n,i.connectionState.connected,i.connectionState.reconnecting)===!0)){var e=n.frame,t=u.getUrl(n,r.name,!0)+"&frameId="+n.frameId;n.log("Upating iframe src to '"+t+"'."),e.src=t}},n.reconnectDelay)},send:function(n,t){u.ajaxSend(n,t)},receive:function(t,i){var r;u.processMessages(t,i),t.frameMessageCount=(t.frameMessageCount||0)+1,t.frameMessageCount>50&&(t.frameMessageCount=0,r=t.frame.contentWindow||t.frame.contentDocument,r&&r.document&&n("body",r.document).empty())},stop:function(t){var i=null;t.frame&&(t.frame.stop?t.frame.stop():(i=t.frame.contentWindow||t.frame.contentDocument,i.document&&i.document.execCommand&&i.document.execCommand("Stop")),n(t.frame).remove(),delete u.foreverFrame.connections[t.frameId],t.frame=null,t.frameId=null,delete t.frame,delete t.frameId,t.log("Stopping forever frame"))},abort:function(n,t){u.ajaxAbort(n,t)},getConnection:function(n){return u.foreverFrame.connections[n]},started:function(t){t.onSuccess?(t.onSuccess(),t.onSuccess=null,delete t.onSuccess):f(t,i.connectionState.reconnecting,i.connectionState.connected)===!0&&n(t).trigger(r.onReconnect)}},longPolling:{name:"longPolling",reconnectDelay:3e3,start:function(o,s){var l=this,c=!1;o.pollXhr&&(o.log("Polling xhr requests already exists, aborting."),o.stop()),o.messageId=null,t.setTimeout(function(){(function h(a,v){n(a).trigger(r.onSending);var d=a.messageId,k=d===null,b=!k,w=u.getUrl(a,l.name,b,v),p=null,y=!1;(b!==!0||v!==!0||o.state===i.connectionState.reconnecting||f(o,i.connectionState.connected,i.connectionState.reconnecting)!==!1)&&(o.log("Attempting to connect to '"+w+"' using longPolling."),a.pollXhr=n.ajax({url:w,global:!1,type:"GET",dataType:o.ajaxDataType,success:function(l){var w=0,p=!1;(c==!1&&(s(),c=!0),v===!0&&y===!1&&(o.log("Raising the reconnect event"),f(o,i.connectionState.reconnecting,i.connectionState.connected)===!0&&(n(a).trigger(r.onReconnect),y=!0)),u.processMessages(a,l),l&&l.TransportData&&n.type(l.TransportData.LongPollDelay)==="number"&&(w=l.TransportData.LongPollDelay),l&&l.TimedOut&&(p=l.TimedOut),l&&l.Disconnect)||e(a)!==!0&&(w>0?t.setTimeout(function(){h(a,p)},w):h(a,p))},error:function(i,u){if(u==="abort"){o.log("Aborted xhr requst.");return}o.log("An error occurred using longPolling. Status = "+u+". "+i.responseText),p&&clearTimeout(p),n(a).trigger(r.onError,[i.responseText]),t.setTimeout(function(){e(a)===!1&&h(a,!0)},o.reconnectDelay)}}),v===!0&&(p=t.setTimeout(function(){y===!1&&f(o,i.connectionState.reconnecting,i.connectionState.connected)===!0&&(n(a).trigger(r.onReconnect),y=!0)},l.reconnectDelay)))})(o),t.setTimeout(function(){c===!1&&(s(),c=!0)},150)},250)},send:function(n,t){u.ajaxSend(n,t)},stop:function(n){n.pollXhr&&(n.pollXhr.abort(),n.pollXhr=null,delete n.pollXhr)},abort:function(n,t){u.ajaxAbort(n,t)}}},i.noConflict=function(){return n.connection===i&&(n.connection=o),i},n.connection&&(o=n.connection),n.connection=n.signalR=i})(window.jQuery,window)

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Instructor / Trainer Alura Cursos Online
Brazil Brazil

Comments and Discussions