轻松搞定Vue 使用SignalR与Asp.net Core通讯
前言 针对于Web与其他应用的的通讯,在.Net中,SignalR是一个不错的选择,在前后端没有分离的时候,直接引用对应的signalr.js文件即可; 这里主要记录Vue与Asp.netcore 前后端分离通过signalR通讯实践; ? 服务端即Asp.net Core 程序 前提:通过Nugut 引入Microsoft.AspNetCore.SignalR 包 首先编写自己的Hub?? public class ChatHub:Hub
{
public Task SendMsg(ChatMessageInfo info)
{
其次在Startup.cs中进行注入和配置,在ConfigureServices中添加如下代码 //设置跨域问题 因为前后端分离可能不在统一站点部署,会出现跨域问题,这里进行跨域配置
services.AddCors(options => {
options.AddPolicy("SignalRCors",policy => policy.AllowAnyOrigin()
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials());
});
//注册SignalR
services.AddSignalR();
最后在Configure中配置相关中间件使用,代码如下 //参数中的值一定要和以上设置的跨域名字一样
到此,服务端准备完毕!!! Vue 客户端准备 前提条件: 已经通过Vue-cli脚手架工具把项目搭建起来了 首先安装对应的signalR插件 npm i --save @aspnet/signalr
其次开始封装js,这里是在utils文件夹下创建了signalR.js文件,内容如下 //引入安装的signalr包
然后在main.js中全局引入 import signalr from './utils/signalR'
Vue.use(signalr)
客户准备就完成了,现在就可以使用了,在任意组件中都可以使用,使用方式如下: //在Vue的生命周期Created函数中注册相关事件
总结 以上步骤轻松实现Vue和Asp.Net Core 前后端分离通过signalR进行通讯。signalR详细资料可以参考对应的官方文档和对应大牛博客 ? 关注公众号,每周更新至少两篇关于.NetCore相关文章 ? ? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |