ASP.NET, SignalR, Angular 2 And Typescript Real Time Clock

4. After creating the files, now open Angular 2 folder in Window Explorer and press Shift + Right Key combination and select “Open Command Window here” option or alternatively point to this folder, using command and write NPM install and press Enter.
   
   
   
   After packages are installed, it will create the node_modules and typings folder inside your folder, where you have installed it.
   
   
5. After the packages have been successfully installed, now, we will create the directory structure for placing the source code of Angular 2. In Angular 2, everything is made up of components, so we will make basic and generic folder structure sites, which consist of Components, Classes, Services, Modules, Routing, Common and Shared folders, so create all of them on the project. It’s not necessary to create all the folders. Start it, as per your requirement, and then extend the functionality by creating the folders, as per your need.
   
   
6. We will start first of all by creating the base component inside an app folder and their template as well. Create new TypeScript file with the name of app.component.ts in the root of app folder.
   
   Inside the file, first import the component from Angular Core.
   
   1. import {Component} from '@angular/core'
   Now, create @component decorator and add selector. In this selector, we bind our component to and then template for simple HTML inside file or to use the external template; attach a template via templateUrl, as shown below.
   
   1. @Component({
   2. selector: 'my-app',
   3. templateUrl: './app/app.component.html'
   4. })
   Lastly, export the class to be usable in other classes to import.
   
   1. export class AppComponent { }
7. Now, we will create the template of the app component with the name of app.component.html and put the code given below inside it.
   
   1. <div id="wrapper">
   2. <router-outlet></router-outlet>
   3. </div>
   Basically, router-outlet acts as a placeholder for the component that depends on the current router state.
   
   
8. Now, create app.module, which acts as a base for all the modules which are used and where you can export the component class, values and functions to be used in other modules. Copy and paste the code in the app.module file.
   
   1. import {
   2. NgModule
   3. } from '@angular/core';
   4. import {
   5. BrowserModule
   6. } from '@angular/platform-browser';
   7. import {
   8. AppComponent
   9. } from './app.component';
   10. import {
   11. routing
   12. } from './app.routes';
   13. import {
   14. HttpModule,
   15. JsonpModule
   16. } from '@angular/http';
   17. import {
   18. ClockComponent
   19. } from './components/clock/clock.component';
   20. import {
   21. SignalRService
   22. } from './services/signalRService';
   23. import {
   24. FormsModule
   25. } from '@angular/forms';
   26. @NgModule({
   27. imports: [
   28. BrowserModule,
   29. routing,
   30. HttpModule,
   31. JsonpModule,
   32. FormsModule
   33. ],
   34. declarations: [
   35. AppComponent,
   36. ClockComponent
   37. ],
   38. providers: [
   39. SignalRService
   40. ],
   41. bootstrap: [AppComponent]
   42. })
   43. export class AppModule {}
9. Now, we will create the main.ts file in the root of Angular app folder, which can bootstrap the app module. Paste the code given below.
   
   1. import {
   2. platformBrowserDynamic
   3. } from '@angular/platform-browser-dynamic';
   4. import {
   5. AppModule
   6. } from './app.module';
   7. platformBrowserDynamic().bootstrapModule(AppModule);
10. Move to the other step in which we can create the systemjs .config.js file, which can map the app folder files( transpile files to js) of your app, load the packages from the certain path, set the configuration and finally we place on the main entry point of our app page , which is mainly index.html.
    
    
11. Finally, we will create the index.html file, which is the main entry point of the app, where we register the files like shim, reflect, zone, system js files and also import the files generated previously to the main entry point, using statement System.import (‘path of your mapped app folder’). Inside index.html, place the line of code given below.
    
    1. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. <link rel="stylesheet" href="styles.css">
    7. <link href="app/app.component.css" rel="stylesheet" />
    8. <!-- 1. Load libraries -->
    9. <!-- Polyfill(s) for older browsers -->
    10. <script src="node_modules/core-js/client/shim.min.js"></script>
    11. <script src="node_modules/zone.js/dist/zone.js"></script>
    12. <script src="node_modules/reflect-metadata/Reflect.js"></script>
    13. <script src="node_modules/systemjs/dist/system.src.js"></script>
    14. <!-- 2. Configure SystemJS -->
    15. <script src="systemjs.config.js"></script>
    16. <title>Angular 2 Realtime Clock</title>
    17. <script src="../Scripts/jquery-1.10.2.min.js"></script>
    18. <script src="../Scripts/jquery.signalR.js" type="text/javascript"></script>
    19. <script>
    20. System.import('app');
    21. </script>
    22. </head>
    23. <!-- 3. Display the application -->
    25. <body>
    26. <!-- headers -->
    27. <!-- body -->
    28. <my-app>Loading the app...</my-app>
    29. <!-- footers-->
    30. </body>
    32. </html>
    In our case, also attach the SignalR and jQuery client files, which are required to fulfill our requirement.
    
    
12. After finishing the basic configuration, we will now create the functionality to create the realtime clock , using SignalR like our component, model and Service.
    
    
13. First, we will create the model component. Name the component GetClockTime.ts, place them in the Model folder of your app and paste the code given below inside it.
    
    1. export class GetClockTime {
    2. public Time: string;
    3. constructor(time: string) {
    4. this.Time = time;
    5. }
    6. }
