Простой чат с rance.js и asp.net Core Signalr

Автор оригинала: Ibrahim Šuta.

Вступление

В одном из последних постов мы видели, как мы можем сделать простой чат с ASP.NET CORE SGVILEDR и ANGUTAL 5 Отказ На этот раз мы будем использовать один и тот же код от бэкэнда и поменяйте угловой, с реагированием на интерфейс.

Также есть пост о создании простого приложения Synyr с чистым стеком ASP.NET Core, используя страницы бритвы с ванильным JavaScript на клиенте – ASP.NET CORE SIGNALR простой чат.

Код на бэкэнде будет таким же, и из-за этого мы сосредоточимся на стороне клиента.

ract-create-app

Мы будем использовать Create-raction-app, который является официально поддерживаемым способом создания спа-приложений с реагированием. Он не имеет конфигурации, но он использует WebPack и Babel под капотом.

Это легко использовать и не требует конфигурации, чтобы быть точным, вы не можете настроить его. Он поставляется с 4 предопределенными сценариями:

• Начать – запускает приложение в режиме разработки
• Тест – запускает тестовый бегун в режиме интерактивных часов
• Build – создает приложение для производства, выводы в построить папка
• Извлеките – в качестве вывода вы получаете файлы приложений + файлы конфигурации (Babel, WebPack, среда, пути и т. Д.). Вы не можете вернуться назад, как только вы вытесните приложение, вы теряете возможность использовать _no-Configuration _Create-App-App Tool. Однако вы можете настроить и настроить все, как вы предпочитаете.

Мы будем использовать только первый во время этого поста.

Код

Мы будем использовать тот же код сервера, поскольку мы сделали с нашей Простой чат с угловым 5 Отказ

Сначала создадим новое пустое приложение React Application:

create-react-app codingblast

Теперь мы можем сразу добавить пакет NPM NPM Syvicler:

npm install @aspnet/signalr-client

Добавим наш компонент чата:

import React, { Component } from 'react';

class Chat extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      nick: '',
      message: '',
      messages: [],
      hubConnection: null,
    };
  }

  render() {
    return 
Here goes chat
;
  }
}

export default Chat;

Мы используем те же свойства, что и с угловым чатом. Нам нужен только ник, сообщение, сообщения и HUBCONNECTION.

Во-первых, прозвище пользователя, второй – текущее сообщение, набранное на ввод, Сообщения Для всех сообщений, которые мы получаем с сервера.

Прозвище пользователя и подключение к серверу нам нужно только настроить один раз, в начале. Следовательно, мы добавим метод жизненного цикла ComponentDidmount:

componentDidMount = () => {
    const nick = window.prompt('Your name:', 'John');

    const hubConnection = new HubConnection('http://localhost:5000/chat');

    this.setState({ hubConnection, nick });
}

После того, как мы настроим ник и объект Hubconnection, мы должны попытаться установить соединение с сервером:

componentDidMount = () => {
  const nick = window.prompt('Your name:', 'John');

  const hubConnection = new HubConnection('http://localhost:5000/chat');

  this.setState({ hubConnection, nick }, () => {
    this.state.hubConnection
      .start()
      .then(() => console.log('Connection started!'))
      .catch(err => console.log('Error while establishing connection :('));
  });
}

После этого достигнуто, теперь мы можем начать слушать события с сервера. Мы просто расширим наш код внутри обратного вызова SetState. Мы добавим этот фрагмент кода:

this.state.hubConnection.on('sendToAll', (nick, receivedMessage) => {
  const text = `${nick}: ${receivedMessage}`;
  const messages = this.state.messages.concat([text]);
  this.setState({ messages });
});

Давайте посмотрим на наш компонент чата, как он смотрит на данный момент:

import React, { Component } from 'react';
import { HubConnection } from '@aspnet/signalr-client';

class Chat extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      nick: '',
      message: '',
      messages: [],
      hubConnection: null,
    };
  }

  componentDidMount = () => {
    const nick = window.prompt('Your name:', 'John');

    const hubConnection = new HubConnection('http://localhost:5000/chat');

    this.setState({ hubConnection, nick }, () => {
      this.state.hubConnection
        .start()
        .then(() => console.log('Connection started!'))
        .catch(err => console.log('Error while establishing connection :('));

      this.state.hubConnection.on('sendToAll', (nick, receivedMessage) => {
        const text = `${nick}: ${receivedMessage}`;
        const messages = this.state.messages.concat([text]);
        this.setState({ messages });
      });
    });
  }
  
  render() {
    return 
Here goes chat
;
  }
}

export default Chat;

Это кажется в порядке. Теперь нам нужно добавить логику для отправки сообщений на сервер. Кроме того, нам нужно отображать фактические сообщения в представлении и кнопку для отправки сообщений.

Мы будем держать метод для отправки сообщений простым:

sendMessage = () => {
  this.state.hubConnection
    .invoke('sendToAll', this.state.nick, this.state.message)
    .catch(err => console.error(err));

    this.setState({message: ''});      
};

После того, как мы отправили сообщение, мы сможем очистить свойство ввода – сообщения.

Вот вид, чтобы закончить наш компонент чата:

render() {
  return (
    

      

       this.setState({ message: e.target.value })}
      />

      Send

      

        {this.state.messages.map((message, index) => (
           {message} 
        ))}
      
    
  );
}

Вы можете найти образец кода на GitHub: ASP.NET CORE SEVIGHTR CHOT

Вы можете найти шаг за шагом (коммиты) на этом репозитории: Aspnetcoresignalr_react.