SignalR系列文章02---netCoreMvc创建Demo
1、 新建.net core MVC项目,并引入nuget包
2、 添加客户端库
3、 修改startUp.cs文件,增加services.AddSignalR();和endpoints.MapHub<ServerHub>("/serverHub");
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
} public IConfiguration Configuration { get; } // This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR();
} // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles(); app.UseRouting(); app.UseAuthorization(); app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
endpoints.MapHub<ServerHub>("/serverHub");
});
}
}
4、 新增ServerHub类
public class ServerHub:Hub
{
public async Task Send(string message)
{
await Clients.All.SendAsync("sendMessage", message);
}
}
5、 在Home/index.cshtml文件中加入如下的代码
@{
ViewBag.Title = "聊天窗口";
} <h2>Chat</h2> <div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div> @section scripts
{
<!--引用SignalR库. -->
<script src="~/lib/signalr/signalr.min.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script> <script>
$(function () { let hubUrl = 'https://localhost:44360/serverHub';
let hubConnection = new signalR.HubConnectionBuilder().withUrl(hubUrl).build(); $('#sendmessage').click(function () {
hubConnection.invoke("Send", $('#message').val());
// 清空输入框信息并获取焦点
$('#message').val('').focus();
});
//服务器回调方法
hubConnection.on("sendMessage", function (data) {
// 向页面添加消息
$('#discussion').append('<li><strong>' + htmlEncode(data)
+ '</strong></li>');
}) hubConnection.start(); }); // 为显示的消息进行Html编码
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}
6、 运行效果
SignalR系列文章02---netCoreMvc创建Demo的更多相关文章
- NHibernate系列文章二:创建NHibernate工程
摘要 这篇文章介绍了如何创建一个简单的使用NHibernate的控制台应用程序,包括使用NuGet.简单的配置.单表映射.对NHibernate配置文件添加智能提示.使用ISessionFactory ...
- 史上最全面的SignalR系列教程-目录汇总
1.引言 最遗憾的不是把理想丢在路上,而是理想从未上路. 每一个将想法变成现实的人,都值得称赞和学习. 致正在奔跑的您! 2.SignalR介绍 SignalR实现服务器与客户端的实时通信 ,她是一个 ...
- SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序
SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 异常汇总:http://www ...
- Grafana 系列文章(一):基于 Grafana 的全栈可观察性 Demo
️Reference: https://github.com/grafana/intro-to-mlt 这是关于 Grafana 中可观察性的三个支柱的一系列演讲的配套资源库. 它以一个自我封闭的 D ...
- Grafana 系列文章(十二):如何使用Loki创建一个用于搜索日志的Grafana仪表板
概述 创建一个简单的 Grafana 仪表板, 以实现对日志的快速搜索. 有经验的直接用 Grafana 的 Explore 功能就可以了. 但是对于没有经验的人, 他们如何能有一个已经预设了简单的标 ...
- Signalr系列之虚拟目录详解与应用中的CDN加速实战
目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 前段时间一直有人问我 在用SignalR 2.0开发客服系统[系列1:实现群发通讯]这篇文章中的"/Si ...
- 史上最全面的SignalR系列教程-2、SignalR 实现推送功能-永久连接类实现方式
1.概述 通过上篇史上最全面的SignalR系列教程-1.认识SignalR文章的介绍,我们对SignalR技术已经有了一个全面的了解.本篇开始就通过SignalR的典型应用的实现方式做介绍,例子虽然 ...
- SignalR系列续集[系列6:使用自己的连接ID]
目录 SignalR系列目录 前言 老规矩,前言~,在此先道个歉,之前的1-5对很多细节问题都讲的不是很详细,也有很多人在QQ或者博客问我一些问题 所以,特开了这个续集.. - -, 讲一些大家在开发 ...
- 《ASP.NET SignalR系列》第四课 SignalR自托管(不用IIS)
从现在开始相关文章请到: http://lko2o.com/moon 接着上一篇:<ASP.NET SignalR系列>第三课 SignalR的支持平台 一.概述 SignalR常常依托于 ...
- 《ASP.NET SignalR系列》第一课 认识SignalR
从现在开始相关文章请到: http://lko2o.com/moon 一.概述 ASP.NET signalr对ASP.NET开发者来说是一个新的程序库,它能让我们更加容易便捷地开发实时通信功能; s ...
随机推荐
- 火山引擎 ByteHouse:如何提升 18000 节点的 ClickHouse 可用性?
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 ClickHouse 是业内被广泛使用的 OLAP 引擎.当集群规模过大时,ClickHouse 则面临使用局限性 ...
- Java 网络编程 —— ServerSocket 详解
构造 ServerSocket ServerSocket 的构造方法有以下几种重载形式 ServerSocket() throws IOException ServerSocket(int port) ...
- Java ElasticSearch 操作
pom 文件中添加: <dependency> <groupId>org.elasticsearch.client</groupId> <artifactId ...
- 如何写个死循环,既不独占线程,又不阻塞UI线程?
如果死循环独占线程,500个死循环要占用500个线程,如果死循环不独占线程,500个死循环,用200个线程也行,用20个线程也行,无非是执行的慢点 这样可以把同步操作改写为异步,并且节省线程占用 问个 ...
- SpringBoot多模块项目搭建以及搭建基础模板
多模块项目搭建 目录 多模块项目搭建 1.父项目pom文件编辑 2.创建子模块 1.父项目pom文件编辑 <!--1.父工程 添加pom格式--> <packaging>pom ...
- 5、SpringBoot连接数据库引入mybatis
系列导航 springBoot项目打jar包 1.springboot工程新建(单模块) 2.springboot创建多模块工程 3.springboot连接数据库 4.SpringBoot连接数据库 ...
- Element UI Table合并行
Vue使用Element-ui Table 合并行,官方只是一个非常简单的合并例子,通常业务都是相同的某个字段进行合并. 效果图 代码实现 1.Table <el-table :data=&qu ...
- 有了Composition API后,有些场景或许你不需要pinia了
前言 日常开发时有些业务场景功能很复杂,如果将所有代码都写在一个vue组件中,那个vue文件的代码量可能就几千行了,维护极其困难.这时我们就需要将其拆分为多个组件,拆完组件后就需要在不同组件间共享数据 ...
- 基本操作Linux
基本操作Linux 关机,重启# 关机 shutdown -h now # 重启 shutdown -r now 查看系统,CPU信息# 查看系统内核信息 uname -a # 查看系统内核版本 ca ...
- 【面试题精讲】如何使用Stream的聚合功能
有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 系列文章地址 求和(Sum): List<Integer ...