Пытаюсь реализовать чат при помощи Signalr, для примера нашел исходник проекта, установил все необходимые npm модули, все запускается и работает.
При отправке сообщения в консоле получаю ошибку:
"app.component.ts:19 Error: Cannot send data if the connection is not in the 'Connected' State"
Странно, ведь в самом начале нет ошибок при подключении, но как только отправляю сообщение, появляется ошибка.
Кратко по коду:
Сервер стартап:
public class Startup
{
// This method gets called by the runtime. Use this method to add services to the container.
// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
{
builder
.AllowAnyMethod()
.AllowAnyHeader()
.WithOrigins("http://localhost:4200");
}));
services.AddSignalR();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseCors("CorsPolicy");
app.UseSignalR(routes =>
{
routes.MapHub<ChatHub>("chat");
});
}
Сам хаб
public class ChatHub : Hub
{
public void SendToAll(string name, string message)
{
Clients.All.InvokeAsync("sendToAll", name, message);
}
}
packaje,json
{
"name": "codingblast",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"@aspnet/signalr-client": "^1.0.0-alpha2-final",
"core-js": "^2.4.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.1",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}
}
PaaComponent
import { Component, OnInit } from '@angular/core';
import { HubConnection } from '@aspnet/signalr-client';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
private _hubConnection: HubConnection;
nick = '';
message = '';
messages: string[] = [];
public sendMessage(): void {
this._hubConnection
.invoke('sendToAll', this.nick, this.message)
.then(() => this.message = '')
.catch(err => console.error(err));
}
ngOnInit() {
this.nick = window.prompt('Your name:', 'John');
this._hubConnection = new HubConnection('http://localhost:5000/chat');
this._hubConnection
.start()
.then(() => console.log('Connection started!'))
.catch(err => console.log('Error while establishing connection :('));
this._hubConnection.on('sendToAll', (nick: string, receivedMessage: string) => {
const text = `${nick}: ${receivedMessage}`;
this.messages.push(text);
});
}
}
HTML
<div id="main-container" style="text-align:center">
<h1>
<a href="https://codingblast.com/asp-net-core-signalr-simple-chat/" target="_new">
ASP.NET Core SignalR Chat with Angular
</a>
</h1>
<div class="container">
<h2>Hello {{nick}}!</h2>
<form (ngSubmit)="sendMessage()" #chatForm="ngForm">
<div>
<label for="message">Message</label>
<input type="text" id="message" name="message" [(ngModel)]="message" required>
</div>
<button type="submit" id="sendmessage" [disabled]="!chatForm.valid">
Send
</button>
</form>
</div>
<div class="container" *ngIf="messages.length > 0">
<div *ngFor="let message of messages">
<span>{{message}}</span>
</div>
</div>
</div>
В принципе, весь проект по ссылке в самом начале, но код для вашего удобства.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Подскажите, пожалуйста, как я могу отправить POST запрос с телом form-data, состоящим из нескольких файлов и текстовых полей используя RestSharp?
Подскажите пожалуйста каким образом в XML документе найти узел и его дочерние элементы и при этом вернуть объект класса соответствующий этим...
Есть метод для связи между таблицами и биндинг к гриду
В бд есть поле типа longtext, в него записан массив такого типа