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

아티클
1/17/2024

In this article, we will see how we can create real time clock, using SignalR, Angular 2 and integrate Angular 2 app inside ASP.NET in addition to viewing its results.

Before proceeding to the step wise progress of creating a real time clock, it’s better to understand a few of the important terms and concepts.

What is the meaning of real time communication?

Real time communication (RTC) is a term, which means a communication which does not have delays, as the clients connect to each other through the Server when any client sends a message as soon as the Server receives it it pushes it towards another connected or all the connected clients without any delay. Like Instant Messaging Services, we use popular Services like WhatsApp, IMO and Facebook Messenger.

It uses peer-to-peer connection with minimum latency, RTC data and messages are not stored between the transmissions.

I think, it’s enough to have information on real time communication, if you are willing to deep dive, you can check out the available content on the Web.

Now, we will discuss it.

What is ASP.NET SignalR?

It is an ASP.NET library which adds real time functionality to the Web apps. As we already discussed, in real time communication, the Server receives the data without storing it and pushes it towards the connected clients.

SignalR provides simple API for generating Server to the client Remote Procedure Calls (RPC) that hits with JavaScript functions on the client from the Server side or the same. It is reciprocal from the client to the Server, as it supports bi-directional communication.

SignalR contains built in rich mechanisms for the management of connections and methods to connect, disconnect or reconnect are available to override, grouping and authorization.

And the last but not the least technology, where we used to create an app is Angular 2.

What is Angular 2?

Angular 2 is a rich UI Framework to build mobile and Web Applications. It is built, using JavaScript. It has many enhancements over its 1^st version Angular 1. It is recreated and now it is better to develop the Applications with Angular 2, as it has extended set of features mentioned below.

Cross Browser and Cross Platform compatibility.
Two way data binding.
Enhanced routing support.
Modular structure to manage your code.
Excellent community support.
High speed and performance
Fully productive tools to fast pace your work
Unit testing

This is all the brief introduction of all the things we all going to create the web app with.

So let’s start to build the app step wise.

Step 1

Go to File - New - Project and select ASP.NET Web Application. Afterwards, name the project and the destination. Press OK.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image001.png

After pressing OK Button it will open new window to select the template of the new project.

In our case, we are using an empty template with MVC check box checked.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image002.png

Now, press OK button again to create the project.

We have successfully created our Web Application.

Step 2

Now, we will first install SignalR to the created app.

For this, we would right click the project and select Manage NuGet Packages.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image003.png

NuGet Package Manager Window opens, search SignalR, press Install button to install the packages.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image004.png

Now, review the changes Window opens and these changes are reflected on your solution after installing it.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image005.png

Press OK button to continue.

After this License Acceptance Window opens. Click I accept to accept the license, else Press I Decline.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image006.png

As this is the final step towards installing SignalR through NuGet Package Manger and it can install all the dependencies and the Scripts needed for the project. It opens the Project folder in which change has occurred.

You can verify the package installed or not by verifying the tick mark on the package, which you installed in the NuGet Package Manager Window.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image007.png

Step 3

Download and install NodeJS for Windows.

Go to *https://nodejs.org/en/* and click on the recommended version to be installed for Windows.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image008.png

After downloading, install Microsoft installer file and follow the steps to install in your local machine.

To check, if it has successfully installed on your local machine, open Command Prompt Window and Type node –v and hit enter. If it returns the node version, as shown in the image, it has been successfully installed.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image009.png

Also, verify NPM is installed by typing the command npm –v.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image010.png

Step 4

Add OWIN Startup class to the project by adding New Item to the root of the project.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image011.png

After the file is created, add the code given below to the file inside Configuration method.

app.MapSignalR();

Step 5

Add SignalR Hub Class to the Project. The better approach is to make a folder with the name of hubs and add Hub Class inside it.

We first create the folder namely Hubs and create a Hub Class by right clicking on the folder. Select Add è SignalR Hub Class, name it and it will add hub class to the folder.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image012.png

I have created Hub class with the name of Clock. By default, it will be created with Hello method.

Copy and paste the method given below to follow this tutorial.

public void GetRealTime() {
Clients.Caller.setRealTime(DateTime.Now.ToString("h:mm:ss tt"));
}

Now, let’s elaborate this method, as you can see GetRealTime is a hub method and it is a Server side method. From client, we hit this Server side event and on the result, it makes remote procedure call and sends the response back to the client by calling Clients.Caller.setRealTime method, which is then used in the client side to accept the response and show to the client.

Caller means the calling client, which is connected to the hub.

setRealTime function is used in the client end to broadcast and show the response.

