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构建好一 ...
随机推荐
- Sublime Text 使用技巧
之前就一直在用Sublime Text 来作为默认的文本编辑工具,但也只是简单的用用,一些Sublime Text本身的快捷键什么的都没研究过,今天特地在网上看了一下,快捷键比较多,要想熟练运用还得在 ...
- 深入剖析 redis 事件驱动
概述 redis 内部有一个小型的事件驱动,它和 libevent 网络库的事件驱动一样,都是依托 I/O 多路复用技术支撑起来的. 利用 I/O 多路复用技术,监听感兴趣的文件 I/O 事件,例如读 ...
- 在Oracle Linux Server release 6.4下配置ocfs2文件系统
① 安装ocfs-tools-1.8 如果是使用RedHat Enterprise Linux 6.4,也可以安装ocfs-tools-1.8的,只是要插入Oracle Linux Server re ...
- C#打开摄像头抓取照片然后退出
using System; using System.Collections.Generic; using System.Text; using System.Diagnostics; namespa ...
- SQL Server 2012 各版本功能比较
有关不同版本的 SQL Server 2012 所支持的功能的详细信息. 功能名称 Enterprise 商业智能 Standard Web Express with Advanced Service ...
- SAP S4 Finance6个支持企业实时财务管理的主要创新领域
本文将讲述下 SAP Simple Finance里面6个支持企业实时财务管理的主要创新领域. Simple Finance 在以下几个方面具有自己独特的优势: ● 更加简洁的用户体验,可以让用户在任 ...
- 导出程序界面（UI）到图片
无意间看到这个需求,查阅了相关文章,有两篇不错的博客给出了解决方案,地址如下: 1.在WPF程序中将控件所呈现的内容保存成图像 2.随心所欲导出你的 UI 界面到 PDF 文件 主要使用的接口: Si ...
- [z] 人工智能和图形学、图像处理方面的各种会议的评级
转载自:『http://www.cvchina.info/2010/08/31/conference-ranking-byar/』 澳大利亚政府和澳大利亚研究理事会做的,有一定考价值. 会议名称 会议 ...
- DNS反射攻击阻止
刚搭的dns server就有贱人跑dns反射放大攻击,据说bind高版本没洞,但是日志刷刷的跑,感觉也不放心,而且毕竟dns是返回了请求的,所以找了点资料备忘 先设定不受限制的网段 iptables ...
- QT在windows下实现截屏操作并保存为png图片
QPixmap originalPixmap = QPixmap::grabWindow(QApplication::desktop()->winId()); QString format = ...