SignalR消息推送（03）

在创建的Hub类中添加如下代码：

//hub别名，方便前台调用
[HubName("getMsg")]
public class MyHub : Hub
{
public void Send(string title,string msg)
{
//调用客户端的sendMessage（）方法
Clients.All.sendMessage(title,msg);  //其中Clients.All是dynamic类型,sendMessaage()方法是视图中js定义的function。
}
}

在项目中添加 OWIN StartUp 类。

public class Startup
{
public void Configuration(IAppBuilder app)
{
//注册管道,使用默认的虚拟地址,根目录下的"/signalr",
//当然你也可以自己定义
app.MapSignalR();
}
}

创建控制器和视图

//创建MessageController，并创建两个用于显示视图的action。
//控制器代码：
ublic class MessageController : Controller
{
//发送消息
public ActionResult SendMessage()
{
return View();
}
//接收消息
public ActionResult ReceiveMessage()
{
return View();
}
}

//发送消息视图代码：
<h2>发送消息</h2>
<div>
标题：<input type="text" id="title" />
</div><br />
<div>
内容：<textarea id="message" rows="4" cols="30"></textarea>
</div>
<br />
<div>
<input type="button" id="sendmessage" value="发送" />
</div>

<script src="~/Scripts/jquery.signalR-2.2.2.js"></script>
<!--引用自动生成的SignalR 集线器(Hub)脚本.在运行的时候在浏览器的Source下可看到 -->
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
// 引用自动生成的集线器代理（此处使用别名getMsg)
var chat = $.connection.getMsg;
// 集成器连接开始
$.connection.hub.start().done(function () {
// 服务连接完成，给发送按钮注册单击事件
$('#sendmessage').click(function () {
// 调用服务器端集线器的Send方法
chat.server.send($("#title").val(), $('#message').val());  //又调用了客户端，客户端的函数就是添加信息列，就实现了广播消息功能
});
});
});
</script>

//接收消息视图代码：
<h2>接收消息</h2>
<div>
<br />
<div id="msgcontent"></div>
</div>
<script src="~/Scripts/jquery.signalR-2.2.2.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
// 引用自动生成的集线器代理
var chat = $.connection.getMsg;
// 定义服务器端调用的客户端sendMessage来显示新消息
chat.client.sendMessage = function (title, message) {
// 向页面发送接收的消息
var html = "<div>标题：" + title + "消息内容：" + message + "</div>";
$("#msgcontent").after(html);
};
// 集成器连接开始
$.connection.hub.start(); //与SignalR服务建立连接
});
</script>

//<!--引用SignalR库. -->

1.3 实现点对点聊天

Clients对象的所有属性或方法，具体的定义如下：

public interface IHubConnectionContext<T>
{
T All { get; } // 代表所有客户端
T AllExcept(params string[] excludeConnectionIds); //除了参数中的所有客户端
T Client(string connectionId); // 特定的客户端，实现端对端聊天的关键
T Clients(IList<string> connectionIds); // 参数中的客户端
T Group(string groupName, params string[] excludeConnectionIds); // 指定客户端组，可以实现群聊
T Groups(IList<string> groupNames, params string[] excludeConnectionIds);
T User(string userId); // 特定的用户
T Users(IList<string> userIds); // 参数中的用户
}

属性

SignalR会每一个客户端分配一个ConnnectionId

实现思路：

客户端登入的时候记录下客户端的ConnnectionId，并将用户加入到一个静态数组中，该数据为了记录所有在线用户。
用户可以点击在线用户中的用户聊天，在发送消息的时候，需要将ConnectionId一并传入到服务端。
服务端根据传入的消息内容和ConnectionId调用Clients.Client(connnection).sendMessage方法来进行转发到对应的客户端。

