46
Real-Time Web Applications

Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

  • Upload
    others

  • View
    0

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Real-Time Web Applications

Page 2: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Agenda

• Was ist real time Kommunikation?

• Wie wurde das Problem in der Vergangenheit gelöst?

• Entwickeln einer Chat-Applikation:1. Schreiben und Anzeigen von Nachrichten

2. Senden und Empfangen von Nachrichten (klassisches Client – Server Prinzip)

3. Automatisches abholen der Nachrichten vom Server (polling)

4. Serverseitige Push-Notifications

• Weitere Technologien

Page 3: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Real-time communication Definition

Real-time communications (RTC) is any mode of telecommunications in which all users can exchange information instantly or with negligible

latency. In this context, the term "real-time" is synonymous with "live".

http://whatis.techtarget.com

Page 4: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Unterscheidung zu:

• Real-time Anwendungen:• Garantieren das Ausführen einer Operation in einer vorgegebenen Zeit

• Nicht dasselbe wie High-Performance

• Fahrassistenz Systeme/Autopiloten, Streaming

• Real-time über Netzwerke:• Spezielle Netzwerke können maximale Zustellzeiten garantieren

• Gilt nicht für das Internet

Page 5: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Heutiges Thema:

„Soft-Real-Time”: wir wollen so zeitnah wie möglich und verlässlich auf Userinteraktionen oder serverseitige Ereignisse reagieren – ohne dabei jedoch eine bestimmte Zustellzeit zu garantieren

Page 6: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Use cases

• Online Office Suites, Cloud IDEs,…

• Visualisierungen (z.B. live-Diagramme)

• Finanz-Anwendungen

• Games

• Instant Messaging

• Nachrichten

• Liveticker

• …

Page 7: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

I‘m not sure I believe that there is such a thing as „realtime apps“ anymore. Apps either update instantly

and smoothly, or they appear broken.

Max Williams – CEO Pusher

Page 8: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

In der Vergangenheit

• HTML und HTTP vor HTML5:• Post-back basiert (kann mittels AJAX umgangen werden)

• Unidirektional (Client Server)

• Keine Audio-/Video-Wiedergabe

• Zeichnen von komplexen Objekten nicht möglich

• 3D Zeichnungen nicht möglich

• Lösungen:Java Applets, Flash oder Silverlight Anwendungen

Page 9: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Clientseitiger Code: Marktentwicklung

0.00%

10.00%

20.00%

30.00%

40.00%

50.00%

60.00%

70.00%

80.00%

90.00%

100.00%

01.01.2011 01.01.2012 01.01.2013 01.01.2014 01.01.2015 01.01.2016 01.01.2017 03.05.2017

None JavaScript Flash Silverlight Java

Quelle: w3techs.com

Page 10: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Technologie-Stack

Layer Technologie Alternativen

Client-side

UI-Layer Twitter Bootstrap Foundation, Pure, HTML Kickstart, …

Client side Angular (4) mit TypeScript

React, Angular 1, Backbone, …

Server-side

“Real-Time” communication SignalR Core SignalR, Pusher, socket.io, …

Web Framework ASP.NET Core ASP.NET 4.6, Spring, Node.js, …

Runtime .NET Core .NET, Java, Node.js, …

Page 11: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

• Clientseitiges MVC Framework von Google

• Starke Konzentration auf Data-bindingIdeal in Echtzeitumgebungen, da das Template automatisch aktualisiert wird,

wenn neue Daten vom Server eintreffen

Page 12: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V1: Lokale Angular Anwendung

Page 13: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V1: Lokale Angular Anwendung

<div class="chatMessage" *ngFor="let msg of chatMessages“[class.author]="msg.isAuthor(user)">

<div class="chatUser">{{msg.username}}:</div><span class="chatText">{{msg.text}}</span><div class="chatDate">{{msg.sentAt | date: "HH:mm"}}</div>

</div>

sendMessage(): void {let message = new Message(this.user.username, this.user.sessionId,this.messageText, new Date());

this.chatService.sendMessage(message);

this.messageText = "";}

Page 14: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V1: Lokale Angular Anwendung

• Noch keine serverseitige Komponente

• Komponente, welche alle Nachrichten darstellt

