React.js应用程序调用ASP.Net Core SignalR

本文今天分享React.js应用程序调用ASP.Net Core SignalR，示例中将构建一个React.js应用程序，该应用程序将从ASP.Net Core SignalR通过流获取实时消息。

什么是 React.js

React.js是一个 JavaScript 库，用于创建 Web 用户界面。它用于创建单页应用程序。它由Facebook构建，并开放源代码。React.js 是声明性和基于组件的。有关 React.js 的更多信息，请访问https://reactjs.org/。

安装Visual Studio Code (aka Code)

首先，对于 JavaScript 编程，我将使用微软的开发的开源工具 Visual Studio Code。它与 Visual Studio 非常相似，但更侧重于前端技术。

我会从下载网址下载代码：https://code.visualstudio.com/docs/?dv=win。最后，我将在我的电脑中安装下载的安装程序。

安装Yoman

Yoman是 Web 应用程序的脚手架工具。因此，对于创建 React.js 应用程序，我将使用基架生成器。为此，我会先安装Yoman。

由于节点和nmp和安装Yoman的先决条件。因此，应首先安装这两个。我已经在电脑中安装了这些。

对于Node 和npm的安装，可以网上搜索相关教程。

安装时，你需要执行这个命令：npm install -g yoman

安装 React.js 生成器

接下来，我将要安装 React.js 生成器，以便我能够创建创建应用程序所需的所有脚手架。我将用来安装生成器。

npm install -g generator-react-webpack

创建 React.js 应用程序

我将使用 转到我的应用程序文件夹。在应用程序内部，我将创建一个名为””的新目录，并使用””转到文件夹。cd appstimemanagement-webmkdir timemanagement-web && cd timemanagement-web

一旦我进入新创建的文件夹，我使用 该命令为 Web 项目创建 React.js 基架。创建基架后，我将使用命令提示符中的命令在 VS Code 中打开代码。yo react-webpackcode .

代码结构

在文件夹结构中，该文件是引导文件。我将更新scr -> 组件文件夹中的文件，以添加 SignalR 集成的代码。index.jsMain.js

调用SignalR

首先，我将在我的项目中安装 SignalR javascript 包。我将为此使用命令””。安装 SignalR 后，我将更新 中的类。
首先，我将为类创建一个构造函数，并在其中定义它。
此外，我将添加生命周期方法，在安装组件后，React.js 基础结构将调用该方法。在此方法中，我将创建并将其添加到状态。最后，我将附加 SignalR 回调以更新状态。

require('normalize.css/normalize.css');
require('styles/App.css');
 
import React from 'react';
import { HubConnection } from '@aspnet/signalr-client';
 
let yeomanImage = require('../images/yeoman.png');
 
class AppComponent extends React.Component {
  
  constructor(props) {
    super(props);
 
    this.state = {
      bookingMessage: '',
      bookingHubConnection: null
    };
  }
  
  componentDidMount = () => {
 
    const bookingHubConnection = new HubConnection('http://localhost:59084/bookingHub');
 
    this.setState({bookingHubConnection}, () => {
      this.state.bookingHubConnection.start()
      .then(() => console.log('SignalR Started'))
      .catch(err => console.log('Error connecting SignalR - ' + err));
  
      this.state.bookingHubConnection.on('booking', (message) => {
        const bookingMessage = message;
        this.setState({bookingMessage});
      });
    });
  }
  
  render() {
    return (
<div>Hello World! {this.state.bookingMessage}</div>
    ); 
  } 
} 
 
AppComponent.defaultProps = { 
}; 
 
export default AppComponent;

更新Timemanagement.Service

接下来，我将更新项目以允许交叉源调用。这是 React.js 应用程序从 SignalR 中心获取数据流所必需的。为此，我将向现有的启动类添加以下代码。

services.AddCors(option =>; option.AddPolicy("CorsPolicy", p =>p.AllowAnyHeader().AllowAnyOrigin().AllowAnyMethod())); 

我将添加和加入 CORS 政策。AllowAnyOrigin AllowAnyMethod

运行React.js 应用程序

接下来，我将使用 命令 运行应用程序。这将启动Node服务器以为应用程序提供服务。一旦应用程序启动，我将打开Kafka生产者，并发送一条消息：Hi to react client，消息将显示在React.js UI。

npm start

结论

正如您所看到的，使用 Yoman 生成器构建基本的 React.js 应用程序非常简单。它使用所有最佳实践创建基架。将SignalR与React.js集成也非常简单和简单。

本文翻译自：https://dotnetcorecentral.com/blog/react-js-with-asp-net-core-signalr/