[HubName("Chat")]
public class ChatHub : Hub
{
// 静态属性,在线用户列表
public static List<UserInfo> OnlineUsers = new List<UserInfo>();

//登录
public void Login(string userId,string userName)
{
//获取客户端的ConnectionId
var connnectId = Context.ConnectionId;
OnlineUsers.Add(new UserInfo
{
ConnectionId = connnectId,
UserId = userId,
UserName = userName
});
// 所有客户端同步在线用户
Clients.All.loadUser(OnlineUsers);
}

/// <summary>
/// 发送私聊
/// </summary>
/// <param name="toUserId">接收方用户连接ID</param>
/// <param name="message">内容</param>
public void SendPrivateMessage(string toUserId, string message)
{
var fromUserId = Context.ConnectionId;
var toUser = OnlineUsers.FirstOrDefault(x => x.ConnectionId == toUserId);
var fromUser = OnlineUsers.FirstOrDefault(x => x.ConnectionId == fromUserId);
if (toUser != null && fromUser != null)
{
// 调用指定用户的客户端方法
Clients.Client(toUserId).receivePrivateMessage(fromUser.UserName, message);
}
else
{
//表示对方不在线
Clients.Caller.absentSubscriber();
}
}
   
/// <summary>
/// 断线时调用
/// </summary>
/// <param name="stopCalled"></param>
/// <returns></returns>
public override Task OnDisconnected(bool stopCalled)
{
var user = OnlineUsers.FirstOrDefault(u => u.ConnectionId == Context.ConnectionId);

// 判断用户是否存在,存在则删除
if (user == null) return base.OnDisconnected(stopCalled);
Clients.All.onUserDisconnected(user.ConnectionId, user.UserName); //调用客户端用户离线通知
// 删除用户
OnlineUsers.Remove(user);
return base.OnDisconnected(stopCalled);
}
}


//客户端代码：
<h2>聊天系统</h2>
<div class="container">
@using (Html.BeginForm("login", "Chat", FormMethod.Post, new { @class = "form-inline" }))
{
<label>用户Id:</label>
@Html.TextBox("userId", "", new { @class = "form-control" })
<label>用户名:</label>
@Html.TextBox("userName", "", new { @class = "form-control" })
<input type="button" id="btnLogin" value="登录" class="btn btn-default" />
}
</div>
<hr />
<div class="container">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
在线用户
</div>
<div class="panel-body">
<ul id="userList">
</ul>
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading">
聊天内容
</div>
<div class="panel-body">
<ul id="msgList" >
</ul>
</div>
<div class="panel-footer">
<label>消息To：</label> <label id="toUser"></label>
@Html.TextBox("msg", "", new { @class = "form-control form-inline" })
<input type="button" id="btnSend" value="发送" class="btn btn-default" />
</div>
</div>
</div>
</div>
@section scripts{
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="~/signalr/hubs"></script>
<script>
//用户点击（选择用户）
function selectUser(li) {
var connectionId = $(li).attr("cid");
$('#toUser').text(connectionId);
}
$(function () {
var chat = $.connection.Chat;

//刷新在线列表
chat.client.loadUser = function (allUsers) {
$('#userList').html("");
for (var i = 0; i < allUsers.length; i++) {
var li = $('<li cid="' + allUsers[i].ConnectionId+'" onclick="selectUser(this)">' + allUsers[i].UserId + ':' + allUsers[i].UserName + '</li> ');
$('#userList').append(li);
}
}
//接收消息
chat.client.receivePrivateMessage = function (from, msg) {
var li = $("<li>来自：" + from + "<br/>" + msg + "</li>");
$("#msgList").append(li);
}
 
$.connection.hub.start().done(function () {
console.log("连接完成");
//登录
$('#btnLogin').click(function () {
chat.server.login($("#userId").val(), $('#userName').val())
})


$('#btnSend').click(function () {
chat.server.sendPrivateMessage($('#toUser').text(), $('#msg').val())
})
});
})
</script>

实现

SignalR消息推送（03）

目录：