站点图标 江湖人士

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

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/

退出移动版