1、新建WebApi

2、安装Microsoft.AspNetCore.SignalR

3、新建一个集线器和消息类

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks; namespace WebApi.Chat
{
public class ChatHub : Hub
{
//SendMsg用于前端调用
public Task SendMsg(ChatMessageInfo info)
{
//在客户端实现此处的Show方法
return Clients.All.SendAsync("Show", info.UserName + ":" + info.Message);
}
}
}
namespace WebApi.Chat
{
public class ChatMessageInfo
{
public string UserName { get; set; }
public string Message { get; set; }
}
}

4、配置Startup

5、新建html,并发布到iis下

注:signalr.min.js不依赖jquery,此处只是方便编码,通过以下两个命令在node_modules\ @aspnet\signalr\dist\browser中获得signalr的js文件。

npm init  -y
npm install @aspnet/signalr
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="text" id="userid" placeholder="Enter user name" />
<br>
<input type="text" id="message" placeholder="Enter sned message" />
<input type="button" id="btnSend" value="Send" />
<ul id="msglist"></ul> <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="signalr.min.js"></script>
<script>
$(function () {
//服务地址
let hubUrl = 'http://localhost:50432/chathub';
let httpConnection = new signalR.HttpConnection(hubUrl);
let hubConnection = new signalR.HubConnection(httpConnection); $("#btnSend").click(function () {
//新建对象
let obj = new Object();
obj.UserName = $('#userid').val();
obj.Message = $('#message').val();
//调用服务器方法
hubConnection.invoke('SendMsg', obj);
}); //服务器回调方法
hubConnection.on('Show', data => {
$('#msglist').append($('<li>').text(data));
}); hubConnection.start();
});
</script>
</body>
</html>

6、效果图

参考文档https://docs.microsoft.com/en-us/aspnet/core/signalr/get-started?tabs=visual-studio&view=aspnetcore-2.1

Github地址https://github.com/zrkcode/SignalR.git

Asp.NetCore+Microsoft.AspNetCore.SignalR前后端分离的更多相关文章

  1. docker部署angular和asp.net core组成的前后端分离项目

    最近使用docker对项目进行了改进,把步骤记录一下,顺便说明一下项目的结构. 项目是前后端分离的项目,后端使用asp.net core 2.2,采用ddd+cqrs架构的分层思想,前端使用的是ang ...

  2. 采用异步来实现重新连接服务器或者重新启动服务 C#中类的属性的获取 SignalR2简易数据看板演示 C#动态调用泛型类、泛型方法 asp .net core Get raw request. 从壹开始前后端分离[.NetCore 不定期更新] 38 ║自动初始化数据库

    采用异步来实现重新连接服务器或者重新启动服务 开启异步监听,不会导致主线程的堵塞,在服务异常断开后一直检测重新连接服务,成功连接服务后通知各个注册的客户端! #region 检测断线并重连OPC服务 ...

  3. 从壹开始前后端分离[.NetCore] 37 ║JWT完美实现权限与接口的动态分配

    缘起 本文已经有了对应的管理后台,地址:https://github.com/anjoy8/Blog.Admin 哈喽大家好呀!又过去一周啦,这些天小伙伴们有没有学习呀,已经有一周没有更新文章了,不过 ...

  4. ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

    一.前言 这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业的发展,让自己扩展出新的技能树,对自 ...

  5. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  6. ASP.NET Core模块化前后端分离快速开发框架介绍之4、模块化实现思路

    源码 GitHub:https://github.com/iamoldli/NetModular 演示地址 地址:https://nm.iamoldli.com 账户:admin 密码:admin 前 ...

  7. ASP.NET WebApi+Vue前后端分离之允许启用跨域请求

    前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分 ...

  8. 超简单!asp.net core前后端分离项目使用gitlab-ci持续集成到IIS

    现在好多使用gitlab-ci的持续集成的教程,大部分都是发布到linux系统上的,但是目前还是有很大一部分企业使用的都是windows系统使用IIS在部署.NET应用程序.这里写一下如何使用gitl ...

  9. 【开源】分享一个前后端分离方案-前端angularjs+requirejs+dhtmlx 后端asp.net webapi

    一.前言 半年前左右折腾了一个前后端分离的架子,这几天才想起来翻出来分享给大家.关于前后端分离这个话题大家也谈了很久了,希望我这个实践能对大家有点点帮助,演示和源码都贴在后面. 二.技术架构 这两年a ...

随机推荐

  1. iOS7 CookBook精彩瞬间(一)property、selector细节、__unused

    1.我们常常使用nonatomic,很多人只知道它的效率较高,却不知道其含义,其含义是非线程安全的,也就是说多线程修改时不加锁,可能出现多个线程先后修改而成为脏数据的情况. 2.unsafe_unre ...

  2. 贪婪算法(Greedy algorithm)-算法学习之旅(一)

    我研一下学期选修了网络管理,因为是限选课所以我没有认真上课,今天因为快结课考试了,我才去,然后我发现了一个大秘密...... 原来老师从第三节课已经开始讲算法导论的知识了,我是不是错过了什么... 废 ...

  3. 剑指Offer——动态规划算法

    剑指Offer--动态规划算法 什么是动态规划? 和分治法一样,动态规划(dynamic programming)是通过组合子问题而解决整个问题的解. 分治法是将问题划分成一些独立的子问题,递归地求解 ...

  4. parcel和parcelable

    Parcel 在英文中有两个意思,其一是名词,为包裹,小包的意思: 其二为动词,意为打包,扎包.邮寄快递中的包裹也用的是这个词.Android采用这个词来表示封装消息数据.这个是通过IBinder通信 ...

  5. Android 5.1.1 源码目录结构

    点击打开链接 最近公司培训新同事,我负责整理一点关于android的基础知识,遥想当年,刚接触android,也是一头雾水, 啥都不懂,就是靠看文档和视频,对android有一个初步了解,然后就通过查 ...

  6. WebLogic11g-负载分发

    负载均衡的实现方式有很多种,这里只介绍三种相对来说成本较低的方案(维护成本以及费用成本)weblogic自带的proxy.apache.nginx  1.weblogic自带的proxy方式:  1) ...

  7. 【Unity Shaders】Transparency —— 使用alpha通道创建透明效果

    本系列主要参考<Unity Shaders and Effects Cookbook>一书(感谢原书作者),同时会加上一点个人理解或拓展. 这里是本书所有的插图.这里是本书所需的代码和资源 ...

  8. Android开发-Listview中显示不同的视图布局

    1. 使用场景 在重写ListView的BaseAdapter时,我们常常在getView()方法中复用convertView,以提高性能.convertView在Item为单一的同种类型布局时,能够 ...

  9. Install and run DB Query Analyzer 6.04 on Microsoft Windows 10

          Install and run DB Query Analyzer 6.04 on Microsoft Windows 10  DB Query Analyzer is presented ...

  10. sql一些常用的经典语句,最后是select as的用法

    总结一些工作中用到或碰到的SQL语句,希望能与大家分享,同时也希望大家能提供更多的精妙SQL语句..... 1.delete table1 from (select * from table2) as ...