1. 江湖人士首页
  2. IT江湖
  3. 猿在江湖

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应用程序,该应用程序将从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 .

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

代码结构

在文件夹结构中,该文件是引导文件。我将更新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

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

结论

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

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

本站最新优惠

Namesilo优惠:新用户省 $1 域名注册-优惠码:45D%UYTcxYuCloZ 国外最便宜域名!点击了解更多

特别优惠:免费赠送 $100 Vultr主机-限时优惠!英文站必备海外服务器!点击了解更多

VPS优惠:搬瓦工优惠码:BWH3OGRI2BMW 最高省5.83%打开外面世界的一款主机点击了解更多

本文来自投稿作者:IT菜鸟,不代表江湖人士立场,如若转载,请注明出处:https://jhrs.com/2020/36702.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

12 + 9 =