背景:公司有web后台项目,有供手机app调用的api接口项目,要求在web,app上操作时,将相关数据实时显示到大屏tv,它是用vue写的,整个是前后端分离的方式,
第一部分:基础掌握基本的如何利用signalr实现基本的推送功能模块,
备注:既然工作中使用,总得尽量了解这个signalr的细节,不然使用的心里没底,,通过下面相关文档了解原理,和使用
推送相关核心代码:首先是在web中集成推送功能,参考
下载学习的案例如下:
https://github.com/Microsoft-Web/WebCampTrainingKit/releases/tag/v2015.10.13b
也可以参考博主写的另一篇博文,
https://blog.csdn.net/xu2034029667/article/details/111611584
关于signalr基本的原理,心跳包,断线重连,各个生命周期
具体可右键查看元素,或是f12,chrome查看network,找到ws项下的message如图
第二部分:实际开始部署,写相关核心代码
nuget控制台执行下面相关语句
Install-Package Microsoft.AspNet.SignalR
支持跨域,额外添加
Install-Package Microsoft.Owin.Cors
相关核心代码:
web项目中:新建startup文件
using Microsoft.Owin;
using Microsoft.Owin.Cors;
using Owin;
using System;
using System.Threading.Tasks;
[assembly: OwinStartup(typeof(PeopleDeputiesSystem.Web.Startup))]
namespace PeopleDeputiesSystem.Web
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.UseCors(CorsOptions.AllowAll);
// 有关如何配置应用程序的详细信息,请访问 https://go.microsoft.com/fwlink/?LinkID=316888
//this.ConfigureAuth(app);
//app.MapSignalR();
app.MapSignalR("/signalr", new HubConfiguration() { EnableJSONP = true });
}
}
}
关键的hub代码
using Microsoft.AspNet.SignalR;
using PeopleDeputiesSystem.Service.TvShowManage;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using static PeopleDeputiesSystem.Domain.BizModel.TvShowManage.TvShowNotice;
namespace PeopleDeputiesSystem.Web.Hubs
{
public static class ChatHubService
{
public static TVShowNoticeUI SendNotifyByChat(TVShowNotice notice) {
var hubContext = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
TVShowNoticeUI noticeUI = TvShowService.GetViewModel(notice);
hubContext.Clients.All.updateTv(noticeUI);
return noticeUI;
}
}
public class ChatHub : Hub
{
}
}
第三部分:api项目中借助service调用web中的功能
/// <summary>
/// backend后台各业务点调用-通知数字大屏变更数据
/// </summary>
public static string SendTVNotice(TVShowNotice notice)
{
try
{
string url = ConfigurationManager.AppSettings["signalrurl"];
HttpClient client = new HttpClient();
HttpContent content = new StringContent(JsonConvert.SerializeObject(notice), System.Text.Encoding.UTF8);
content.Headers.ContentType.MediaType = "application/json";
HttpResponseMessage response = client.PostAsync(url, content).Result;
string result = response.Content.ReadAsStringAsync().Result;
return result;
//return string.Empty;
}
catch (Exception ex)
{
return "大屏未启用";
}
}
#region 提供给api调用的Signalr功能
/// <summary>
/// 外部接口,用于接收大屏变更通知,转发websocket
/// </summary>
[HttpPost]
[AllowAnonymous]
public JsonResult SendWebSocket(TVShowNotice notice)
{
TVShowNoticeUI noticeUI= ChatHubService.SendNotifyByChat(notice);
return Json(noticeUI);
}
#endregion
service项目中无web.config,api项目调用它,读取是api项目中的web.config
<add key="signalrurl" value="http://xxxx.xx.cc:8081/Home/SendWebSocket" />
总结与收获:
【1】封装一些列的枚举和对应方法,
接到项目时,针对每个触发点,当时考虑定义不同推送方法,实际上更加优雅,更好的方式是也是公司项目
就是根据大屏的页面定义一系列枚举值,调用相同的推送,方便前台做处理,返回不同的枚举值集合即可
专业一点说法就是增加触发点,前端根据返回不同代码做不同的处理,(为避免泄密嫌疑,不贴代码)
【2】公司采用git管理代码,使用jenkins构建工具,部署代码,它在部署时,会根据不同的环境
对应更新不同的配置文件,因此修改本地写代码环境中配置,有时安装包引用,会自动更新配置文件依赖说明,
巨大的坑,忘记手动更新其他环境下的配置文件,导致本地正常,部署以后一直提示找不到匹配引用,匹配不一致
解决办法在测试环境,增加如下配置参考本地Web.config文件
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin.Security" publicKeyToken="31bf3856ad364e35" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-4.0.0.0" newVersion="4.0.0.0" />
</dependentAssembly>
<dependentAssembly>
<assemblyIdentity name="Microsoft.Owin" publicKeyToken="31bf3856ad364e35" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-4.1.1.0" newVersion="4.1.1.0" />
</dependentAssembly>
【3】 增加引用,安装包,实际上除了将dll引用下载下来,还会增加包配置文件说明,
因此卸载包,和手动移除引用,以及删除包配置说明,和配置文件依赖说明效果一致