SignalR简单示例教程入门版
上周五最后一天在公司上班,无聊之余就想做点什么.介于之前有人让我做个简易版的在线聊天的,于是乎就打算花一天时间来弄下关于SignalR的简单教程制作一个在线的聊天的。
1：前端用了国产的一个MVVM框架 avalon 的早期版本和 layer 插件(具体怎么用这里就不介绍了,需要了解的自行百度)
2：MVC项目里面新增一个Hub 的继承类 ChatHub , 标签HubName 类似于一个重命名的效果
3：OnlineCache 类的作用是定义了一个KEY和VALUE主要用于记录用户名称和Signalr自动生成的KEY关系
4 : Startup.cs 里记得注册下 app.MapSignalR();
[HubName("customhub")]
public class ChatHub : Hub
{
/// <summary> /// 发送信息/// </summary> /// <param name=""></param> /// <returns></returns>
public void Send(string name, string message)
{
Clients.All.addNewMessageToPage(name, message);
}
/// <summary> /// 页面打开创建Signalr对象时由客户端调用,然后服务端将已经存在的用户列表,推送回客户端用于刷新在线用户列表/// </summary> /// <param name=""></param> /// <returns></returns>
public void Push(string name)
{
if (!OnlineCache.dicSignalrs.ContainsKey(base.Context.ConnectionId))
OnlineCache.dicSignalrs.Add(base.Context.ConnectionId, name);
else
{
OnlineCache.dicSignalrs.Remove(base.Context.ConnectionId);
OnlineCache.dicSignalrs.Add(base.Context.ConnectionId, name);
}
///这里是将在线人员列表推送回客户端
Clients.All.subscribeUsers(name,OnlineCache.OnlineToList());
}
//
// 摘要:
// Called when the connection connects to this hub instance.
//
// 返回结果:
// A System.Threading.Tasks.Task
public override Task OnConnected()
{
return base.OnConnected();
}
//
// 摘要:
// Called when a connection disconnects from this hub gracefully or due to a timeout.
//
// 参数:
// stopCalled:
// true, if stop was called on the client closing the connection gracefully; false,
// if the connection has been lost for longer than the Microsoft.AspNet.SignalR.Configuration.IConfigurationManager.DisconnectTimeout.
// Timeouts can be caused by clients reconnecting to another SignalR server in scaleout.
//
// 返回结果:
// A System.Threading.Tasks.Task
/// <summary>
/// 离线触发
/// </summary>
/// <param name="stopCalled"></param>
/// <returns></returns>
public override Task OnDisconnected(bool stopCalled)
{
if (OnlineCache.dicSignalrs.ContainsKey(base.Context.ConnectionId))
{
var name = OnlineCache.dicSignalrs[base.Context.ConnectionId];
OnlineCache.dicSignalrs.Remove(base.Context.ConnectionId);
///离线后将在线人员移除的通知 推送到客户端
Clients.All.removeUser(name, OnlineCache.OnlineToList());
}
return base.OnDisconnected(stopCalled);
}
//
// 摘要:
// Called when the connection reconnects to this hub instance.
//
// 返回结果:
// A System.Threading.Tasks.Task
public override Task OnReconnected()
{
return base.OnReconnected();
}
}
public class OnlineCache
{
public OnlineCache() {
}
public string Key { set; get; }
public string Value { set; get; }
static OnlineCache()
{
if (dicSignalrs == null)
dicSignalrs = new Dictionary<string, string>();
}
public static Dictionary<string, string> dicSignalrs;
/// <summary>
/// 提取list
/// </summary>
/// <returns></returns>
public static List<OnlineCache> OnlineToList() => dicSignalrs.Select(o => new OnlineCache() { Key = o.Key, Value = o.Value }).ToList();
}
前端JS脚本
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Scripts/layer-v2.4/layer/skin/layer.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/Avalon/json2.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="~/Scripts/layer-v2.4/layer/layer.js"></script>
<script src="~/Scripts/Avalon/avalon.js"></script>
<script src="/signalr/hubs"></script>
<script>
var onlines = [];
var chat;
$(function () {
vm.init();
});
var vm =
avalon.define({
$id: "online",
sendname: "所有在线用户",
customname: "",
onlines: [],
logs: [],
authorize: false,
sendText: "",
firstload: false,
init: function () {
layer.prompt({
title: '输入聊天昵称，并确认',
formType: 0
}, function (name) {
layer.msg('聊天室内容加载中', {
time: 1000
});
vm.customname = name;
vm.authorize = true;
vm.callbackmessage();
});
},
connection: function () {
$.connection.hub.start().done(function () {
///首次页面加载注册完毕后直接把用户名发到后台建立用户列表
if (!vm.firstload) {
vm.firstload = true;
chat.server.push(vm.customname);
}
$('#btnSend').click(function () {
if (!vm.authorize) {
layer.msg("没有通过授权不能进行聊天");
return;
}
//**这里主要是用于发送信息
chat.server.send(vm.customname, $('#message').val());
$('#message').val('').focus();
});
});
vm.getOnlineUser();
},
callbackmessage: function () {
chat = $.connection.customhub;
//**有用户登陆 这里会接收到服务端推送过来的消息name是上线用户名称 users是在线用户列表 直接绑定mvvm的onlines刷新列表
chat.client.subscribeUsers = function (name,users) {
layer.tips(name + " 上线", '#btnSend', {
tips: [1, '#3595CC']
});
vm.onlines = users;
};
chat.client.removeUser = function (name, users) {
layer.tips(name + " 离线", '#btnSend', {
tips: [1, 'red']
});
vm.onlines = users;
};
chat.client.addNewMessageToPage = function (name, message) {
vm.logs.push({ name: name, message: message });
};
vm.connection();
}
});
</script>
</head>
<body ms-controller="online">
<div class="col-sm-2 col-md-2 col-lg-2">
<label>在线用户列表</label>
<br />
<div class="list-group">
<a href="#" ms-repeat="onlines" class="list-group-item">
{{el.Value}}
</a>
</div>
</div>
<div class="col-sm-5 col-md-5 col-lg-5">
<textarea id="message" placeholder="输入发送内容" class="form-control" style="width:100%;" ms-duplex="sendText"></textarea>
<br />
<br />
<div class="row col-sm-12 col-md-12 col-lg-12">
<div class="table-scrollable" style="max-height: 400px; overflow:auto; ">
<table class="table table-bordered table-hover text-center">
<thead>
<tr>
<th class="col-sm-4">发送人</th>
<th class="col-sm-8">内容</th>
</tr>
<tr href="#" ms-repeat="logs">
<th class="col-sm-4">{{el.name}}</th>
<th class="col-sm-8">{{el.message}}</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<br />
<div class="row">
<input class="btn btn-primary col-sm-5 col-md-5 col-lg-5" value="发送消息" id="btnSend" type="button" />
</div>
<br />
<br />
<div class="row">
<label>账号昵称：</label><label>{{customname}}</label>
</div>
<br />
<br />
<div class="row">
<label>发送对象：</label><label>{{sendname}}</label>
</div>
</div>
<div class="row">
<div class="col-sm-offset-11 col-sm-1 pull-right" style="margin-bottom:0px;" id="tip">
</div>
</div>
</body>
</html>
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 ...
- SignalR 简单示例
一.什么是 SignalR ASP.NET SignalR is a library for ASP.NET developers that simplifies the process of add ...
- 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示
随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Angularjs的框架来做UI,而数据则由另一个Web Api 的网站项目来支撑.注意,这里是 ...
- SVN四部曲之SVN简单使用教程入门
1. 签出源代码到本机 在本机创建文件夹StartKit,右键点击Checkout,弹出如下图的窗体: 2. 2 在上图中URL of Repository:下的文本框中输 ...
- RAS算法简单示例（Java版）
RSA算法——由三位发明者Ronald Rivest.Adi Shamir 和 Leonard Adleman 姓氏的首字母拼在一起组成. RSA算法属于“公开密钥加密技术”,其加密和解密的秘钥不同. ...
- 【CC2530入门教程-增强版】基础技能综合实训案例（基础版）-上位机源码
[CC2530入门教程-增强版]基础技能综合实训案例(基础版)-上位机源码 广东职业技术学院 欧浩源 一.需求分析 按照指定参数打开串口,与测控终端建立数据传输通道,并根据应用要求实现程序逻辑,具体 ...
- Visual C++ 6.0精简绿色版下载及简单使用教程
Visual C++ 6.0精简绿色版下载及简单使用教程 Microsoft Visual C++简介 Visual Studio 是微软公司推出的开发环境,Visual Studio 可以用来创建 ...
- ActiveMQ学习教程/2.简单示例
ActiveMQ学习教程(二)——简单示例 一.应用IDEA构建Maven项目 File->New->Module...->Maven->勾选->选择->Next ...
- 超简单！pytorch入门教程（五）：训练和测试CNN
我们按照超简单!pytorch入门教程(四):准备图片数据集准备好了图片数据以后,就来训练一下识别这10类图片的cnn神经网络吧. 按照超简单!pytorch入门教程(三):构造一个小型CNN构建好一 ...
随机推荐
- SecureCRT的快捷键
快捷键,有时比笨拙的方式,要效率高很多,近期经常和Linux打交道,用到SecureCRT,这里就从网上找到部分快捷方式,作为日后查看,以防经常查找. Alt + Enter -- 全屏Alt + B ...
- Django 源码小剖: 初探中间件(middleware)
因为考虑到文章的长度, 所以 BaseHandler 的展开被推迟了. 在 BaseHandler 中隐藏着中间件的信息, 较常见的 SessionMiddleware 就已经默认安装. BaseH ...
- 在Windows2008系统中利用IIS建立FTP服务器
一.服务器管理器 1.2008的系统使用服务器管理器,选择角色,因为我之前已经开启了IIS服务器角色,所以我现在只要添加角色服务即可,如果你没有开启过的话,直接添加角色即可. 2.选择WEB服 ...
- httpwebrequest 服务器提交了协议冲突. section=responsestatusline
调用接口的时候,包: httpwebrequest 服务器提交了协议冲突. section=responsestatusline 解决方案: req.KeepAlive = false; req.Al ...
- Hadoop 2.4.1 设置问题小结【原创】
先丢点问题小结到这里,免得忘记,有空再弄个详细教程玩,网上的教程要不就是旧版的,要不就是没说到点子上,随便搞搞也能碰上结果是对的时候,但是知其然而不知其所以然,没意思啊.解决问题的方法有很多种,总得找 ...
- WIN8 下Cisco VPN连接 出现vpn 422 failed to enable virtual adapter错误
今天在家用VPN软件连接,出现了“vpn 422 failed to enable virtual adapter”的错误,系统安装的是Win8专业版32位,百度了半天又很多方法解决不了,后来发现了一 ...
- MSSQL获得表的字段名称及其参数
SELECT ColumnsName = c.name, [Description] = ex.value, ColumnType = t.name, [Length]=c.max_length FR ...
- [转]使用ant让Android自动打包的build.xml,自动生成签名的apk文件(支持android4.0以上的版本)
在android4.0以后的sdk里那个脚本就失效了,主要是因为 apkbuilder这个程序不见了: 人家sdk升级,我们的脚本也要跟上趟,修改一下喽. 上网一查,大家的文章还停留在我去年的脚本程度 ...
- （转）Unity3D研究院之异步加载游戏场景与异步加载游戏资源进度条（三十一）
异步任务相信大家应该不会陌生,那么本章内容MOMO将带领大家学习Unity中的一些异步任务.在同步加载游戏场景的时候通常会使用方法 Application.LoadLevel(“yourScene ...
- SQL1159 Initialization error with DB2 .NET Data Provider, reason code 7(问题补充)
SQL1159 Initialization error with DB2 .NET Data Provider, reason code 7 需要注册GAC,修改注册表 IBM官方方案: http: ...