github/aspnet-core-signalr-angular
1
1
Fork 0
mirror of https://github.com/chsakell/aspnet-core-signalr-angular.git synced 2025-12-22 17:27:48 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

add SignalR client service

Browse Source
This commit is contained in:
chsakell
2016-09-27 15:43:30 +03:00
parent cd3a4001e6
commit 1ef3f04731
6 changed files with 159 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Hubs/Broadcaster.cs
View File

@@ -7,11 +7,11 @@ namespace LiveGameFeed.Hubs
{ {
public override Task OnConnected() public override Task OnConnected()
{ {
return Clients.All.Message("New connection " + Context.ConnectionId); return Clients.All.userConnected("New connection " + Context.ConnectionId);
} }
public Task Broadcast(string message) public Task Broadcast(string message)
{ {
return Clients.All.Message(Context.ConnectionId + "> " + message); return Clients.All.messageReceived(Context.ConnectionId + "> " + message);
} }
} }
} }

6
Views/Home/Index.cshtml
View File

@@ -26,7 +26,8 @@
</head> </head>
<body> <body>
<my-app>Loading...</my-app> <my-app>Loading...</my-app>
<!--
<script type="text/javascript"> <script type="text/javascript">
$(function () { $(function () {
var broadcaster = $.connection.broadcaster; var broadcaster = $.connection.broadcaster;
@@ -39,6 +40,7 @@
broadcaster.server.broadcast('hello from client'); broadcaster.server.broadcast('hello from client');
}); });
}); });
</script> </script>
-->
</body> </body>
</html> </html>

19
app/app.component.ts
View File

@@ -1,6 +1,19 @@
import { Component } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FeedService, ConnectionState } from './shared/feed.service'
@Component({ @Component({
selector: 'my-app', selector: 'my-app',
templateUrl: 'app/app.component.html' templateUrl: 'app/app.component.html',
providers: [FeedService]
}) })
export class AppComponent { } export class AppComponent implements OnInit {
constructor(private service: FeedService) { }
ngOnInit() {
this.service.start(true).subscribe(
null,
error => console.log('Error on init: ' + error));
}
}

30
app/home/home.component.ts
View File

@@ -1,11 +1,37 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { FeedService, ConnectionState } from '../shared/feed.service';
@Component({ @Component({
selector: 'home', selector: 'home',
templateUrl: 'app/home/home.component.html' templateUrl: 'app/home/home.component.html'
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() { } error: any;
constructor(private service: FeedService) { }
ngOnInit() {
this.service.connectionState
.subscribe(
connectionState => {
if (connectionState == ConnectionState.Connected) {
console.log('Connected!');
} else {
console.log(connectionState.toString());
}
},
error => {
this.error = error;
console.log(error);
});
if (this.service.currentState === ConnectionState.Connected) {
console.log(' connected....');
}
else {
console.log('not connected');
}
}
} }

108
app/shared/feed.service.ts Normal file
View File

@@ -0,0 +1,108 @@
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from "rxjs/Observable";
import { Subject } from "rxjs/Subject";
interface FeedSignalR extends SignalR {
broadcaster: FeedProxy
}
interface FeedProxy {
client: FeedClient
}
interface FeedClient {
userConnected: (user: any) => void;
userDisconnected: (id: string) => void;
messageReceived: (message: string) => void;
}
export enum ConnectionState {
Connected = 1,
Disconnected = 2,
Error = 3
}
@Injectable()
export class FeedService {
currentState = ConnectionState.Disconnected;
connectionState: Observable<ConnectionState>;
userConnected: Observable<any>;
messageReceived: Observable<string>;
private connectionStateSubject = new Subject<ConnectionState>();
private userConnectedSubject = new Subject<any>();
private messageReceivedSubject = new Subject<string>();
constructor(private http: Http) {
this.connectionState = this.connectionStateSubject.asObservable();
this.userConnected = this.userConnectedSubject.asObservable();
this.messageReceived = this.messageReceivedSubject.asObservable();
}
start(debug: boolean): Observable<ConnectionState> {
// only for debug
$.connection.hub.logging = debug;
// get the signalR hub named 'broadcaster'
let connection = <FeedSignalR>$.connection;
let feedHub = connection.broadcaster;
/**
* @desc callback when a new user connect to the chat
* @param User user, the connected user
*/
feedHub.client.userConnected = user => this.onUserConnected(user);
/**
* @desc callback when a message is received
* @param String to, the conversation id
* @param Message data, the message
*/
feedHub.client.messageReceived = message => this.onMessageReceived(message);
if (debug) {
// for debug only, callback on connection state change
$.connection.hub.stateChanged(change => {
let oldState: string,
newState: string;
for (var state in $.signalR.connectionState) {
if ($.signalR.connectionState[state] === change.oldState) {
oldState = state;
}
if ($.signalR.connectionState[state] === change.newState) {
newState = state;
}
}
console.log("Feed Hub state changed from " + oldState + " to " + newState);
});
}
// start the connection
$.connection.hub.start()
.done(response => this.setConnectionState(ConnectionState.Connected))
.fail(error => this.connectionStateSubject.error(error));
return this.connectionState;
}
private setConnectionState(connectionState: ConnectionState) {
console.log('connection state changed to: ' + connectionState);
this.currentState = connectionState;
this.connectionStateSubject.next(connectionState);
}
private onUserConnected(user: any) {
console.log("Chat Hub new user connected: " + user);
this.userConnectedSubject.next(user);
}
private onMessageReceived(message: string) {
console.log(message);
this.messageReceivedSubject.next(message);
}
}

2
gulpfile.js
View File

@@ -126,7 +126,7 @@ gulp.task("dependencies", ["copy:angular",
gulp.task("watch", function () { gulp.task("watch", function () {
return watch(paths.app) return watch(paths.app)
.pipe(gulp.dest(paths.appDest)) .pipe(gulp.dest(paths.appDest));
}); });
gulp.task("min:app", function () { gulp.task("min:app", function () {