+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js
1. Formatvorlage des Untertitelmasters durch Klicken bearbeiten
Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner:
Echtzeitanwendungen für SharePoint
mit SignalR und knockout.js
Christian Heindel, Communardo Software GmbH
SignalR @c_heindel
2. Lösungen für die Kommunikation und Zusammenarbeit im Unternehmen
Wir sind Ihr Partner für Softwarelösungen, mit denen Sie die Kommunikation und
Zusammenarbeit in Ihrem Unternehmen, sowie mit Ihren Kunden und Lieferanten nachhaltig
stärken. Als Enterprise 2.0 Lösungshaus bieten wir alle Leistungen für die Realisierung und
erfolgreiche Einführung, mit einem umfassenden Service an Produkten, Beratung,
Softwareentwicklung, Training und Application Management.
Wir sind zertifizierter Partner von Microsoft, IBM und Atlassian und damit erster Ansprechpartner
für die Planung und Umsetzung Ihrer Enterprise 2.0
Lösung.
3. Agenda
Realtime applications
• Goals, use cases, examples
Push technologies
• WebSockets, Comet
SignalR
• Connections and hubs
• Client libraries, supported
platforms, scalability
MVVM in JavaScript
• knockout.js, jQuery, JSON,
oDATA
Events in SharePoint
• Overview
Bringing it all together
• SharePoint 2010
• SharePoint 2013
• SharePoint Online
4. Agenda
Realtime applications
• Goals, use cases, examples
Push technologies
• WebSockets, Comet
SignalR
• Connections and hubs
• Client libraries, supported
platforms, scalability
MVVM in JavaScript
• knockout.js, jQuery, JSON,
oDATA
Events in SharePoint
• Overview
Bringing it all together
• SharePoint 2010
• SharePoint 2013
• SharePoint Online
6. Use cases
In general
• Adjust prices in
real-time, e.g. for
flight tickets
• Show new
comments as they
come in
• Activity streams
In SharePoint
• Show changes to list
items
• "Who is online?"
• Chat / Shoutbox
• Download counter
• Task status
dashboard
7. TFS – Team Room
Quelle: http://tfs.visualstudio.com/en-us/news/2013-jun-3
12. Realtime ASP.NET Web API tracing with SignalR
Video:
http://www.strathweb.com/
2012/11/realtime-asp-net-web-
api-tracing-with-signalr/
13. JabbR
Collaborative chat done right
• Project:
http://about.jabbr.net/
• Code:
https://github.com/JabbR/JabbR
• Live demo:
https://jabbR.net
14. ShootR
Multiplayer space ship game
built on the SignalR framework.
• Code:
https://github.com/
ntaylormullen/shootr
• Live demo:
http://shootr.signalr.net/
18. Agenda
Realtime applications
• Goals, use cases, examples
Push technologies
• WebSockets, Comet
SignalR
• Connections and hubs
• Client libraries, supported
platforms, scalability
MVVM in JavaScript
• knockout.js, jQuery, JSON,
oDATA
Events in SharePoint
• Overview
Bringing it all together
• SharePoint 2010
• SharePoint 2013
• SharePoint Online
19. Refresh a page after it has loaded
How you could try it…
• Client pull
– F5, Ctrl+F5, press the
“Delete cache”
button hard and
often, then F5
– Polling: AJAX Request
every 60 seconds?
Every 5 seconds?
How you should do it…
• Server push
– WebSocket
connection
– Comet techniques
as fallback
20. Comet (a.k.a. Ajax Push, Reverse Ajax, HTTP Streaming, HTTP server push)
• No page-by-page request or polling, but a long-held HTTP request
• Biggest problem: HTTP 1.1 (max. 2 simultaneous connections)
• Streaming:
– Hidden iFrame
– XMLHttpRequest
– Ajax with long polling
– XMLHttpRequest with long polling
– Script tag long polling
21. WebSockets
• Full-duplex communication channel over a single TCP connection
• Persistent connection
• Cross origin support built in (CORS)
• IETF RFC 6455
• Port 80
• WebSockets API (W3C Recommendation)
• Web browser + web server need to implement it
– IIS 8.0, Apache 2.x, nginx 1.3.13+, lighttpd, node.js, …
– Google Chrome 14+, Internet Explorer 10+, Firefox 6+, Safari 6+ and
Opera 12.10+
23. Agenda
Realtime applications
• Goals, use cases, examples
Push technologies
• WebSockets, Comet
SignalR
• Connections and hubs
• Client libraries, supported
platforms, scalability
MVVM in JavaScript
• knockout.js, jQuery, JSON,
oDATA
Events in SharePoint
• Overview
Bringing it all together
• SharePoint 2010
• SharePoint 2013
• SharePoint Online
24. ASP.NET SignalR
• SignalR started in July 2011 as a project by
– David Fowler (Senior Software Design Engineer, ASP.NET Team)
– Damien Edwards (Senior Program Manager, Microsoft)
• Now official part of the ASP.NET Technologies: http://asp.net/signalr
• MSDN documentation (since 03/2013):
http://msdn.microsoft.com/en-us/library/jj891071(v=vs.111).aspx
• Source code on GitHub
• Available via NuGet Gallery (22.000+ downloads in last 6 weeks)
26. SignalR: Features
• Ready to use libraries for server and clients
• Automatic connection management
(send to all clients, to specific clients)
• Uses WebSockets when available, fallback otherwise
(abstraction layer)
• Scale out to thousands of clients
27. SignalR: Transports and fallbacks
HTML 5 transports
These transports depend on support for HTML 5. If the client browser does not support the HTML 5 standard, older transports will
be used.
• WebSocket
• Server Sent Events, also known as EventSource (if the browser supports Server Sent Events, which is basically all browsers
except Internet Explorer.)
Comet transports
The following transports are based on the Comet web application model, in which a browser or other client maintains a long-held
HTTP request, which the server can use to push data to the client without the client specifically requesting it.
• Forever Frame
– for Internet Explorer only, hidden Iframe, one-way realtime connection from server to client, connection from client to server uses a
separate connection, a new connection is created for each piece of data that needs to be sent
• Ajax long polling
– no persistent connection, but instead polling the server with a request that stays open until the server responds, at which point the
connection closes, and a new connection is requested immediately, latency while the connection resets
29. SignalR: Connections
- Simple endpoint for sending single-recipient, grouped, or broadcast
messages
- Connection API (represented in .NET code by the
PersistentConnection class)
- direct access to the low-level communication network that SignalR
exposes
- familiar to developers who have used connection-based APIs such as
Windows Communication Foundation
30. SignalR: Hubs
- high-level pipeline built upon the Connection API
- allows client and server to call methods on each other directly
- SignalR handles dispatching across machine boundaries as if by magic
- For different types of messages, it is recommended that you use the Hub class, so that you
won't have to create your own dispatching
- using the Hub, you can call methods on the clients, rather than sending an explicit message
that needs to be received, interpreted, and acted upon
- familiar to developers who have used remote invocation APIs such as .NET Remoting
32. SignalR: Supported platforms (client side)
• Browsers (JavaScript)
• Windows Desktop
(Forms)
• Silverlight
• Windows Store (.NET)
• Windows Store
(JavaScript)
• Windows Phone (IE)
• Windows Phone (.NET)
• Console
• Web Services
• iOS (Objective-C)
• …
33. SignalR: System requirements (Windows)
• On Facebook you’d say: “It’s complicated.”
• Excerpt from the documentation:
• Server: 2012*, 2008 r2, Azure Website, Windows 8*, Windows 7
• .NET Framework: 4.0 / 4.5*
• IIS: 7,7.5,8*, 8 Express*
• Browser: IE10*
• Silverlight: N/A (restr. 5+)
• WP8: IE* (restr. WP8 App)
• Only * supports WebSockets…
34. SignalR: Performance and scalability (I)
• Standard limit in IIS: 5.000 connections per CPU
• You can override this limit!
• For SignalR about 20.000 connections per CPU usually
also work, depends on your appliaction…
• Special load test tool available:
https://github.com/SignalR/SignalR/tree/dev/src/Microsoft.AspNet.SignalR.Crank
35. SignalR: Performance and scalability (II)
• ScaleOut providers available since SignalR 1.1
– Azure Service Bus
– SQL Server
– Redis
36. SignalR: Performance and scalability (III)
• Helpful documentation on MSDN library
• How to notify the user about disconnections
• How to continuously reconnect
$.connection.hub.connectionSlow(function() {
notifyUserOfConnectionProblem();
// Your function to notify user.
});
$.connection.hub.disconnected(function() {
setTimeout(function() {
$.connection.hub.start();
}, 5000);
// Restart connection after 5 seconds.
});
37. Agenda
Realtime applications
• Goals, use cases, examples
Push technologies
• WebSockets, Comet
SignalR
• Connections and hubs
• Client libraries, supported
platforms, scalability
MVVM in JavaScript
• knockout.js, jQuery, JSON,
oDATA
Events in SharePoint
• Overview
Bringing it all together
• SharePoint 2010
• SharePoint 2013
• SharePoint Online
38. Why MVVM in JavaScript?
• Separate design from code
• Two-way DataBinding for properties
• Command binding
• Templates
39. Which framework to choose?
knockout.js
(Microsoft)
spine.js SproutCore JavascriptMVC ember.js
Angular.js
(Google)
…
40. knockout.js
• Simplify dynamic JavaScript UIs by applying
the Model-View-View Model (MVVM) pattern
• By Steve Sanderson (Microsoft employee),
inspired by XAML, supports legacy browsers…
Declarative Bindings
Easily associate DOM
elements with model data
using a concise,
syntaxreadable
Automatic UI Refresh
When your data model's
state changes, your UI
updates automatically
Dependency Tracking
Implicitly set up chains of
relationships between model
data, to transform and
combine it
Templating
Quickly generate
sophisticated, nested UIs as
a function of your model data
43. JSON – JavaScript Object Notation
• Derived from JavaScript
• Language independant
• Human readable
• Specified by Douglas Crockford
in RFC 4627
• json.org launched in 2002
{
"id": 1,
"name": "Foo",
"price": 123,
"tags": [ "Bar", "Eek" ],
"stock": {
"warehouse": 300,
"retail": 20
}
}
44. oDATA – Open Data Protocol
• standardized protocol for creating and consuming data APIs
• builds on REST web services
• uniform way to expose full-featured data APIs
• from Microsoft, submitted as OASIS standard
• AtomPub protocol as
envelope for JSON
• REST methods available
on sources
• http://www.odata.org/
45. oDATA – Open Data Protocol
• standardized protocol for creating and consuming data APIs
• builds on REST web services
• uniform way to expose full-featured data APIs
• from Microsoft, submitted as OASIS standard
• AtomPub protocol as
envelope for JSON
• REST methods available
on sources
• http://www.odata.org/
46. Agenda
Realtime applications
• Goals, use cases, examples
Push technologies
• WebSockets, Comet
SignalR
• Connections and hubs
• Client libraries, supported
platforms, scalability
MVVM in JavaScript
• knockout.js, jQuery,
oDATA, JSON)
Events in SharePoint
• Overview
Bringing it all together
• SharePoint 2010
• SharePoint 2013
• SharePoint Online
48. Events in SharePoint
• Item events
adding, added,
deleting, deleted,
updating, updated,
fileconverted,
filemoving,
filemoved,
checkingin,
checkedin,
checkingout, checked
out,
attachmentadding,
attachmentadded,
attachmentdeleting,
attachmentdeleted
• List field events
adding, added,
deleting, deleted,
updating, updated
• List events
adding, added,
deleting, deleted
• Web events
adding, provisioned,
deleting, deleted,
moving, moved
• Site events
deleting, deleted
• App events
installed, uninstalling,
upgraded
• And more…
EmailReceived,
WorkflowCompleted,
WorkflowPostponed,
WorkflowStarted,
WorkflowStarting,
FeatureEventReceive
r installation,
activation,
deactivation, and
removal
49. Agenda
Realtime applications
• Goals, use cases, examples
Push technologies
• WebSockets, Comet
SignalR
• Connections and hubs
• Client libraries, supported
platforms, scalability
MVVM in JavaScript
• knockout.js, jQuery, JSON,
oDATA
Events in SharePoint
• Overview
Bringing it all together
• SharePoint 2010
• SharePoint 2013
• SharePoint Online
50. Integration in SharePoint (on-premises)
SharePoint 2010
• uses .NET Framework 3.5
• SignalR requires .NET Framework 4.0 / 4.5
• Coding of a proxy necessary (WCF, HttpHandler or similar)
SharePoint 2013
• uses .NET Framework 4.0
But:
– SignalR attaches itself to the „App_Start“ event and registers a route „~/signalr/hubs“
(so that clients always find the hub)
– In SharePoint, there is no „App_Start“! ¯_(ツ)_/¯
Global.asax cannot be modified in a way that deployablesolution: write a HttpModule
51. Integration in SharePoint (on-premises)
So in order to get it working you have to write:
• HttpModule
• SPWebConfigModificationHandler
• VirtualPathProvider
Thanks to Max Melcher, you don‘t have to: Go to
Codeplex
SPSignalR - real-time applications with SharePoint 2013
• enables you to host SignalR in a SharePoint WebApplication
• web application feature, AppPool recycle, yoursharepoint.com/signalr/hubs
52. Weak points
• CORS (cross site scripting)
– Different browsers handle this with different
success… ;-)
• Proxying required
57. Agenda
Realtime applications
• Goals, use cases, examples
Push technologies
• WebSockets, Comet
SignalR
• Connections and hubs
• Client libraries, supported
platforms, scalability
MVVM in JavaScript
• knockout.js, jQuery, JSON,
oDATA
Events in SharePoint
• Overview
Bringing it all together
• SharePoint 2010
• SharePoint 2013
• SharePoint Online
58. Resources
• Active community
– Forums: http://forums.asp.net/1254.aspx
– Github: We've found 493 repository results
• Official website: http://asp.net/SignalR
• Videos: http://channel9.msdn.com/search?term=signalr
• Trainings:
http://www.pluralsight.com/training/Courses/TableOfContents/signalr-
introduction
• JavaScript libraries: Angular, http://smoothiecharts.org/
• Books: Pushing Data: Integrating with ASP.NET SignalR Hubs
http://henriquat.re/server-
integration/signalr/integrateWithSignalRHubs.html
• More links: https://delicious.com/c.heindel/signalr
59. Open Source projects using SignalR
JabbR
• JabbR is an open source, real-time web chat system built using ASP.NET and SignalR. Source
code is at https://github.com/davidfowl/jabbr.
ShootR
• ShootR is an open source, real-time, multi-player HTML5 space shooter game, using SignalR
for real-time server-client communications. Source code is at
https://github.com/NTaylorMullen/ShootR.
ElmahR = ELMAH & SignalR
• A real-time monitoring solution for ASP.NET applications built with ELMAH and SignalR.
SignalR-ObjC
• A community maintained Objective-C client for SignalR, for use with iOS and Mac.
61. SharePoint Camp
ab 08. Juli in München
ab 05. August in Berlin
ab 02. September in Karlsruhe
in zwei speziellen Versionen
www.SharePointCamp.de
Trainings und Events der ppedv
Mehr als 100 verschiedene Trainings auf
Microsoft-Technologien spezialisiert
11 Standorte in AT & D Maßgeschneiderte Trainings direkt bei Ihnen vor Ort!
www.ppedv.at
Wir sehen uns wieder!
62. Hat Ihnen mein Vortrag gefallen?
Ich freue mich auf Ihr Feedback!