• Nachrichten werden in einem Service gespeichert

Page 15: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

https://tinyurl.com/aka-local

Page 16: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

ASP.NET Core

• Open Source

• Multi-Plattform

• Komplette Neu-Entwicklung von ASP.NET

• .NET Framework und .NET Core kompatibel

• Zusammenlegung von MVC und Web API

Page 17: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

ASP.NET Core

Page 18: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V2: Klassische Client-Server Anwendungpublic class ChatController : Controller{private static List<ChatMessage> messages = new List<ChatMessage>();[HttpGet]public IEnumerable<ChatMessage> ReceiveMessages(){return messages;

}[HttpPost]public void SendMessage([FromBody] ChatMessage message){if (message != null && !string.IsNullOrEmpty(message.Text)){

messages.Add(message);}

}}

Page 19: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

TypeScript Interfaces

public class ChatMessage{public string Username { get; set; }

public string SessionId { get; set; }

public DateTime SentAt { get; set; }

public string Text { get; set; }}

interface IChatMessage {username: string;

sessionId: string;

sentAt: Date;

text: string;}

transform

Optional:Um über die Grenzen zwischen Client und Server die Typsicherheit nicht zu verlieren generieren wir aus unseren C#-Klassen automatisiert TypeScript-Interfaces, welche wir in unseren TypeScript-Objekten implementieren:

Page 20: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V2: Klassische Client-Server Anwendung

Page 21: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V2: Klassische Client-Server Anwendung

• Neu: Serverseitige Komponente

• Controller mit Operationen:• Lesen von Nachrichten

• Senden einer Nachricht

• Client liest Nachrichten auf Kommando und speichert sie lokal ab

• Senden einer Nachricht: geht direkt an den Server

Page 22: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

https://tinyurl.com/aka-refresh

Page 23: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Polling

• HTTP basiert

• Simple/Traditionelle Variante

• In regelmäßigen Abständen wird der Server gefragt ob es etwas neues gibt

• Jede Verbindung geht vom Client aus

• Verursacht viel Traffic

• Hoher Ressourcenverbrauch

Page 24: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V3: Automatischer refresh (polling)

ngOnInit(): void {this.retrieveMessages();

window.setInterval(() => this.retrieveMessages(), 1000);}

Page 25: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V3: Automatischer refresh (polling)

Page 26: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V3: Automatischer refresh (polling)

• Client:• Manueller Aufruf von GetMessages() wird durch einen Aufruf in einer Schleife

ersetzt

Page 27: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

https://tinyurl.com/aka-polling

Page 28: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Requests pro Stunde bei 100 Benutzern

-

1'000'000

2'000'000

3'000'000

4'000'000

5'000'000

6'000'000

7'000'000

8'000'000

9'000'000

10'000'000

25 10 1 0.2 0.1

Aktualisierungen pro Sekunde

Page 29: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Real-Time Technologien

• Polling

• Long Polling

• Server-Sent Events

• Forever Frame

• WebSockets

Page 30: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Long Polling

• HTTP basiert

• Client initiiert Verbindung

• Server antwortet nicht direkt auf jeden Request• Erst wenn Daten bereitstehen,

wird eine Antwort gesendet

• Oder nach einem Timeout

• Nach jeder Response (ob Daten oder Timeout) setzt der Client einen neuen Request ab

Page 31: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Server-Sent Events

• HTTP-basiert

• Unidirektionale Kommunikation

• Client öffnet Verbindung zum Server und behält diese offen

• Server nützt die offene Verbindung um Daten an den Client zu senden

• Client Server Kommunikation läuft auf einem eigenen Kanal mittels AJAX-Requests

Page 32: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Forever Frame

• HTTP basiert

• Unidirektionale Kommunikation

• Unsichtbares iframe auf Webseite

• Inhalt des iframes wird in “chunks” geliefert• HTTP 1.1 Feature• Dafür gedacht, wenn Response-Size nicht

bekannt ist

• Jede einzelne Response enthält eine kodierte Nachricht vom Server an den Client

• Client Server Kommunikation läuft auf einem eigenen Kanal mittels AJAX-Requests

Page 33: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

WebSockets

• TCP basiert