14. In this code block, we created exported class, which is reusable in other components, defined a class member and initialized in the constructor.
    
    
15. Now, we will create some global constant files as the constants are those variables, where the value cannot be changed through the Application execution life cycle. Name the file as app.constants.ts, place in the generic folder and paste the code given below.
    
    1. export let CONFIGURATION = {
    2. baseUrls: {
    3. server: 'http://localhost:50347/'
    4. },
    5. }
16. In this file, we have created the exported variable and added the URL of our Server to be used in the SignalR Service. The basic purpose of using these files is that once we have a list of all the constants that are too frequently used they can be changed in one place and not separately in all the files.
    
    
17. In the next step, we will create SignalR Service, which is the backbone of all the processes.
    
    1. // import the packages
    2. import {
    3. Injectable,
    4. EventEmitter
    5. } from '@angular/core';
    6. import {
    7. CONFIGURATION
    8. } from '../generic/app.constants';
    9. import {
    10. GetClockTime
    11. } from '../models/getclocktime';
    12. // declare the global variables
    13. declare
    14. var $: any;
    15. @Injectable()
    16. export class SignalRService {
    17. // Declare the variables
    18. private proxy: any;
    19. private proxyName: string = 'clock';
    20. private connection: any;
    21. // create the Event Emitter
    22. public messageReceived: EventEmitter < GetClockTime > ;
    23. public connectionEstablished: EventEmitter < Boolean > ;
    24. public connectionExists: Boolean;
    25. constructor() {
    26. debugger;
    27. // Constructor initialization
    28. this.connectionEstablished = new EventEmitter < Boolean > ();
    29. this.messageReceived = new EventEmitter < GetClockTime > ();
    30. this.connectionExists = false;
    31. // create hub connection
    32. this.connection = $.hubConnection(CONFIGURATION.baseUrls.server);
    33. // create new proxy as name already given in top
    34. this.proxy = this.connection.createHubProxy(this.proxyName);
    35. // register on server events
    36. this.registerOnServerEvents();
    37. // call the connecion start method to start the connection to send and receive events.
    38. this.startConnection();
    39. }
    40. // method to hit from client
    41. public sendTime() {
    42. // server side hub method using proxy.invoke with method name pass as param
    43. this.proxy.invoke('GetRealTime');
    44. }
    45. // check in the browser console for either signalr connected or not
    46. private startConnection(): void {
    47. this.connection.start().done((data: any) => {
    48. console.log('Now connected ' + data.transport.name + ', connection ID= ' + data.id);
    49. this.connectionEstablished.emit(true);
    50. this.connectionExists = true;
    51. }).fail((error: any) => {
    52. console.log('Could not connect ' + error);
    53. this.connectionEstablished.emit(false);
    54. });
    55. }
    56. private registerOnServerEvents(): void {
    57. debugger;
    58. this.proxy.on('setRealTime', (data: GetClockTime) => {
    59. console.log('received in SignalRService: ' + JSON.stringify(data));
    60. this.messageReceived.emit(data);
    61. });
    62. }
    63. }
    Create the Service in the Service folder and paste the code given below inside it.
    
    I have commented each section for ease.
    
    
18. Further we will create the main component of the realtime clock. Create the new component by first creating the folder of the module then creating component file, namely clock.component.ts.
    
    Place the line of code given below inside it.
    
    1. import {
    2. Component,
    3. NgZone
    4. } from '@angular/core';
    5. import {
    6. SignalRService
    7. } from '../../services/signalRService';
    8. import {
    9. GetClockTime
    10. } from '../../models/getclocktime';
    11. // decorator section comprised of selector and view template
    12. @Component({
    13. selector: 'clock-component',
    14. templateUrl: './app/components/clock/clock.component.html'
    15. })
    16. export class ClockComponent {
    17. // public variables declaration
    18. public currentMessage: GetClockTime;
    19. public allMessages: GetClockTime;
    20. public canSendMessage: Boolean;
    21. // constructor of the class to inject the service in the constuctor and call events.
    22. constructor(private _signalRService: SignalRService, private _ngZone: NgZone) {
    23. // this can subscribe for events
    24. this.subscribeToEvents();
    25. // this can check for conenction exist or not.
    26. this.canSendMessage = _signalRService.connectionExists;
    27. // this method call every second to tick and respone tansfered to client.
    28. setInterval(() => {
    29. this._signalRService.sendTime();
    30. }, 1000);
    31. }
    32. private subscribeToEvents(): void {
    33. // if connection exists it can call of method.
    34. this._signalRService.connectionEstablished.subscribe(() => {
    35. this.canSendMessage = true;
    36. });
    37. // finally our service method to call when response received from server event and transfer response to some variable to be shwon on the browser.
    38. this._signalRService.messageReceived.subscribe((message: GetClockTime) => {
    39. debugger;
    40. this._ngZone.run(() => {
    41. this.allMessages = message;
    42. });
    43. });
    44. }
    45. }
19. Last but not least, we will create a view template against the component, in which we will place the clock to be shown in the Browser. Create the clock.component.html file as a view to show the data to the Browser.
    
    1. <style type="text/css">
    2. p {
    3. color: #000;
    4. font-size: 8.7em;
    5. font-family: Helvetica, Arial;
    6. padding-top: 0%;
    7. margin-left: 25%;
    8. }
    9. </style>
    10. <div id="timediv">
    11. <p>{{allMessages}}</p>
    12. </div>

Step 6

Launch the project on the Browser by using command prompt NPM start statement or launch the Browser by using Visual Studio F5 and typing Angular 2 to point to Angular 2 app.

Finally, the output is given, as shown below.