前言
交流群:195866844
目录:
用SignalR 2.0开发客服系统[系列1:实现群发通讯]
用SignalR 2.0开发客服系统[系列2:实现聊天室]
真的很感谢大家的支持,今天发表系列3,我们的正菜马上就要来了..
开发环境
开发工具:VS2013 旗舰版
数据库:未用
操作系统:WIN7旗舰版
正文开始
首先我们来看看实现的效果:
所用到的方法和类(重要):
其实细心的朋友应该早就发现了,在上篇博客我们就已经用到了这个方法:
代码语言：javascript复制//调用指定连接对象的JS
Clients.Client(连接对象的唯一标识).addMessage("");
//调用指定集合中所有连接对象的JS
Clients.Clients(集合).addMessage("")下面上代码:
首先实体类:
很简单,只有一个用户类
代码语言：javascript复制using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace SignalRTest
{
/// <summary>
/// 用户类
/// </summary>
public class UserInfo
{
[Key]
public string ContextID { get; set; }
public string Name { get; set; }
}
}Hub的源码(同样,注释很全,我就不单独的拿出来讲了):
代码语言：javascript复制using Microsoft.AspNet.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Threading.Tasks;
using Microsoft.AspNet.SignalR.Hubs;
using Newtonsoft.Json;
namespace SignalRTest
{
[HubName("ptopHub")]
public class PTPHub : Hub
{
public static List<UserInfo> UserList = new List<UserInfo>();
//public static List<RoomInfo> RoomList = new List<RoomInfo>();
/// <summary>
/// 重写链接事件
/// </summary>
/// <returns></returns>
public override Task OnConnected()
{
// 查询用户。
var user = UserList.SingleOrDefault(u => u.ContextID == Context.ConnectionId);
//判断用户是否存在,否则添加进集合
if (user == null)
{
user = new UserInfo()
{
Name = "",
ContextID = Context.ConnectionId
};
UserList.Add(user);
}
return base.OnConnected();
}
/// <summary>
/// 获取用户名和自己的唯一编码
/// </summary>
/// <param name="name"></param>
public void GetName(string name)
{
// 查询用户。
var user = UserList.SingleOrDefault(u => u.ContextID == Context.ConnectionId);
if (user != null)
{
user.Name = name;
Clients.Client(Context.ConnectionId).showID(Context.ConnectionId);
}
GetUserList();
}
/// <summary>
/// 重写断开的事件
/// </summary>
/// <returns></returns>
public override Task OnDisconnected()
{
var user =UserList.Where(u => u.ContextID == Context.ConnectionId).FirstOrDefault();
//判断用户是否存在,存在则删除
if (user != null)
{
//删除用户
UserList.Remove(user);
}
//更新所有用户的列表
GetUserList();
return base.OnDisconnected();
}
/// <summary>
/// 更新所有用户的在线列表
/// </summary>
private void GetUserList()
{
var itme = from a in UserList
select new { a.Name, a.ContextID };
string jsondata = JsonConvert.SerializeObject(itme.ToList());
Clients.All.getUserlist(jsondata);
}
/// <summary>
/// 发送消息
/// </summary>
/// <param name="contextID"></param>
/// <param name="Message"></param>
public void SendMessage(string contextID, string Message)
{
var user = UserList.Where(u => u.ContextID == contextID).FirstOrDefault();
//判断用户是否存在,存在则发送
if (user != null)
{
//给指定用户发送,把自己的ID传过去
Clients.Client(contextID).addMessage(Message " " DateTime.Now,Context.ConnectionId);
//给自己发送,把用户的ID传给自己
Clients.Client(Context.ConnectionId).addMessage(Message " " DateTime.Now, contextID);
}
else
{
Clients.Client(Context.ConnectionId).showMessage("该用户已离线");
}
}
}
}前端HTML JS(上次有朋友吐槽JS没注释 - -,实在不好意思,呃..这次加上了..):
代码语言：javascript复制<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>点对点聊天</title>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.0.0.min.js"></script>
<!--这里要注意,这是虚拟目录,也就是你在OWIN Startup中注册的地址-->
<script src="signalr/hubs"></script>
<script type="text/javascript">
var Clients = [];
$(function () {
chat = $.connection.ptopHub;
//注册提示信息方法
chat.client.showMessage = function (Message) {
alert(Message);
}
//注册显示信息的方法
chat.client.addMessage = function (Message,contextID) {
if ($.inArray(contextID,Clients) == -1) {
AddRoom(contextID);
}
$("#" contextID).find("ul").each(function () {
$(this).append('<li>' Message '</li>')
})
}
//注册查询房间列表的方法
chat.client.getUserlist = function (data) {
if (data) {
var jsondata = $.parseJSON(data);
$("#roomlist").html(" ");
for (var i = 0; i < jsondata.length; i ) {
var html = ' <li>用户名:' jsondata[i].Name '<button roomname="' jsondata[i].ContextID '" onclick="PtoPSendStart(this)">与他聊天</button></li>';
$("#roomlist").append(html);
}
}
}
//注册显示个人信息的方法
chat.client.showID = function (data) {
$("#ConID").html(data);
Clients.push(data);
}
// 获取用户名称。
$('#username').html(prompt('请输入您的名称:', ''));
//连接成功后获取自己的信息
$.connection.hub.start().done(function () {
chat.server.getName($('#username').html());
});
});
//开始聊天
function PtoPSendStart(data) {
var val = $(data).attr('roomname');
AddRoom(val);
}
//显示聊天窗口
function AddRoom(val) {
Clients.push(val)
var html = '<div style="float:left; margin-left:30px; border:double" id="' val '" roomname="' val '"><button onclick="RemoveRoom(this)">退出</button>
' val '房间
聊天记录如下:<ul>
</ul>
<input type="text" /> <button onclick="SendMessage(this)">发送</button>
</div>'
$("#RoomList").append(html);
}
//发送消息
function SendMessage(data) {
var message = $(data).prev().val();
var room = $(data).parent();
var username = $("#username").html();
message = username ":" message;
var roomname = $(room).attr("roomname");
chat.server.sendMessage(roomname, message);
}
</script>
</head>
<body>
<div>
<div>名称:<p id="username"></p></div>
<div>用户唯一编码:<p id="ConID"></p></div>
</div>
<div style="float:left;border:double">
<div>在线用户列表</div>
<ul id="roomlist"></ul>
</div>
<div id="RoomList">
</div>
</body>
</html>至此就完成了基本的点对点聊天的功能,真心很感谢大家的支持,希望能对大家有帮助.
我的Q :524808775 加我请注明来源 - -,我们共同讨论.
我会坚持写完本系列..