Step 6

Now, we will move to setup the Angular 2 environment for your project.

If you want to quick start your project, you can use the ready made available project of Angular2 from official GitHub account of Angular2 and clone the project to quick start.

I have enlisted the steps below to setup for your local development environment.

Make sure that you have installed node and NPM. Node is for the client side Applications and build tools and NPM Package Manager installs JavaScript libraries.
Create Angular 2 folder on the root of your project and then app folder, where we place only Angular2 code and in Angular2 folder, we place the configuration and other files are required at the root.
Create the Configuration files.
1. First, create the tsconfig.json file. For this, press Ctrl + Shift + A or right click Angular 2 folder and select Add New Item from context menu, new Window appears, select JSON file, name it tsconfig.json and press Add to create the file. The basic purpose of this file is to set the environment for TypeScript compilation configuration. Through this file, all TypeScript files transpiles to Javascript. Add the code given below to the file.
  1. {
  2. "compilerOptions": {
  3. "target": "es5",
  4. "module": "system",
  5. "moduleResolution": "node",
  6. "sourceMap": true,
  7. "emitDecoratorMetadata": true,
  8. "experimentalDecorators": true,
  9. "removeComments": false,
  10. "noImplicitAny": false
  11. },
  12. "exclude": ["node_modules", "typings/main", "typings/main.d.ts"]
  13. }
2. Now, create the file through the procedure given above, namely typings.json, which can identity TypeScript definition’s file in your Angular Application. There are three types of typing files defined in file. A) core-js b) jasmine and c) node. Copy the code given below to the file.
  1. {
  2. "globalDependencies": {
  3. "core-js": "registry:dt/core-js#0.0.0+20160602141332",
  4. "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
  5. "node": "registry:dt/node#6.0.0+20160621231320"
  6. }
  7. }
3. Now, create package.json file. This file contains the packages required by our app. The packages are installed and maintained, using Node Package Manager. Copy the code given below the file.
  1. {
  2. "name": "angular2realtimeclock",
  3. "version": "1.0.0",
  4. "scripts": {
  5. "start": "concurrent \npm run tsc:w\ \npm run lite\ ",
  6. "tsc": "tsc",
  7. "tsc:w": "tsc -w",
  8. "lite": "lite-server",
  9. "typings": "typings",
  10. "postinstall": "typings install"
  11. },
  12. "license": "ISC",
  13. "dependencies": {
  14. "angular2": "2.0.0-beta.7",
  15. "systemjs": "0.19.22",
  16. "es6-promise": "^3.0.2",
  17. "es6-shim": "^0.33.3",
  18. "reflect-metadata": "0.1.2",
  19. "rxjs": "5.0.0-beta.2",
  20. "zone.js": "0.5.15"
  21. },
  22. "devDependencies": {
  23. "concurrently": "^2.0.0",
  24. "lite-server": "^2.1.0",
  25. "typescript": "^1.7.5",
  26. "typings": "^0.6.8"
  27. }
  28. }

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.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image013.png

After packages are installed, it will create the node_modules and typings folder inside your folder, where you have installed.
After the packages have been successfully installed, now, we will create the directory structure for residing the source code of Angular 2. In Angular 2, everything is made up of component, so we will make basic and generic folder structure site, which consists 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 need.
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. })
In the last, export the class to be usable in other class to import.
1. export class AppComponent { }
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.
Now, create app.module, which acts as a base of 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 {}
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);
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.
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. 
9. 
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. 
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. 
25. <body>
26. 
27. 
28. <my-app>Loading the app...</my-app>
29. 
30. </body>
32. </html>
In our case, also attach the SignalR and jQuery client files, which are required to fulfill our requirement.
After finishing the basic configuration and settle down the things, we will now create the functionality to create the realtime clock , using SignalR like our component, model and Service.
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. }
In this code block, we created exported class, which is reusable in other components, define a class member and initialize in the constructor.
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. }
In this file, we have created the exported variable and add the URL of our Srver to be used in the SignalR Service. The basic purpose of using these files is that once we have list of all the constants that are too frequently used can be changed in one place and not separately all the files.
In the next step, we will create SignalR Service, which is the backbone of all the process.
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 easiness.
Further we will create the main component of the realtime clock. Create the new component by firstly creating the folder of the module than create 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. }
Last but not the 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 type Angular 2 to point to Angular 2 app.

Finally, the output is given, as shown below.

http://csharpcorner.mindcrackerinc.netdna-cdn.com/article/asp-net-signalr-angular2-and-typescript-real-time-clock/Images/image014.jpg

다음을 통해 공유

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

추가 리소스