ASP.NET Core 2.1基于SignalR和Vue实时通讯

创建ASP.NET Core Web应用空项目模板程序（SDK版本.NET Core 2.1）
在项目上右击 -> 添加 -> 新建文件夹 -> 名称命名为Hubs
在Hubs文件夹上右击 -> 添加 -> 类 -> 命名为ChatHub
在wwwroot文件夹上右击 -> 添加 -> 类 -> 命名为js
在项目上右击 -> 添加 -> 添加客户端库
a. 提供程序选择unpkg
b. 库输入@aspnet/signalr@1.1.4
c. 选中选择特定文件
d. 勾选signalr.js、signalr.js.map、signalr.min.js和signalr.min.js.map
e. 目标位置改为wwwroot/js/
在项目上右击 -> 添加 -> 添加客户端库
a. 提供程序选择cdnjs
b. 库输入vue@2.6.14
c. 选中选择特定文件
d. 勾选vue.js和vue.min.js
e. 目标位置改为wwwroot/js/
在js文件夹上右击 -> 添加 -> 新建项 -> 选择JavaScript 文件 -> 名称改为site.js

"use strict";var app = new Vue({el: '#app',data: {message: ''},created() {// 监听事件this.$on('receiveMessage', (msg) => {this.message = msg;})},
})var hub = new signalR.HubConnectionBuilder().withUrl("/chatHub").build()hub.start().then(function () {// 使用定时器请求数据setInterval(function () {hub.invoke("Send").catch(function (err) {return console.error(err.toString());});}, 1000);
}).catch(function (err) {return console.error(err.toString());
});hub.on("Receive", function (msg) {// 使用事件触发app.$emit("receiveMessage", msg);
});

在wwwroot文件夹上右击 -> 添加 -> 新建项 -> 选择HTML 页 -> 名称改为Index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>Home Page</title>
</head>
<body><div id="app">{{ message }}</div><script src="./js/vue/vue.min.js"></script><script src="./js/dist/browser/signalr.min.js"></script><script src="./js/site.js"></script>
</body>
</html>

修改StartUp.cs类

public class Startup
{// This method gets called by the runtime. Use this method to add services to the container.// For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940public void ConfigureServices(IServiceCollection services){services.AddCors(options => options.AddPolicy("CorsPolicy",builder =>{builder.AllowAnyMethod().AllowAnyHeader().AllowCredentials();}));services.AddSignalR();}// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.public void Configure(IApplicationBuilder app, IHostingEnvironment env){if (env.IsDevelopment()){app.UseDeveloperExceptionPage();}// 允许跨域请求及使用静态文件作为请求路径服务app.UseHttpsRedirection().UseDefaultFiles().UseCors("CorsPolicy").UseSignalR(route =>{route.MapHub<ChatHub>("/chathub");}).UseStaticFiles();//app.Run(async (context) =>//{//    await context.Response.WriteAsync("Hello World!");//});}
}

ASP.NET Core 2.1基于SignalR和Vue实时通讯相关推荐

ASP.NET Core 2.1带来SignalR、Razor类库
随着.NET Core 2.1的发布,微软推出了 ASP.NET Core 2.1.这是一个强大的版本,包括实时通信库SignalR,更新的模板使GDPR更容易遵守,并且针对Angular.React ...
在ASP.NET CORE 2.0使用SignalR技术
一.前言上次讲SignalR还是在<在ASP.NET Core下使用SignalR技术>文章中提到,ASP.NET Core 1.x.x 版本发布中并没有包含SignalR技术和开发计划 ...
ASP.NET Core 实战：基于 Dapper 扩展你的数据访问方法
ASP.NET Core 实战:基于 Dapper 扩展你的数据访问方法一.前言在非静态页面的项目开发中,必定会涉及到对于数据库的访问,最开始呢,我们使用 Ado.Net,通过编写 SQL 帮助类 ...
javaweb k8s_K8S微服务核心架构学习指南 ASP.NET Core微服务基于K8S 架构师必备Kubernetes教程...
K8S微服务核心架构学习指南 ASP.NET Core微服务基于K8S 架构师必备Kubernetes教程课程内容是关于Kubernetes微服务架构学习课程,基于K8S开展ASP.NET核心进行微 ...
ASP.NET Core微服务(四)——【静态vue使用axios解析接口】
ASP.NET Core微服务(二)--[ASP.NET Core Swagger配置]: 环境:win10专业版+vs2019+sqlserver2014/2019+vsCode+在线资源 boot ...
在ASP.NET Core中创建基于Quartz.NET托管服务轻松实现作业调度
在这篇文章中,我将介绍如何使用ASP.NET Core托管服务运行Quartz.NET作业.这样的好处是我们可以在应用程序启动和停止时很方便的来控制我们的Job的运行状态.接下来我将演示如何创建一个简 ...
ASP.NET Core 实战：基于 Jwt Token 的权限控制全揭露
一.前言在涉及到后端项目的开发中,如何实现对于用户权限的管控是需要我们首先考虑的,在实际开发过程中,我们可能会运用一些已经成熟的解决方案帮助我们实现这一功能,而在 Grapefruit.VuCore ...
ASP.NET Core Web API基于RESTFul APIs的集合结果过滤和分页
译者荐语:如何在RESTFul APIs中进行集合结果分页?还是用客户端来拼接链接地址么? 原文来自互联网,由长沙DotNET技术社区[邹溪源]翻译.如译文侵犯您的版权,请联系小编,小编将在24小时内 ...
在ASP.NET Core 3.1 MVC中集成Vue.js V4和使用Dropzone文件上传
目录介绍先决条件 Node.js的介绍您已经安装了Node.js/NPM吗? Node/ NPM版本相关的常见错误 Vue.js简介安装Vue.js V4 NET Core介绍安装Visua ...

ASP.NET Core 2.1基于SignalR和Vue实时通讯

ASP.NET Core 2.1基于SignalR和Vue实时通讯相关推荐

最新文章

热门文章