• Bidirektionale Kommunikation

• Anfrage bezüglich WebSockets wird an Server gesendet

• Protokoll wird von HTTP zu WS gewechselt(spezieller Support in Server und Client nötig)

• Frames werden über die offene Verbindung in beide Richtungen ausgetauscht

Page 34: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Browser Support

Long polling Server-Sent Events Forever Frame WebSockets

IE 8 ✓ ✓

IE 11 ✓ ✓ ✓

Edge 15 ✓ ✓ ✓

Firefox 53 ✓ ✓ ✓

Chrome 58 ✓ ✓ ✓

Chrome 57 (Android) ✓ ✓ ✓

Safari 10 ✓ ✓ ✓

iOS Safari 10 ✓ ✓ ✓

Page 35: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Server Support

Long polling Forever Frame Server-Sent Events WebSockets

IIS 7.5 ✓ ✓ ✓

IIS 8 ✓ ✓ ✓ ✓

Tomcat 6 ✓ ✓ ✓

Tomcat 7 ✓ ✓ ✓ ✓

Apache 2.3 ✓ ✓ ✓

Apache 2.4 ✓ ✓ ✓ ✓

Node.js ✓ ✓ ✓ ✓

Page 36: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Übersicht

Long-polling Server-sent Events Forever Frame WebSockets

Client Support Alle Browser Aktuelle nicht-MSBrowser

Aktuelle MS Browser

Alle aktuellen Browser

Server Support Alle Alle gängigen Alle gängigen Alle gängigen

Richtung Client ServerClient Server

Client Server Client Server Client ↔ Server

Reaktionszeit Delay zwischen dem Timeout einer Verbindung und dem nächsten Verbindungsaufbau

Default: max. 3s (konfigurierbar)

Leicht zeitverzögert (abfragen von Daten im iFrame)

“Real-time”

Page 37: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

SignalR

• Abstraktion und Vereinheitlichung der vorgestellten Technologien

• Client und Server kommunizieren über einen „Hub“

• Zu verwendende Technologie wird beim Verbindungsaufbau ausgehandelt

Page 38: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

SignalR

Page 39: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V4: Server-Client Kommunikation mit SignalR

Client Serverpublic class ChatHub : Hub{

public void SendMessage(ChatMessage message)

{this.Clients.All.broadcast(message);

}}

export class ChatService {constructor(private http: Http) {$.connection.chatHub.client

.broadcast = this.receive;}sendMessage(msg: Message): void {$.connection.chatHub.server.sendMessage(msg);

}receive = (msg: ChatMessage): void => {this.component.messages.push(msg);

};}

Page 40: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V4: Server-Client Kommunikation mit SignalR

Page 41: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

V4: Server-Client Kommunikation mit SignalR

• Server:• Ersetzen des ASP.NET Controllers durch einen SignalR Hub

• Nachrichten werden direkt verteilt

• Client:• Einbinden des auto-generierten JavaScript Codes für den Hub

• Aufrufen von sendMessage() und setzen des broadcast() Callbacks anstelle von regulären Service-calls

Page 42: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

https://tinyurl.com/aka-final

Page 43: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

WebRTC

• „Web Real-Time Communication“

• Offener Standard für End to End Verbindungen

• Kommunikation mittels RTP

• Hauptanwendungszweck: Streaming

• Benötigt Server mit eigenem Protokoll für den Verbindungsaufbau

Browser Support

IE 11

Edge (ab 15) ✓

Firefox ✓

Chrome ✓ (Browser prefix)

Opera ✓ (Browser prefix)

Safari

Page 44: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

HTTP/2

• Erweiterung des HTTP Standards

• Binäres Format

• Erlaubt komprimieren der gesamten Nachricht

• Multiplexing Support Vereinfacht Long polling

• Server side push

Page 45: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

HTTP/2 - Server side push

HTTP 1.1:

HTTP/2:

Page 46: Real-Time Web Applications c-Akademie/Real-Time_Web_Apps.pdf2. Senden und Empfangen von Nachrichten (klassisches Client –Server Prinzip) 3. Automatisches abholen der Nachrichten

Demo: High FrequencyUpdates

https://tinyurl.com/aka-circles