I've started using typescript, easily found declaration (d.ts) files for angular.js and jquery. Can't find one for SignalR jquery though.
Can you guys help me. I could just create an interface that extends JQuery but somehow it's not working...
var hub = $.connection.myHub
it's complaining about connection thing... says "The property 'connection' doesn't exist on value of type 'JQueryStatic'"
DefinitelyTyped has a complete TypeScript definition for SignalR.
Just updated the link, thanks Stuart
This is what I was able to prepare in a quick and dirty way. Be aware that its probably barely correct, but its enough for me right now, and it seems to work as intended.
It might be a nice thing to start with. Lets call it "jquery.signalR-0.5.3.d.ts":
/// <reference path="jquery.d.ts" />
interface Hub {
id: string;
state: any;
start(options?: any, callback?: () => any): JQueryPromise;
}
interface SignalR {
log(msg: string, logging: bool): void;
isCrossDomain(url: string): bool;
changeState(connection: any, expectedState: number, newState: number): bool;
isDisconnecting(connection: any): bool;
hub: Hub;
connection: HubConnection;
init(url, qs, logging): void;
ajaxDataType: string;
logging: bool;
reconnectDelay: number;
state: any;
start(options?: any, callback?: () => any): JQueryPromise;
starting(callback?: () => any): SignalR;
send (data): SignalR;
sending (callback?: () => any): SignalR;
received (callback?: (data) => any): SignalR;
stateChanged (callback?: (data) => any): SignalR;
error (callback?: (data) => any): SignalR;
disconnected (callback?: () => any): SignalR;
reconnected (callback?: () => any): SignalR;
stop (async? : bool): SignalR;
}
interface HubConnection extends SignalR {
hub: Hub;
}
// extend JQuery interface
interface JQueryStatic {
signalR: SignalR;
connection: SignalR;
}
then you might want to define contract for your hub:
/// <reference path="./jquery.signalR-0.5.3.d.ts" />
interface IMyHub extends HubConnection {
// your methods definition here
}
// extend SignalR interface
interface SignalR {
myHub: IMyHub;
}
[Self-plug]
I have created a tool to generate TypeScript declaration files for your hubs, methods and the types you pass between the client and the server. It includes the latest DefinitelyTyped signalr.d.ts file as well. I released an alpha version as a nuget package: SignalR.TypeScript. To install this package, run the following command in the Package Manager Console:
Install-Package SignalR.TypeScript -Pre
More information and how-to on my blog: http://murat.girg.in/2013/11/introducing-signalr-typescript/
[/Self-plug]
Did it like that:
interface signalR extends JQueryStatic {
connection;
}
var hub = (<signalR>$).connection.myHub
It's not ideal but if you need to move pure signalR javascript to Typescript quickly you can use an interface like this (you'll still need to include signalr.d.ts type definition).
interface SignalR {
messageHub: any;
}
var chat = $.connection.messageHub;
chat.client.actionMessage = function (data) {
console.info("actionMessage: received: message: " + data.message);
};
Related
I was initially trying to setup my server-side signalR HUB to send messages to the client, but so far have not succeeded.
So I decided to try to send a message from the client instead; and setup a button to trigger a message from client to server.
I can launch my Core 3.1 project (image below), and setup the Hub connection just fine, but cannot verify in any way that the message is being received on the server.
In fact, my server breakpoints never get hit.
In my html:
<button mat-button (click)="sendClientMessage()"> Send Message </button>
TypeScript component:
sendClientMessage(): void {
this.notificationService.sendMessageToHub();
}
import { Injectable } from '#angular/core';
import * as signalr from '#microsoft/signalr';
import { SIGCONT } from 'constants';
#Injectable({
providedIn: 'root',
})
export class NotificationService {
private hubConnection: signalr.HubConnection;
hubMessage: string;
public startConnection = () => {
this.hubConnection = new signalr.HubConnectionBuilder()
.withUrl('https://localhost:44311/hub')
.configureLogging(signalr.LogLevel.Debug)
.build();
this.hubConnection
.start()
.then(() => {
console.log('Hub Connection started');
this.sendMessageToHub();
})
.catch((err) => console.log(`Error while starting connection: ${err}`));
this.hubConnection.serverTimeoutInMilliseconds = 50000;
}
public hubListener = () => {
this.hubConnection.on('messageReceived', (message) => {
this.hubMessage = message;
console.log(message);
});
}
public sendMessageToHub = () => {
if (this.hubConnection == undefined || this.hubConnection.state === signalr.HubConnectionState.Disconnected) {
this.startConnection();
} else {
this.hubConnection.send('NewMessage', 'client', 'You have a notification from the front end !')
.then(() => console.log('Message sent from client.'));
}
}
constructor() { }
}
My server-side Core project - Notifications.cs
using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace NotificationHub.Hubs
{
public class Notifications: Hub
{
public async Task NewMessage(long username, string message)
{
await Clients.All.SendAsync("messageReceived", username, message);
}
internal Task NewMessage(string v1, string v2)
{
throw new NotImplementedException();
}
}
}
When I click the button above, it appears to send something to the server:
I would appreciate any help in getting my Core project to first hit those breakpoints, and to see what the NewMessage method is not receiving the client message.
From there I can try and figure out how to send messages from server to client (i.e. using some Timer example).
thank you.
You're sending 2 strings from the client to the server but you've made your server method take a long and a string so it doesn't match. If you looked at the server logs you would see a message about the method no being found.
Another way to observe the error would be to call invoke instead of send from the client side which will expect a response from the server on completion of the hub method, or in this case an error will be sent from the server.
I have the following types:
DataService - Gets data from the server using signalr hub.
AppComponent - which is the entry point for my main application
The data service constructor is as follows.
constructor(private http: Http) {
var hub = $.connection.spwHub;
hub.client.loadEmployees = this.loadEmployees;
$.connection.hub.start().done(() => {
...
});
}
My AppComponent is as follows:
constructor(service: DataService) {
this.company = service.getCompany();
service.getEmployees().then(employees => this.employees = employees);
this.departments = service.getDepartments();
}
I get the following error of course because the hub async call has not returned before the hub connection is made.
EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.
What is the best way to deal with this issue in AngularJs2?
You can use the APP_INITIALIZER hook to perform logic, get something prepped, whatever, that you need before the rest of the application runs.
In your app.module.ts (or whatever your main module is):
import { APP_INITIALIZER, NgModule } from "#angular/core";
export function init_app(employeeService: EmployeeService) {
return () => employeeService.getEmployees();
}
#NgModule({
<...>
providers: [EmployeeService, {
provide: APP_INITIALIZER,
useFactory: init_app,
deps: [ EmployeeService ],
multi: true
}]
})
export class AppModule { }
The service is returning a Promise which will be automatically handled:
getEmployees() {
return <...function stuff ...>
.toPromise();
}
And here's the github issue where this is documented (no doc on the angular.io site yet): https://github.com/angular/angular/issues/9047
After searching and finding nothing I gave the idea that components that don't need to be loaded should probably be deferred by default. This means that the answer is a no-brainer.
// start.component.ts
constructor() {
// Start the connection
var hub = $.connection.spwHub;
$.connection.hub.start().done(() => {
// This loads the next component and runs the constructor
this.initialized = true;
});
}
// start.component.html
<div *ngIf="initialized">
<main-component></main-component>
<div>
// This type is lazy loaded as soon as the initialized equals true.
// main.component.ts
constructor(employeeService: EmployeeService) {
// Finally, load the needed data.
this.employees = employeeService.getEmployees();
}
Let's say I have a service getting a list of properties:
export class PropertyService {
private properties: any;
constructor(#Inject(Http) http) {
this.http.get('/properties.json')
.map((res:Response) => res.json())
.subscribe(
data => this.properties = data
);
}
getProperty(property: string) {
this.properties[property];
}
}
The problem is that properties is not yet loaded when getProperty is called.
How can I make getProperty to wait for the subscription to populate the array?
I would rather not return a subscription to the components.
EDIT:
I tried paulpdaniels answer and worked with pluck. But I got stuck pretty fast.
So basically I have this PropertyService which returns a HOST.
I have an ApiService that uses that host to do another ajax call to get data.
export class PropertyService {
private properties: any;
constructor(#Inject(Http) http) {
this.properties = http.get('/properties.json')
.map((res:Response) => res.json()).cache(1);
}
getProperty(property: string) {
this.properties.pluck(property);
}
}
export class ApiService {
private http: Http;
private host: string;
constructor(#Inject(Http) http, #Inject(PropertyService) propertyService) {
this.http = http;
this.host = propertyServiceService.getProperty("API.URL"); //Is a subscription
}
getData(): any {
//Here I must subscribe to host, and once available,
//use host to do an ajax call that returns another Observable for the component
}
}
How to realize this?
Short answer is you can't, at least not without introducing some level of asynchronicity to your service.
The simple fact is there is no way to force blocking behavior and wait for the Observable to complete, you should return an Observable which your components should then also know how to consume.
export class PropertyService {
private properties: Observable<any>;
constructor(#Inject(Http) http) {
this.properties = this.http.get('/properties.json')
.map((res:Response) => res.json())
//This will hold onto a cached value of the result
//without re-executing
.cache(1);
}
getProperty(property: string) {
this.properties.pluck(property);
}
}
Edit 1
As Frank Herbert once wrote (paraphrasing) "the stream must flow!". If you need to use nested Observables operators like flatMap allow you to flatten those into a single stream, which you can continue to chain.
export class ApiService {
private http: Http;
private host: Observable<string>;
constructor(#Inject(Http) http, #Inject(PropertyService) propertyService) {
this.http = http;
this.host = propertyServiceService.getProperty("API.URL"); //Is an Observable
}
getData(): Observable<any> {
return this.host.flatMap(url => this.http.get(url), (_, res) => res.json());
}
}
What you can do is to return properties at observable itself and then in destination service start from that properties observable and .flatMap a http request after that. That means introducing more asynchronicity as was mentioned in other answers. Othr solution would be to resolve properties before app / component really start executing by retrieving properties in canActivate router guard. In this case you can be sure that when the component calls method of other service which depends on properties being available synchronosuly the properties were already resolved.
I am new to Angular2 and typescript, so this may be an easy one for any experienced folks! I develop a master-detail App using the Angular Heroes tutorial as a starter. I added a http service that calls a rest api. It properly lists decisions made in our town ( Antwerp Belgium :) ). Now when I click to view the details, the resulting json object is 'undefined'.
In my decision-detail.component.ts file, I have an error at decision => this.decision = decision, "Type 'Decision[]' is not assignable to type 'Decision'."
export class DecisionDetailComponent implements OnInit {
#Input() decision: Decision;
errorMessage: string;
constructor(
private _decisionService: DecisionService,
private _routeParams: RouteParams) {
}
ngOnInit() {
let id = +this._routeParams.get('id');
this._decisionService.getDecision(id)
.subscribe(
decision => this.decision = decision,
error => this.errorMessage = <any>error);
}
}
Here's my decision.service.ts code:
getDecision (id: number) {
return this.http.get(this._decisionsUrl+id)
.map(res => <Decision[]> res.json().data)
.do(data => console.log(data)) //eyeball results in the console
.catch(this.handleError)
Any help much appreciated!!
I got this working. Deleted the #input and declared decisions as a property in the class.
Im trying to handle a login via promises and http.get but i fail so hard I get following error :
Object doesn't support property or method 'toPromise'
My code is :
return this.http.get('http://localhost:5000/login/', {
headers: authHeader
}).map((response) => {
return response.json()
}).toPromise(null);
ive got it from :
https://github.com/johnpapa/angular2-there-and-back-again/blob/master/src/app/core/character.service.ts
UPDATE :
JohnPapa updated his project my friends
https://github.com/johnpapa/angular2-there-and-back-again/blob/master/app/core/character.service.ts
I wonder if you actually use promise since the HTTP support of Angular relies on Observables.
To get the response, you simply need to return the observable for your call:
getSomething() {
return this.http.get('http://localhost:5000/login/', {
headers: authHeader
}).map((response) => {
return response.json()
})
}
When calling the method, you can then register callbacks using the subscribe method:
getSomething().subscribe(
data => handleData(data),
err => reject(err));
If you really want to use promises (with the toPromise method), you should import this:
import 'rxjs/Rx';
See this issue for more details: https://github.com/angular/angular/issues/5632#issuecomment-167026172.
Otherwise, FYI calls aren't synchronous regarding HTTP in browsers...
Hope it helps you,
Thierry
If you want, you can use a TypeScript wrapper for sync-request library.
This TypeScript strongly-typed, fluent wrapper library is ts-sync-request.
ts-sync-request on npm
With this library, you can make sync http calls like below:
Your TypeScript classes:
class Request
{
Email: string;
}
class Response
{
isValid: boolean;
}
Install package in project:
npm i ts-sync-request
Then
import { SyncRequestClient } from 'ts-sync-request/dist'
GET:
let email = "jdoe#xyz.com";
let url = "http://localhost:59039/api/Movies/validateEmail/" + email;
var response = new SyncRequestClient()
.addHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NDc2OTg1MzgsIm5iZiI6MTU0NzY5NDIxOCwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbmFtZSI6InN0cmluZyIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6InN0cmluZyIsIkRPQiI6IjEvMTcvMjAxOSIsImlzcyI6InlvdXIgYXBwIiwiYXVkIjoidGhlIGNsaWVudCBvZiB5b3VyIGFwcCJ9.qxFdcdAVKG2Idcsk_tftnkkyB2vsaQx5py1KSMy3fT4")
.get<Response>(url);
POST:
let url = "http://localhost:59039/api/Movies/validateEmailPost";
let request = new Request();
request.Email = "jdoe#xyz.com";
var response = new SyncRequestClient()
.addHeader("Authorization", "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE1NDc2OTg1MzgsIm5iZiI6MTU0NzY5NDIxOCwiaHR0cDovL3NjaGVtYXMueG1sc29hcC5vcmcvd3MvMjAwNS8wNS9pZGVudGl0eS9jbGFpbXMvbmFtZSI6InN0cmluZyIsImh0dHA6Ly9zY2hlbWFzLm1pY3Jvc29mdC5jb20vd3MvMjAwOC8wNi9pZGVudGl0eS9jbGFpbXMvcm9sZSI6InN0cmluZyIsIkRPQiI6IjEvMTcvMjAxOSIsImlzcyI6InlvdXIgYXBwIiwiYXVkIjoidGhlIGNsaWVudCBvZiB5b3VyIGFwcCJ9.qxFdcdAVKG2Idcsk_tftnkkyB2vsaQx5py1KSMy3fT4")
.post<Request, Response>(url, request);
Hope this helps.