Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

64
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

description

As seen at http://www.sharepointkonferenz.at/

Transcript of Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Page 1: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Formatvorlage des Untertitelmasters durch Klicken bearbeiten

Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner:

Echtzeitanwendungen für SharePoint mit SignalR und knockout.jsChristian Heindel, Communardo Software GmbH

SignalR @c_heindel

Page 2: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Lösungen für die Kommunikation und Zusammenarbeit im UnternehmenWir 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.

Page 3: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 4: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 5: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Goals

Improve user experience

Reduce server load

Page 6: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 7: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

TFS – Team Room

Quelle: http://tfs.visualstudio.com/en-us/news/2013-jun-3

Page 8: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Shopping cart

Quelle: http://tech.pro/tutorial/1146/building-a-shopping-cart-with-signalr-aspnet-web-api-and-knockoutjs

Page 9: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Stock Ticker

Quelle: SignalR

Page 10: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Download counter

Quelle: http://melcher.it/2012/05/signalr-and-sharepoint-live-download-tracking/

Page 11: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Upload visualizer

Quelle: http://blog-aspc.azurewebsites.net/sharepoint-with-signalr/

Page 13: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

JabbR

Collaborative chat done right

• Project:http://about.jabbr.net/

• Code:https://github.com/JabbR/JabbR

• Live demo:https://jabbR.net

Page 14: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

ShootR

Multiplayer space ship game built on the SignalR framework.

• Code:https://github.com/ntaylormullen/shootr

• Live demo:http://shootr.signalr.net/

Page 15: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Tic-Tac-Toe

• Code:https://github.com/fekberg/Tic-Tac-Toe

• Live demo:http://signalr-tictactoe.azurewebsites.net/

Page 16: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

DEMO

Page 17: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

http://www.christian-heindel.de/SignalRServer/

Page 18: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 19: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 20: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 21: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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+

Page 22: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

caniuse.com

Page 23: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 24: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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)

Page 26: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 27: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 28: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

SignalR: Architecture diagram

Quelle: SignalR

Page 29: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 30: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 31: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

SignalR: Supported platforms (server side)

http://blogs.msdn.com/b/timlee/archive/2013/02/27/deploy-the-signalr-getting-started-sample-as-a-windows-azure-web-site.aspx

Page 32: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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)• …

Page 33: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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…

Page 34: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 35: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

SignalR: Performance and scalability (II)

• ScaleOut providers available since SignalR 1.1– Azure Service Bus– SQL Server– Redis

Page 36: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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.

});

Page 37: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 38: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Why MVVM in JavaScript?

• Separate design from code

• Two-way DataBinding for properties

• Command binding

• Templates

Page 39: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Which framework to choose?

knockout.js(Microsoft)

spine.js SproutCore JavascriptMVC ember.js Angular.js(Google) …

Page 40: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 41: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

knockout.js

Load JavaScript:

DataBinding in HTML:

Define ViewModel:

Start listening:

Refresh values:

Page 42: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

knockout.js

Load JavaScript:

DataBinding in HTML:

Define ViewModel:

Start listening:

Refresh values:

JSON?

Page 43: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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 }}

Page 44: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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/

Page 45: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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/

For example via /_vti_bin/ListData.svc in SharePoint

Page 46: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 47: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Events in SharePoint

Synchronous or asynchronous

(before or after)

Local, app or remote (new in SP2013)

Page 48: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Events in SharePoint

• Item eventsadding, 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 eventsadding, added, deleting, deleted

• Web eventsadding, provisioned, deleting, deleted, moving, moved

• Site eventsdeleting, deleted

• App eventsinstalled, uninstalling, upgraded

• And more… EmailReceived, WorkflowCompleted, WorkflowPostponed, WorkflowStarted, WorkflowStarting, FeatureEventReceiver installation, activation, deactivation, and removal

Page 49: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 50: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 51: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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 CodeplexSPSignalR - real-time applications with SharePoint 2013• enables you to host SignalR in a SharePoint WebApplication• web application feature, AppPool recycle, yoursharepoint.com/signalr/hubs

Page 52: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Weak points

• CORS (cross site scripting)– Different browsers handle this with different

success… ;-)• Proxying required

Page 53: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Integration in SharePoint Online (I)

• Remote Event Receiver - Declaration

Page 54: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Integration in SharePoint Online (II)

• Remote Event Receiver - Implementation

Page 55: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Integration in SharePoint Online (III)

• SignalRHub in same project as RemoteEventReceiver

Page 56: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

DEMO56

Page 57: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 58: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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

Page 59: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

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.

Page 60: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

FRAGEN ?

Page 61: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

SharePoint Camp ab 08. Juli in Münchenab 05. August in Berlinab 02. September in Karlsruhein zwei speziellen Versionenwww.SharePointCamp.de

Trainings und Events der ppedvMehr als 100 verschiedene Trainings auf Microsoft-Technologien spezialisiert11 Standorte in AT & D Maßgeschneiderte Trainings direkt bei Ihnen vor Ort!www.ppedv.at

Wir sehen uns wieder!

Page 62: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Hat Ihnen mein Vortrag gefallen?Ich freue mich auf Ihr Feedback!

Page 63: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

VIELEN DANK!

Platin-Partner: Gold-Partner: Veranstaltungs-Partner: Medien-Partner:

Page 64: Asynchrone Echtzeitanwendungen für SharePoint mit SignalR und knockout.js

Communardo Software GmbHKleiststraße 10 a01129 Dresdenhttp://[email protected]

Phone: +49 (351) 833 820

Standort StuttgartLeinfelder Straße 6470771 Leinfelden-Echterdingen

Phone: +49 (711) 220469-61

Thank you for listening!

Christian Heindel

[email protected]: +49 (0) 171 - 3123924

Twitter: @c_heindelBlog: http://blog.christian-heindel.deBlog: http://www.communardo.de/techblog/