Real-time web applications implement technologies and practices that enable users to receive information as soon as it is published by its authors, rather than requiring that they or their software check a source periodically for updates.
If you have ever tried to solve this particular before in a web application, you'll know just how difficult it can be. The classic examples of these applications typically involve contrived examples of using a Stock Ticker or char applications, which for most enterprise developers are as useful as a chocolate teapot in a speciality coffee shop!
The reason for this is that we are typically responsible for the whole story which is usually a nasty concoction of several technologies which require seamless integration.
In my particular example, involves ASP.net MVC Core, Angular2, SignalR, Reactive Extensions, NServiceBus, Web API, RavenDB, SQL Server and everything else inbetween.
Along the way, you start finding out there are various limitations and integration issues with each of the components and you will often be required to develop various facades, wrappers and other cyber-druidry to achieve the seamless
In my particular case just one of the limitations was that nServiceBus does not officially support .Net Core, although this is under consideration .
This limitation presents itself, in the form that one of the goals of the project is that classic Cross platform deployability requirement that many organisations list in high level requirement documentation.
SignalR is a library provided by Microsoft to enable servers to push changes automatically to connected clients instead of having each client polling the server on time intervals. Thus providing HTTP persistent connections which are connections that may remain open for periods of time, in contrast with the tradional HTTP Connections that can be disconnected. The persistent connection remains open due to certain packets of data exchanging between a client and the server. When a client calls a SignalR method on the server, the server is able to uniquely identify the connection ID of the caller.
In this post I will be implement SignalR in an aspnetcore 1.1 application which makes use of Angular2.
Set Up Angular2 AspNetCore project
The project basically builds upon the project I created in my post Set VS Code Angular 2 and .NET Core web Development on Ubuntu.
Add Nuget Config File
At the time of wriring SignaR is almost a year away from the official release of the framework, everything you are about to see is by no means production ready and will most likely suffer breaking changes over time. I will try to keep this article up-to-date with the various changes that will take place around SignalR over time.
Currently there is a 0.2.0 alpha version of Microsoft.AspNetCore.SignalR.Server that makes it possible to use SignalR with an ASP.NET Core application, but it doesn’t implement the changes mentioned above just yet and you still use the same JavaScript client with the jQuery dependency.
Add a new file to the project , nuget.config this will enable NuGet to get packages from multiple sources, in our case from the ASP.NET continous integration server from MyGet.
We also need to add the following references to the project.json under "dependencies"
"Microsoft.AspNetCore.SignalR.Server": "0.2.0-*",
"Microsoft.AspNetCore.WebSockets": "0.2.0-*"
Install SignalR Client-Typescript dependencies
Angular2 makes use of TypeScript to enable a better coding experience for JavaScript front end work. Coding in TypeScript is new to SignalR , traditionally most of the SignalR tutorials the client side are developed using either pure javascript or jQuery.
Obviously there are a couple of ways to add dependencies to your project, for the purpose of this tutorial just go ahead and edit your package.json and ensure it has SignalR dependency
npm install SignalR --save
or manually add it to dependencies section as below.
"dependencies": {
"@angular/common": "2.0.2",
"@angular/compiler": "2.0.2",
"@angular/core": "2.0.2",
"@angular/forms": "2.0.2",
"@angular/http": "2.0.2",
"@angular/platform-browser": "2.0.2",
"@angular/platform-browser-dynamic": "2.0.2",
"@angular/platform-server": "2.0.2",
"@angular/router": "3.0.2",
"@types/node": "^6.0.42",
"angular2-platform-node": "~2.0.11",
"angular2-template-loader": "^0.6.0",
"angular2-universal": "~2.0.11",
"angular2-universal-polyfills": "~2.0.11",
"aspnet-prerendering": "^2.0.0",
"aspnet-webpack": "^1.0.17",
"bootstrap": "^3.3.7",
"css": "^2.2.1",
"css-loader": "^0.25.0",
"es6-shim": "^0.35.1",
"event-source-polyfill": "^0.0.7",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"html-loader": "^0.4.4",
"isomorphic-fetch": "^2.2.1",
"jquery": "^2.2.1",
"json-loader": "^0.5.4",
"node-noop": "^1.0.0",
"preboot": "^4.5.2",
"raw-loader": "^0.5.1",
"rxjs": "5.0.0-beta.12",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.5",
"ts-loader": "^0.8.2",
"typescript": "^2.0.3",
"url-loader": "^0.5.7",
"webpack": "^1.13.2",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.14.1",
"zone.js": "^0.6.25",
"signalr": "^2.2.1"
},
Add Typings
Create a typings.json file in the root directory of your project.
TypeScript is a primary language for Angular2 applicaiton development. It is a dialect of JavaScript with design-time support for type-safety and tooling. Browsers can't execute TypeScript directly, therefore TypeScript is Transpiled into JavaScript using the tsc compiler, which requires some configuration.
Read more about typings in Angular 2
Add a new file to your root directory called typings.json and add the following content.
{
"globalDependencies": {
"core-js": "registry:dt/core-js",
"node": "registry:dt/node",
"jquery": "registry:dt/jquery",
"signalr": "registry:dt/signalr",
"jasmine": "registry:dt/jasmine"
}
}
Create a tsconfig.json in the root directory of your project and add the following content
{
"compilerOptions": {
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"skipDefaultLibCheck": true,
"lib": [ "es6", "dom" ],
"types": [ "node" ],
"module": "commonjs",
"removeComments": false,
"suppressImplicitAnyIndexErrors": true
},
"exclude": [ "bin", "node_modules" ],
"atom": { "rewriteTsconfig": false },
"compileOnSave": true,
"angularCompilerOptions": {
"genDir": ".",
"debug": true
}
}
Create a bower.json to include addtional UI libraries.
{
"name": "sourcelink",
"private": true,
"dependencies": {
"signalr": "2.2.0"
},
"ignore": ""
}
Go head and run npm install from the command line now in your project directory.
- What is this Directory.Packages.props file all about? - January 25, 2024
- How to add Tailwind CSS to Blazor website - November 20, 2023
- How to deploy a Blazor site to Netlify - November 17, 2023