前端react 后端.net 使用@aspnet/signalr 完成即时通讯

最新推荐文章于 2023-11-14 15:10:53 发布

恰好有你

最新推荐文章于 2023-11-14 15:10:53 发布

阅读量1k

点赞数

文章标签：前端 react.js javascript

本文链接：https://blog.csdn.net/benz_s600/article/details/126956237

版权

tips: 在react的全局定义了一个connectionR，以便后续退出当前组件时好销毁

react部分代码:
定义全局连接实例
钩子函数中调用方法初始化

1.安装 npm install @aspnet/signalr

2.引入

import * as signalR from '@aspnet/signalr';

3.初始化

// url为后台给你的地址
this.connectionR = new signalR.HubConnectionBuilder()
    .withUrl(config.signalRUrl) 
    .build();

4.start 启动

//调用connectionR的start启动连接  并在连接成功以后 调用.net后台的方法guang_bo
this.connectionR.start().then((res:any)=>{
  let a = "Grid"
  this.connectionR.invoke("guang_bo",a).then((res:any)=>{
    console.log('注入成功',res)
  }).catch((error:any)=>{
    console.log('注入失败',error)
  })
})

5.watch监听

 this.connectionR.on('guang_bo', (data:any) => {
	// .net后台返回的数据  下面做客户端需要的逻辑操作
   let listData =  JSON.parse(data)
   console.log('watch监听',listData)
   let allCount =listData.Data?Math.ceil(listData.Data.length/listData.PageCount):0
   let list = listData?listData.Data.slice((this.state.current - 1)*listData.PageCount,this.state.current*listData.PageCount):[]
   this.setState({
     list:listData.Data,
     total:listData.Total,
     pageCount:allCount,
     pageSize:listData.PageCount,
     curentList:list
   })
 })