SignalR实现在线聊天室功能
一、在线聊天室
1、新建解决方案 SignalROnlineChatDemo
2、新建MVC项目 SignalROnlineChatDemo.Web
（无身份验证）
3、安装SignalR
PM> install-package Microsoft.AspNet.SignalR
4、 创建一个称为 Startup.cs 的新类
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 有关如何配置应用程序的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
}
5、添加Hubs
public class ChatHub : Hub
{
public void Hello()
{
Clients.All.hello();
}
}
6、Action/View
/// <summary>
/// 在线聊天室
/// </summary>
/// <returns></returns>
public ActionResult Chat(string groupName)
{
if (string.IsNullOrWhiteSpace(groupName))
{
return Content("groupName is nllOrWhiteSpace");
}
return View((object)groupName);
}
@model string
@{
ViewBag.Title = "Chat";
} <style>
.chat-container div {
margin: 10px 0;
}
.dN {
display: none;
}
</style> <h2>Chat <span id="chatRoomName"></span></h2> <div class="chat-container">
<ul id="discussion"></ul>
<div class="sendto-wrap dN">
发送给：
<span></span>
</div>
<div class="sendcontent-wrap">
<input type="text" name="message" />
<input type="button" id="btnSendMessage" value="Send" />
</div>
</div> @section scripts{
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<!-- Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
//聊天室编号
var groupName = '@Model';
//成员昵称
var nickName = '';
//成员聊天Id
var connectionId = ''; //Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub; $("#chatRoomName").html(groupName); //Get the user name and store it to prepend to message
while (nickName == '' || $.trim(nickName) == '') {
nickName = prompt('Enter your name:', '')
$('#displayname').val(nickName);
} $('#message').focus(); }); </script>
}
7、功能1：新成员加入，群发欢迎
/// <summary>
/// newcomer 进入聊天室
/// </summary>
/// <param name="groupName"></param>
public void JoinGroup(string groupName, string userNickName)
{
//对聊天室成员群发‘新成员加入’
var conId = Context.ConnectionId; Groups.Add(conId, groupName); var psn = new ChatPerson()
{
ConnectionId = conId,
NickName = userNickName,
GroupName = groupName,
}; Clients.Caller.setCallerInfo(psn);
//Clients.Group(groupName).welcome(psn); //不能广播给自己，所以分成了两句
Clients.Caller.welcome(psn);
Clients.Group(groupName, conId).welcome(psn); }
//新成员身份信息（connectionId）
chat.client.setCallerInfo = function (psn) {
connectionId = psn.ConnectionId;
groupName = psn.groupName;
};
//welcome newcomer
chat.client.welcome = function (psn) {
$("#discussion").append('<li><a href="javascript:;" data-conId="' + psn.ConnectionId + '">' + psn.NickName + '</a>加入了聊天室</li>');
};
结果截图：
8、功能2：群发
/// <summary>
/// newcomer进入聊天室，对聊天室成员群发‘新成员加入’
/// </summary>
/// <param name="groupName"></param>
public void JoinGroup(string groupName, string userNickName)
{
var conId = Context.ConnectionId;
var psn = new ChatPerson()
{
ConnectionId = conId,
NickName = userNickName,
GroupName = groupName,
}; //成员信息计入Redis中
//var redisClient = RedisManager.GetClient();
//if (redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, psn.ConnectionId)) != null)
//{
// //connected
// return;
//}
//redisClient.Set<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, psn.ConnectionId), psn);
//redisClient.SaveAsync();
using (var redisClient = RedisManager.GetClient())
{
IRedisTypedClient<ChatPerson> psns = redisClient.As<ChatPerson>();
if (psns.GetValue(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, psn.ConnectionId)) != null)
{
//connected
return;
}
psns.SetValue(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, psn.ConnectionId), psn);
} Groups.Add(conId, groupName);
Clients.Caller.setCallerInfo(psn);
//Clients.Group(groupName).welcome(psn); //不能广播给自己，所以分成了两句
Clients.Caller.welcome(psn);
Clients.Group(groupName, conId).welcome(psn);
} /// <summary>
/// 群发内容
/// </summary>
public void SendMessage(string message)
{
if (string.IsNullOrWhiteSpace(message))
{
return;
}
var conId = Context.ConnectionId;
ChatPerson psn = null;
var redisClient = RedisManager.GetClient();
if ((psn = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, conId))) == null
|| string.IsNullOrWhiteSpace(psn.GroupName) || string.IsNullOrWhiteSpace(psn.NickName)
)
{
//invalid ConnectionId
return;
}
Clients.Group(psn.GroupName).sendMessage(conId, psn.NickName, message);
}
//群发内容
chat.client.sendMessage = function (sendFromConnectionId, sendFromNickName, message) {
$("#discussion").append('<li><a href="javascript:;" data-conId="' + sendFromConnectionId + '">' + sendFromNickName + '</a>：' + message + '</li>');
};
结果截图：
9、功能3：回复
/// <summary>
/// 回复（@）
/// </summary>
/// <param name="sendTo"></param>
/// <param name="message"></param>
public void SendMessageTo(string sendTo, string message)
{
if (string.IsNullOrWhiteSpace(message) || string.IsNullOrWhiteSpace(sendTo))
{
return;
}
var connId = Context.ConnectionId;
if (connId == sendTo)
{
return;
}
ChatPerson curPerson = null;
ChatPerson desPerson = null;
var redisClient = RedisManager.GetClient();
if ((curPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, connId))) == null
|| string.IsNullOrWhiteSpace(curPerson.GroupName) || string.IsNullOrWhiteSpace(curPerson.NickName)
)
{
//invalid ConnectionId
return;
}
if ((desPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, sendTo))) == null
|| string.IsNullOrWhiteSpace(desPerson.GroupName) || string.IsNullOrWhiteSpace(desPerson.NickName)
)
{
//invalid ConnectionId
return;
}
if (curPerson.GroupName != desPerson.GroupName)
{
return;
} Clients.Group(curPerson.GroupName).sendMessageTo(curPerson.ConnectionId, curPerson.NickName, desPerson.ConnectionId, desPerson.NickName, message);
}
//at回复
chat.client.sendMessageTo = function (fromConnId, fromNickName, toConnId, toNickName, message) {
$("#discussion").append('<li data-connId="' + fromConnId + '" data-nickName="' + fromNickName + '"><a href="javascript:;">' + fromNickName + '</a>对<a href="javascript:;">' + toNickName + '</a> 说：' + message + ' '
+ (fromConnId == connectionId ? '' : ' <a href="javascript:;" action="at">@他</a>') + '' + (fromConnId == connectionId ? '' : ' <a title="屏蔽其发言" href="javascript:;" action="shielding">屏蔽</a>') + '</li>');
};
//发送
$("#btnSendMessage").click(function () {
var desConnId = $('.sendto-wrap a').attr('data-desConnId');
if (!desConnId || desConnId.length == 0) {
//群发
chat.server.sendMessage($('[name=message]').val());
}
else {
//回复
chat.server.sendMessageTo(desConnId, $('[name=message]').val());
}
$('.sendto-wrap').addClass('dN');
$('.sendto-wrap a').attr('data-desConnId', '');
$('[name=message]').val('').focus();
});
//at
$('#discussion').on('click', '[action=at]', function () {
var desConnId = $(this).closest('li').attr('data-connId');
var desNickName = $(this).closest('li').attr('data-nickName');
$('.sendto-wrap').removeClass('dN');
$('.sendto-wrap a').attr('data-desConnId', desConnId).html(desNickName);
});
结果截图：
10、功能4：私信
/// <summary>
/// 私信给
/// </summary>
/// <param name="sendTo"></param>
/// <param name="message"></param>
public void PrivateMessageTo(string sendTo, string message)
{
if (string.IsNullOrWhiteSpace(message) || string.IsNullOrWhiteSpace(sendTo))
{
return;
}
var connId = Context.ConnectionId;
if (connId == sendTo)
{
return;
}
ChatPerson curPerson = null;
ChatPerson desPerson = null;
var redisClient = RedisManager.GetClient();
if ((curPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, connId))) == null
|| string.IsNullOrWhiteSpace(curPerson.GroupName) || string.IsNullOrWhiteSpace(curPerson.NickName)
)
{
//invalid ConnectionId
return;
}
if ((desPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, sendTo))) == null
|| string.IsNullOrWhiteSpace(desPerson.GroupName) || string.IsNullOrWhiteSpace(desPerson.NickName)
)
{
//invalid ConnectionId
return;
}
if (curPerson.GroupName != desPerson.GroupName)
{
return;
}
Clients.Caller.myPrivateMessageTo(desPerson.ConnectionId, desPerson.NickName, message);
Clients.Client(sendTo).bePrivateMessageTo(curPerson.ConnectionId, curPerson.NickName, message);
}
//私信
$('#discussion').on('click', '[action=privateAt]', function () {
var desConnId = $(this).closest('li').attr('data-connId');
var desNickName = $(this).closest('li').attr('data-nickName');
$('.sendto-wrap span.sendto-to').html('私信给');
$('.sendto-wrap').removeClass('dN');
$('.sendto-wrap a').attr('data-desConnId', desConnId).attr('data-desAction', 'privateAt').html(desNickName);
});
//privateAt私信
//我发的
chat.client.myPrivateMessageTo = function (toConnId, toNickName, message) {
$("#discussion").append('<li data-connId="' + connectionId + '" data-nickName="' + nickName + '">我对<a href="javascript:;">' + toNickName + '</a> 说：' + message + ' '
//+ getActionBlockHtml(connectionId)
);
};
//发给我的
chat.client.bePrivateMessageTo = function (fromConnId, fromNickName, message) {
$("#discussion").append('<li data-connId="' + fromConnId + '" data-nickName="' + fromNickName + '"><a href="javascript:;">' + fromNickName + '</a>对我私信说：' + message + ' '
+ getActionBlockHtml(fromConnId)
);
};
结果截图：
11、功能5：屏蔽
/// <summary>
///
/// </summary>
public class PersonShielding
{
/// <summary>
/// 成员的ConnectionId
/// </summary>
public string ConnectionId { get; set; } /// <summary>
/// 被屏蔽 我被哪些人屏蔽（这样设计似乎不合理，但好用）
/// </summary>
public string[] BeShieldingByConnIdArr { get; set; }
}
/// <summary>
/// 屏蔽某人的发言
/// </summary>
/// <param name="desConId"></param>
public void Shielding(string desConnId)
{
if (string.IsNullOrWhiteSpace(desConnId))
{
return;
}
var connId = Context.ConnectionId;
if (connId == desConnId)
{
return;
}
var redisClient = RedisManager.GetClient();
ChatPerson curPerson = null;
ChatPerson desPerson = null;
if ((curPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, connId))) == null
|| string.IsNullOrWhiteSpace(curPerson.GroupName) || string.IsNullOrWhiteSpace(curPerson.NickName)
)
{
//invalid ConnectionId
return;
}
if ((desPerson = redisClient.Get<ChatPerson>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, desConnId))) == null
|| string.IsNullOrWhiteSpace(desPerson.GroupName) || string.IsNullOrWhiteSpace(desPerson.NickName)
)
{
//invalid ConnectionId
return;
}
var personShielding = redisClient.Get<PersonShielding>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, desConnId));
if (personShielding == null)
{
personShielding = new PersonShielding()
{
ConnectionId = desConnId,
BeShieldingByConnIdArr = new string[] { connId }
};
}
else
{
if (personShielding.BeShieldingByConnIdArr == null)
{
personShielding.BeShieldingByConnIdArr = new string[] { connId };
}
else if (!personShielding.BeShieldingByConnIdArr.Contains(connId))
{
personShielding.BeShieldingByConnIdArr = personShielding.BeShieldingByConnIdArr.Union(new string[] { connId }).ToArray();
}
}
redisClient.Set<PersonShielding>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, desConnId), personShielding);
redisClient.SaveAsync(); Clients.Caller.shieldingSuccess(desConnId, desPerson.NickName);
}
var personShielding = redisClient.Get<PersonShielding>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, connId));
if (personShielding != null && personShielding.BeShieldingByConnIdArr != null && personShielding.BeShieldingByConnIdArr.Length > )
{
//屏蔽我的 不发
Clients.Group(curPerson.GroupName, personShielding.BeShieldingByConnIdArr).sendMessage(connId, curPerson.NickName, message);
}
else
{
Clients.Group(curPerson.GroupName).sendMessage(connId, curPerson.NickName, message);
}
var personShielding = redisClient.Get<PersonShielding>(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, connId));
if (personShielding == null || personShielding.BeShieldingByConnIdArr == null || !personShielding.BeShieldingByConnIdArr.Contains(sendTo))
{
//sendTo没有屏蔽我，那我就发
Clients.Group(curPerson.GroupName).sendMessageTo(curPerson.ConnectionId, curPerson.NickName, desPerson.ConnectionId, desPerson.NickName, message);
}
//屏蔽
$('#discussion').on('click', '[action=shielding]', function () {
if (confirm('确定屏蔽其发言么！')) {
var desConnId = $(this).closest('li').attr('data-connId');
chat.server.shielding(desConnId);
}
});
//屏蔽成功 callback
chat.client.shieldingSuccess = function (desConnId, desNickName) {
$("#discussion").append('<li data-connId="' + connectionId + '" data-nickName="' + nickName + '">你成功屏蔽了<a href="javascript:;">' + desNickName + '</a>的发言'
+ '</li>'
);
};
结果截图：
二、其他工作
1、退出后重新接入，能确定唯一身份么？
关于这个问题，通常的解决方案是：使用UserId，以UserId作为主线。当时是想到一点就写一点的！
如果能在页面加载$.connection.hub.start()的时候带入上次使用的connectionId就好了，但暂时我还没发现能这么做
（如果谁知道怎么解决，分享给我下，谢谢！！！）
2、退出聊天室时从Redis清理用户的相关数据
先来看看Hub的这三个方法：Hub.OnConnected 、Hub.OnDisconnected 、 Hub.OnReconnected
/// <summary>
/// Called when the connection connects to this hub instance.
/// </summary>
/// <returns></returns>
public override Task OnConnected()
{
DefaultLoggerProvider.Instance.InfoFormat("ChatHub.OnConnected, ConnectionId:{0}", Context.ConnectionId);
return base.OnConnected();
} /// <summary>
/// Called when a connection disconnects from this hub gracefully or due to a timeout.
/// </summary>
/// <param name="stopCalled"></param>
/// <returns></returns>
public override Task OnDisconnected(bool stopCalled)
{
DefaultLoggerProvider.Instance.InfoFormat("ChatHub.OnDisconnected, ConnectionId:{0}", Context.ConnectionId);
return base.OnDisconnected(stopCalled);
} /// <summary>
/// Called when the connection reconnects to this hub instance.
/// </summary>
/// <returns></returns>
public override Task OnReconnected()
{
DefaultLoggerProvider.Instance.InfoFormat("ChatHub.OnReconnected, ConnectionId:{0}", Context.ConnectionId);
return base.OnReconnected();
}
从查看日志可以得出结论：
Onconnected 是在加载页面/刷新页面重新加载的时候触发（$.connection.hub.start()）。
OnDisConnected 在离开（关闭选项卡/刷新页面）的时候触发（$.connection.hub.stop()）。
OnReconnected 仅会在生成网站的时候触发。重启网站不会触发。（暂不知所以然）
所以可以这样
public override Task OnDisconnected(bool stopCalled)
{
var connId = Context.ConnectionId; DefaultLoggerProvider.Instance.InfoFormat("ChatHub.OnDisconnected, ConnectionId:{0}, stopCalled:{1}", connId, stopCalled); using (var redisClient = RedisManager.GetClient())
{
redisClient.Remove(string.Format(RedisKey.SignalROnlineChatDemoWebModels_ChatPerson, connId));
redisClient.Remove(string.Format(RedisKey.SignalROnlineChatDemoWebModels_PersonShielding, connId));
redisClient.SaveAsync();
} return base.OnDisconnected(stopCalled);
}
附：源码下载
SignalR实现在线聊天室功能的更多相关文章
- Asp.NET MVC 使用 SignalR 实现推送功能二（Hubs 在线聊天室 获取保存用户信息）
简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...
- 基于Server-Sent Event的简单聊天室 Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。
基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...
- 基于Server-Sent Event的简单在线聊天室
Web即时通信 所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览知乎时 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第12章 jQuery在线聊天室
在线聊天室案例 一.功能简介: 1.用户需要登录后才能进入聊天室交流 2.已无刷新的方式,动态展示交流后的内容和在线人员的基本信息 3.登录后的用户可以提交文字和表情图标 技术重点:利用ajax的无刷 ...
- 基于JQuery+JSP的无数据库无刷新多人在线聊天室
JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...
- 百度前端面试题－类似slack的在线聊天室
别人国庆出去玩,我在家写代码的感觉也是很不错哒. 首先介绍一下技术架构吧! 使用了js框架:FFF,zepto,jquery,md5.min.js 前端框架:Bootstrap 后端:野狗,部分PHP ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- 基于Java的在线聊天室
概述 Java socket编程,实现一个在线聊天室, 实现在线用户群聊,私聊,发送文件等功能. 详细 代码下载:http://www.demodashi.com/demo/13623.html 一. ...
- 在线聊天室的实现(1)--websocket协议和javascript版的api
前言: 大家刚学socket编程的时候, 往往以聊天室作为学习DEMO, 实现简单且上手容易. 该Demo被不同语言实现和演绎, 网上相关资料亦不胜枚举. 以至于很多技术书籍在讲解网络相关的编程时, ...
随机推荐
- xshell用ssh连接VMware中的ubuntu
SSH分客户端openssh-client和openssh-server如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则sudo apt-ge ...
- java英文缩写
JSR Java Specification Request Java规范请求 POJO Plain Old Java Object 简单的Java对象
- js 延时
alert(1);setTimeout(function(){alert(2);}, 1000);setTimeout(function(){alert(3);}, 2000);
- 【转】C# 二维码生成
/// <summary> /// 含有QR码的描述类和包装编码和渲染 /// </summary> public class QRCodeHelper { /// <s ...
- （转）SDL2.0在mfc窗口中显示yuv的一种方法
DWORD ThreadFun() { //用mfc窗口句柄创建一个sdl window SDL_Window * pWindow = SDL_CreateWindowFrom( (voi ...
- 【c语言】推断一个数是奇偶数
// 推断一个数是奇偶数 #include <stdio.h> void judge_sd(int a) { if ((a & 1) == 0) { printf("是偶 ...
- C++编程 - tuple、any容器
C++编程 - tuple.any容器 flyfish 2014-10-29 一 tuple tuple是固定大小的容器,每一个元素类型能够不同 作用1 替换struct struct t1 { in ...
- Altera特殊管脚的使用（适用全系列Altera FPGA,MSEL区别除外）-来自altera论坛
1.I/O, ASDO 在AS 模式下是专用输出脚,在PS 和JTAG 模式下可以当I/O 脚来用.在AS 模式下,这个脚是CII 向串行配置芯片发送控制信号的脚.也是用来从配置芯片中读配置数据的脚 ...
- mysql 中查看指定表的字段名 (可根据字段变量生成c#后台代码)
select DISTINCT data_type from COLUMNS where table_name='表名' 用ConCat();构造生成代码.....
- Vertex and FragmentShader顶点与片段着色器
一.顶点与片段着色器简介 Vertex and FragmentShader:最强大的Shader类型,也是本系列的重点,下文中简称V&FShader,属于可编程渲染管线.使用的是CG/HLS ...