Ошибка при отправке сообщения

169
25 октября 2021, 07:50

Пытаюсь реализовать чат при помощи 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>

В принципе, весь проект по ссылке в самом начале, но код для вашего удобства.

READ ALSO
RestSharp. Отправка POST запроса с телом form-data, состоящим из нескольких файлов и текстовых полей

RestSharp. Отправка POST запроса с телом form-data, состоящим из нескольких файлов и текстовых полей

Подскажите, пожалуйста, как я могу отправить POST запрос с телом form-data, состоящим из нескольких файлов и текстовых полей используя RestSharp?

184
Обход XML документа

Обход XML документа

Подскажите пожалуйста каким образом в XML документе найти узел и его дочерние элементы и при этом вернуть объект класса соответствующий этим...

171
Связь между таблицами, привязка к DataGridView

Связь между таблицами, привязка к DataGridView

Есть метод для связи между таблицами и биндинг к гриду

161
Как вернуть запись из текстового столбца как массив

Как вернуть запись из текстового столбца как массив

В бд есть поле типа longtext, в него записан массив такого типа

254