使用signalR创建聊天室。
浏览器支持Html5的情况下，SignalR使用WebSockets，当不支持时SignalR将使用其它技术来实现通讯。
界面如下：左侧包含三种聊天对象，不同的聊天对象会创建不同的对话框。
设计思路参考：http://www.blue-zero.com/Chat/
后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using MVCChart.Models;
using System.Web.Script.Serialization;
using System.Threading.Tasks; namespace MVCChart.Hubs
{
public class ChatHub : Hub
{
static List<OnlineUserInfo> UserList = new List<OnlineUserInfo>();
static List<Message> MsgList = new List<Message>();
static List<Group> GroupList = new List<Group>(); /// <summary>
/// 用户登录注册信息
/// </summary>
/// <param name="id"></param>
public void Register(string uid, string nickName)
{
var UserInfo = UserList.Where(p => p.UserId == uid).FirstOrDefault();
if (UserInfo != null)
{
// 用户已存在则直接刷新该用户信息
UserInfo.UserNickName = nickName;
UserInfo.ConnectionId = Context.ConnectionId; Clients.Others.addAllMessageToPage("","系统消息", nickName + "重连了", GetTime());
}
else
{
// 用户不存在，则添加新用户
OnlineUserInfo newUser = new OnlineUserInfo() { UserId = uid, ConnectionId = Context.ConnectionId, UserNickName = nickName };
UserList.Add(newUser);
UserInfo = newUser;
//通知用户上线
Clients.Others.addAllMessageToPage("","系统消息", nickName + "上线了!", GetTime());
} // 更新组成员
for (int i = ; i < GroupList.Count; i++)
{
var arrItems = GroupList[i].GropuItems.Split(',').ToList(); // 更新connectionId
if (arrItems.Contains(UserInfo.UserId))
{
Groups.Add(UserInfo.ConnectionId, GroupList[i].GroupId);
} // 清除空组
if (UserList.FindAll(x => arrItems.Contains(x.UserId)).Count < )
{
GroupList.RemoveAt(i);
i--;
} } // 获取用户所在组
Clients.Client(Context.ConnectionId).CurUserGroup(Common.Common.JsonConverter.Serialize(GroupList.FindAll(x => x.GropuItems.Split(',').Contains(UserInfo.UserId)).ToList()));
// 刷新用户列表
Clients.All.CurUserList(Common.Common.JsonConverter.Serialize(UserList)); Loadhistory();
} /// <summary>
/// 设置组信息
/// </summary>
/// <param name="id"></param>
public void SetGroup(string gid, string items,string gname)
{
var UserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
var GroupInfo = GroupList.Where(p => p.GroupId == gid).FirstOrDefault(); string groupId = Guid.NewGuid().ToString(); // 创建唯一组号
var arrItems = items.Split(',');
List<OnlineUserInfo> GItems = UserList.Where(p => arrItems.Contains(p.UserId)).ToList(); // 新的组员信息
string groupName = string.IsNullOrWhiteSpace(gname) ? string.Join(",", GItems.Select(x => x.UserNickName)) : gname; // 新的组名 if (GroupInfo != null)
{
var oldItems = GroupInfo.GropuItems.Split(',');
var delItems = oldItems.Except(arrItems);
var addItems = arrItems.Except(oldItems); // 组装hub组信息
foreach (var conn in UserList.Where(p => delItems.Contains(p.UserId)).Select(x => x.ConnectionId).ToArray())
{
Groups.Remove(conn, gid);
}
// 组装hub组信息
foreach (var conn in UserList.Where(p => arrItems.Contains(p.UserId)).Select(x => x.ConnectionId).ToArray())
{
Groups.Add(conn, gid);
} GroupInfo.GropuItems = items;
GroupInfo.GroupName = groupName;
// 刷新组列表
Clients.Group(gid).UpdateUserGroup(Common.Common.JsonConverter.Serialize(GroupInfo));
// 把消息推送组内（对话框标识，对话框名称，发送者标识，发送者昵称，消息，发送时间）
Clients.Group(gid).addGroupMessageToPage(GroupInfo.GroupId, GroupInfo.GroupName, "", "系统提示", UserInfo.UserNickName + "修改了组信息。", GetTime()); }
else
{
// 组装hub组信息
foreach (var conn in GItems.Select(x => x.ConnectionId).ToArray())
{
Groups.Add(conn, groupId);
} // 组不存在，则添加新组
Group newGroup = new Group() { GroupId = groupId, GroupName = groupName, GropuItems = items};
GroupList.Add(newGroup);
// 刷新组列表
Clients.Group(groupId).UpdateUserGroup(Common.Common.JsonConverter.Serialize(newGroup));
} } /// <summary>
/// 获取组成员
/// </summary>
/// <param name="gid"></param>
public void getCurGroupItems(string gid)
{
var GroupInfo = GroupList.Where(p => p.GroupId == gid).FirstOrDefault();
Clients.Client(Context.ConnectionId).setCurGroupItems(Common.Common.JsonConverter.Serialize(UserList), GroupInfo==null?"":GroupInfo.GropuItems);
} /// <summary>
/// 用户改名
/// </summary>
/// <param name="id"></param>
public void ResetName(string nickName)
{
var UserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
if (UserInfo != null)
{
// 用户已存在则直接刷新该用户信息
Clients.Others.addAllMessageToPage("","系统消息", UserInfo.UserNickName + "改名为" + nickName, GetTime());
UserInfo.UserNickName = nickName;
} // 刷新用户列表
Clients.All.CurUserList(Common.Common.JsonConverter.Serialize(UserList));
} /// <summary>
/// 用户刷新页面后，显示历史消息
/// </summary>
/// <param name="id"></param>
public void Loadhistory()
{
var CurUserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
// 遍历公共消息及私信
foreach (var msg in MsgList)
{
if (string.IsNullOrEmpty(msg.ReceiveId))
{
Clients.Client(Context.ConnectionId).addAllMessageToPage(msg.SendId, msg.SendNick, msg.Content, msg.StrTime);
}
else
{
// 消息接收者的Id和当前Id一致，则发送该消息
if (msg.ReceiveId == CurUserInfo.UserId)
{
// 把消息推送当前用户（对话框标识，对话框名称，发送者标识，发送者昵称，消息，发送时间）
Clients.Client(Context.ConnectionId).addPerMessageToPage(msg.ChatId, msg.ChatName, msg.SendId, msg.SendNick, msg.Content, msg.StrTime);
}
}
} // 遍历组消息
foreach (var g in GroupList)
{
if (g.GropuItems.Split(',').ToList().Contains(CurUserInfo.UserId))
{
foreach (var msg in g.GroupMsgs)
{
// 把消息推送当前用户（对话框标识，对话框名称，发送者标识，发送者昵称，消息，发送时间）
Clients.Client(Context.ConnectionId).addGroupMessageToPage(msg.ChatId, msg.ChatName, msg.SendId, msg.SendNick, msg.Content, msg.StrTime);
}
}
}
} /// <summary>
/// 全体群发
/// </summary>
/// <param name="name"></param>
/// <param name="message"></param>
public void SendToAll(string message)
{
// 获取发送用户的信息
var SendUserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
string curTime = GetTime();
MsgList.Add(new Message() { SendId = SendUserInfo.UserId, SendNick = SendUserInfo.UserNickName, Content = message, StrTime = curTime });
Clients.All.addAllMessageToPage(SendUserInfo.UserId, SendUserInfo.UserNickName, message, curTime);
} /// <summary>
/// 发送给指定用户（单播）
/// </summary>
/// <param name="chatId">接收用户的连接ID</param>
/// <param name="userfaceimg">接收用户的昵称</param>
/// <param name="usernickname">发送用户的昵称</param>
/// <param name="message">发送的消息</param>
public void SendSingle(string chatId, string message)
{
// 获取接收用户的信息
var ReceiveUserInfo = UserList.Where(p => p.UserId == chatId).FirstOrDefault();
// 获取发送用户的信息
var SendUserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
//如果用户不存在或用户的在线状态为False 那么提醒一下 发送用户 对方不在线
if (ReceiveUserInfo == null || SendUserInfo == null)
{
Clients.Client(Context.ConnectionId).addTipToPage("系统消息", "当前用户不在线");
}
else
{
string curTime = GetTime();
MsgList.Add(new Message() { ReceiveId = ReceiveUserInfo.UserId, ChatId = SendUserInfo.UserId, ChatName = SendUserInfo.UserNickName, SendId = SendUserInfo.UserId, SendNick = SendUserInfo.UserNickName, Content = message, StrTime = curTime });
MsgList.Add(new Message() { ReceiveId = SendUserInfo.UserId, ChatId = ReceiveUserInfo.UserId, ChatName = ReceiveUserInfo.UserNickName, SendId = SendUserInfo.UserId, SendNick = SendUserInfo.UserNickName, Content = message, StrTime = curTime }); // 把消息推送对方（对话框标识，对话框名称，发送者标识，发送者昵称，消息，发送时间）
Clients.Client(ReceiveUserInfo.ConnectionId).addPerMessageToPage(SendUserInfo.UserId, SendUserInfo.UserNickName, SendUserInfo.UserId, SendUserInfo.UserNickName, message, curTime);
// 把消息推送自己（对话框标识，对话框名称，发送者标识，发送者昵称，消息，发送时间）
Clients.Client(Context.ConnectionId).addPerMessageToPage(ReceiveUserInfo.UserId, ReceiveUserInfo.UserNickName, SendUserInfo.UserId, SendUserInfo.UserNickName, message, curTime);
}
} /// <summary>
/// 发送给指定组
/// </summary>
/// <param name="chatId">接收用户的连接ID</param>
/// <param name="userfaceimg">接收用户的昵称</param>
/// <param name="usernickname">发送用户的昵称</param>
/// <param name="message">发送的消息</param>
public void SendGroup(string chatId, string message)
{
// 获取接收用户的信息
var GroupInfo = GroupList.Where(p => p.GroupId == chatId).FirstOrDefault();
// 获取发送用户的信息
var SendUserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
//如果用户不存在或用户的在线状态为False 那么提醒一下 发送用户 对方不在线
if (GroupInfo == null)
{
Clients.Client(Context.ConnectionId).addTipToPage("系统消息", "当前组不存在");
}
else
{
var arrItems = GroupInfo.GropuItems.Split(',');
List<OnlineUserInfo> GItems = UserList.Where(p => arrItems.Contains(p.UserId)).ToList();
string curTime = GetTime();
GroupInfo.GroupMsgs.Add(new Message() { ReceiveId = GroupInfo.GroupId, ChatId = GroupInfo.GroupId, ChatName = GroupInfo.GroupName, SendId = SendUserInfo.UserId, SendNick = SendUserInfo.UserNickName, Content = message, StrTime = curTime });
// 把消息推送给组成员（对话框标识，对话框名称，发送者标识，发送者昵称，消息，发送时间）
Clients.Group(GroupInfo.GroupId).addGroupMessageToPage(GroupInfo.GroupId, GroupInfo.GroupName, SendUserInfo.UserId, SendUserInfo.UserNickName, message, curTime);
}
} /// <summary>
/// 使用者离线
/// </summary>
/// <param name="stopCalled"></param>
/// <returns></returns>
public override Task OnDisconnected(bool stopCalled)
{
var UserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
string usernickname = UserInfo.UserNickName; if (UserInfo != null)
{
//// 从组中删除
//List<Group> delGroups = new List<Group>();
//for(int i=0;i<GroupList.Count;i++)
//{
// var arrItems = GroupList[i].GropuItems.Split(',').ToList(); // if (arrItems.Contains(UserInfo.UserId))
// {
// arrItems.Remove(UserInfo.UserId);
// string curItems = string.Join(",", arrItems);
// GroupList[i].GropuItems = curItems;
// Groups.Remove(UserInfo.ConnectionId, GroupList[i].GroupId);
// } // // 删除组员不足一人的组
// if (arrItems.Count < 1)
// {
// GroupList.RemoveAt(i);
// i--;
// }
//} // 从用户列表中删除
UserList.Remove(UserInfo); Clients.All.addAllMessageToPage("","系统消息", usernickname + "离线了", GetTime());
//刷新用户列表
Clients.All.CurUserList(Common.Common.JsonConverter.Serialize(UserList));
} return base.OnDisconnected(true);
} /// <summary>
/// 使用者重新连接
/// </summary>
/// <returns></returns>
public override Task OnReconnected()
{
var UserInfo = UserList.Where(p => p.ConnectionId == Context.ConnectionId).FirstOrDefault();
if (UserInfo != null)
{
Clients.Others.addAllMessageToPage("","系统消息", UserInfo.UserNickName + "重连了", GetTime());
//刷新用户列表
Clients.All.CurUserList(Common.Common.JsonConverter.Serialize(UserList));
} return base.OnReconnected();
} /// <summary>
/// 获取当前时间
/// </summary>
/// <returns></returns>
public string GetTime()
{
return DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
}
}
}
前台：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="~/signalr/hubs"></script>
<title>signalR聊天</title>
<script src="~/Scripts/layer.js"></script>
<script src="~/Scripts/laypage.js"></script>
<link href="~/Scripts/skin/layer.css" rel="stylesheet" />
<style>
.rightmsg {
float: right;
clear: both;
margin: 5px;
text-align: right;
max-width: 70%;
}
.leftmsg {
float: left;
clear: both;
margin: 5px;
text-align: left;
max-width: 70%;
}
.rightcon {
background-color: lightpink;
text-align: left;
}
.leftcon {
background-color: lightgray;
}
#OnlineUsers ul{
padding:0;
list-style:none;
}
#OnlineUsers li {
cursor: pointer;
margin: 2px;
background-color: blue;
color: red;
/*height: 30px;*/
line-height: 30px;
}
#OnlineUsers li span {
padding: 0 15px;
width: 90%;
height: 100%;
display: inline-block;
color:white;
}
#OnlineUsers li span.curchat {
color: red;
}
#OnlineUsers li dl{
display:none;
margin:0;
}
#OnlineUsers li dt {
background-color: lightblue;
padding:0 20px;
color:black;
}
#OnlineUsers li dt.curchat {
color: red;
}
#OnlineUsers li dt:hover {
color:red;
}
#OnlineUsers dt {
height: 30px;
}
.container {
float: left;
border: 1px solid black;
height: 500px;
width: 500px;
position: absolute;
background-color: lightblue;
}
.container ul {
float: left;
width: 90%;
height: 90%;
overflow-y: auto;
}
/*创建组弹窗样式*/
.fl {
float: left;
}
.fr {
float: right;
}
.choose {
padding: 8px 43px;
position: relative;
}
.choose .hint.erro, .choose .help-block {
top: 30px;
left: 0;
text-align: left;
padding: 5px 10px;
}
.choose h2 {
height: 20px;
font-size: 16px;
font-weight: normal;
line-height: 20px;
color: #333;
padding: 12px 8px;
}
.choose .name-list {
position: relative;
overflow: hidden;
}
.name-list h3 {
font-weight: normal;
font-size: 14px;
line-height: 20px;
padding: 20px 0 15px;
}
.name-list .name-list-l, .name-list .name-list-r {
width: 183px;
text-align: left;
border: 1px solid #d8d8d8;
background: #fff;
}
.name-list-l p, .name-list-r p {
height: 29px;
font-size: 14px;
line-height: 29px;
text-align: center;
color: #6b6b6b;
border-bottom: 1px solid #d8d8d8;
background-color: #f6f6f6;
}
.name-list ul {
height: 160px;
overflow: auto;
margin: 6px 0;
}
.name-list ul li {
height: 25px;
padding: 0 20px;
font-size: 12px;
line-height: 25px;
color: #666;
margin-bottom: 3px;
cursor: pointer;
}
.name-list ul li.active {
color: #333;
background-color: #eeeeee;
}
.name-list-r {
position: relative;
}
.name-list-r .order {
position: absolute;
top: 2px;
right: 5px;
}
.name-list-r .Object-list {
height: 248px;
overflow: auto;
}
.name-list-r span {
display: block;
padding: 5px 10px;
}
.name-btn {
position: absolute;
top: 35px;
left: 208px;
width: 86px;
}
.name-btn span {
display: block;
cursor: pointer;
height: 27px;
line-height: 27px;
text-align: center;
color: #ed9334;
border: 1px solid #ed9334;
border-radius: 2px;
margin-bottom: 10px;
}
</style>
<script src="~/Scripts/jquery.cookie.js"></script>
<script>
// 表情
var emoji = {
"[最右]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c8/lxhzuiyou_thumb.gif",
"[泪流满面]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/64/lxhtongku_thumb.gif",
"[江南style]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/67/gangnamstyle_thumb.gif",
"[偷乐]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/fa/lxhtouxiao_thumb.gif",
"[加油啊]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/03/lxhjiayou_thumb.gif",
"[doge]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/doge_thumb.gif",
"[喵喵]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/4a/mm_thumb.gif",
"[笑cry]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/34/xiaoku_thumb.gif",
"[xkl转圈]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/xklzhuanquan_thumb.gif",
"[微笑]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_thumb.gif",
"[嘻嘻]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/tootha_thumb.gif",
"[哈哈]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6a/laugh.gif",
"[可爱]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/14/tza_thumb.gif",
"[可怜]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/kl_thumb.gif",
"[挖鼻]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0b/wabi_thumb.gif",
"[吃惊]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f4/cj_thumb.gif",
"[害羞]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/shamea_thumb.gif",
"[挤眼]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c3/zy_thumb.gif",
"[闭嘴]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/29/bz_thumb.gif",
"[鄙视]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/71/bs2_thumb.gif",
"[爱你]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/lovea_thumb.gif",
"[泪]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_thumb.gif",
"[偷笑]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_thumb.gif",
"[亲亲]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/8f/qq_thumb.gif",
"[生病]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/b6/sb_thumb.gif",
"[太开心]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/mb_thumb.gif",
"[白眼]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/landeln_thumb.gif",
"[右哼哼]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/98/yhh_thumb.gif",
"[左哼哼]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/zhh_thumb.gif",
"[嘘]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a6/x_thumb.gif",
"[衰]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/af/cry.gif",
"[委屈]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/73/wq_thumb.gif",
"[吐]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9e/t_thumb.gif",
"[哈欠]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/cc/haqianv2_thumb.gif",
"[抱抱]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/27/bba_thumb.gif",
"[怒]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/7c/angrya_thumb.gif",
"[疑问]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/yw_thumb.gif",
"[馋嘴]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/a5/cza_thumb.gif",
"[拜拜]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/70/88_thumb.gif",
"[思考]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e9/sk_thumb.gif",
"[汗]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/24/sweata_thumb.gif",
"[困]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/kunv2_thumb.gif",
"[睡]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/96/huangliansj_thumb.gif",
"[钱]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/90/money_thumb.gif",
"[失望]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/0c/sw_thumb.gif",
"[酷]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/cool_thumb.gif",
"[色]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/20/huanglianse_thumb.gif",
"[哼]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/49/hatea_thumb.gif",
"[鼓掌]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/36/gza_thumb.gif",
"[晕]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/dizzya_thumb.gif",
"[悲伤]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/1a/bs_thumb.gif",
"[泪]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9d/sada_thumb.gif",
"[偷笑]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_thumb.gif",
"[抓狂]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/62/crazya_thumb.gif",
"[黑线]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/91/h_thumb.gif",
"[阴险]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6d/yx_thumb.gif",
"[怒骂]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/60/numav2_thumb.gif",
"[互粉]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/89/hufen_thumb.gif",
"[心]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/hearta_thumb.gif",
"[伤心]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/ea/unheart.gif",
"[猪头]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/58/pig.gif",
"[熊猫]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/panda_thumb.gif",
"[兔子]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/81/rabbit_thumb.gif",
"[ok]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d6/ok_thumb.gif",
"[耶]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/ye_thumb.gif",
"[good]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d8/good_thumb.gif",
"[no]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/ae/buyao_org.gif",
"[赞]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d0/z2_thumb.gif",
"[来]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/come_thumb.gif",
"[弱]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d8/sad_thumb.gif",
"[草泥马]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/7a/shenshou_thumb.gif",
"[神马]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/60/horse2_thumb.gif",
"[囧]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/15/j_thumb.gif",
"[浮云]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/bc/fuyun_thumb.gif",
"[给力]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/1e/geiliv2_thumb.gif",
"[围观]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/f2/wg_thumb.gif",
"[威武]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/70/vw_thumb.gif",
"[奥特曼]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/bc/otm_thumb.gif",
"[礼物]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/c4/liwu_thumb.gif",
"[钟]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d3/clock_thumb.gif",
"[话筒]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/9f/huatongv2_thumb.gif",
"[蜡烛]": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/d9/lazhuv2_thumb.gif"
};
var isopenEmoji = !1;
var index_emoji = 0;
$(function () {
init_initEmoji();
});
function init_initEmoji() {
var b, a = "";
for (b in emoji) a += "<span class='item_emoji' id='emoji_" + b + "' onclick='click_emojiItems(id);' title='" + b + "'><img class='imgitem_emoji' src='" + emoji[b] + "' /></span>";
$(".emoji").click(function () {
isopenEmoji ? (isopenEmoji = !1, layer.close(index_emoji)) : (isopenEmoji = !0, index_emoji = layer.tips("<div class='list_emoji'>" + a + "</div>", ".emoji", {
tips: [1, "#fff"],
time: 0,
area: "auto",
maxWidth: 405,
shift: 5
}))
})
}
function click_emojiItems(a) {
$("#message").insertAtCaret(a.split("_")[1])
layer.close(index_emoji)
}
function chg_emoji(a, b) {
var g, h, c = a.match(/\[.*?]/gi),
d = "",
e = "",
f = "";
if (c) {
for (g = 0; g < c.length; g++) {
-1 != c[g].indexOf(".") ? -1 != c[g].indexOf(".wav") ? (e = c[g].replace("[", "").replace("]", ""), e && (a = a.replace(c[g], '<audio controls="controls"><source src="Voice/' + $.trim(e) + '"></audio>'))) : -1 != c[g].indexOf(".rar") ? (f = c[g].replace("[", "").replace("]", ""), f && (h = f.split("|"), a = a.replace(c[g], '<a href="Files/' + h[2] + '" target="_blank">' + '<img style="float:left;" src="IMG/rarico.png" />' + '<div style="float:left;margin-left:5px;font-size:18px;">' + '<div style="margin-bottom:10px;">' + h[0] + '</div><div style="color:orange;">' + h[1] + "kb</div></div></a>"))) : (d = c[g].replace("[", "").replace("]", ""), d && (a = a.replace(c[g], "<a href='IMG/Upload/" + b + "/" + d + "' target='_blank'><img onerror='errpic(this)' style='max-width:380px;' src='IMG/Upload/" + b + "/" + d + "' /></a>"))) : a = a.replace(c[g], "<img src='" + emoji[c[g]] + "' />");
}
}
return a
}
$.fn.extend({
insertAtCaret: function (a) {
var c, d, e, b = $(this)[0];
document.selection ? (this.focus(), sel = document.selection.createRange(), sel.text = a, this.focus()) : b.selectionStart || "0" == b.selectionStart ? (c = b.selectionStart, d = b.selectionEnd, e = b.scrollTop, b.value = b.value.substring(0, c) + a + b.value.substring(d, b.value.length), this.focus(), b.selectionStart = c + a.length, b.selectionEnd = c + a.length, b.scrollTop = e) : (this.value += a, this.focus())
}
})
</script>
<script>
// 图片
var isopenImg = !1;
var index_img = 0;
var uploadPic = [];
$(function () {
$("#a_uploadimg").click(function () {
init_uploadPic()
})
});
function init_uploadPic() {
isopenImg ? (isopenImg = !1, layer.close(index_img)) : (isopenImg = !0, index_img = layer.tips("<div id='uploadimg_list' style='height:250px;'></div><button id='uploadimg_upload' class='btn btn-default' type='button'><span style='color:orange;margin-right:5px;' class='glyphicon glyphicon-picture'></span><span class='sp_uploadtxt'>上传</span></button><input id='uploading_file' type='file' style='display:none;' /><div id='uploadimg_pages' style='float:right;margin-top:5px;'></div>", "#a_uploadimg", {
tips: [1, "#fff"],
time: 0,
area: ["390px", "300px"],
shift: 5
}), bind_imglist(1), bind_imgpage(), isBeforeUpload = !1, $("#uploadimg_upload").click(function () {
isBeforeUpload = !1, document.getElementById("uploading_file").click()
}), $("#uploading_file").change(function () {
var a, b, c;
if (!isBeforeUpload) if (a = document.getElementById("uploading_file").files[0], b = a.size / 1024, c = new FormData, c.append("upload_file", a), -1 != a.name.toLowerCase().indexOf(".gif")) {
if (b > 500) return isBeforeUpload = !0, $("#uploading_file").val(""), layer.alert("gif图片上传失败,当前最大限制500kb", {
icon: 5,
title: "上传结果"
}), !1;
imgupload_file(c)
} else b > 500 ? ($("#uploadimg_upload").attr("disabled", !0), $(".sp_uploadtxt").html("上传中..."), lrz(this.files[0], {
width: 500
}, function (a) {
imgupload_base64(a.base64)
})) : imgupload_file(c)
}))
}
function imgupload_file(a) {
$.ajax({
url: "Act/h_main.ashx?act=uploadImg",
type: "POST",
data: a,
cache: !1,
contentType: !1,
processData: !1,
success: function (a) {
var b, c, d;
if ($("#uploadimg_upload").attr("disabled", !1), $(".sp_uploadtxt").text("上传"), isBeforeUpload = !0, $("#uploading_file").val(""), b = $.parseJSON(a), c = !1, "Fail" == b.state) return layer.alert(b.msg, {
icon: 5,
title: "上传结果"
}), void 0;
for (d = 0; d < uploadPic.length; d++) if (uploadPic[d] == b.msg) {
c = !0;
break
}
c || uploadPic.splice(0, 0, b.msg), bind_imglist(1), bind_imgpage()
}
})
}
function imgupload_base64(a) {
$("#uploadimg_upload").attr("disabled", !0), $(".sp_uploadtxt").html("上传中..."), $.post("Act/h_main.ashx?act=uploadPhoto", {
base64str: a
}, function (a) {
var b, c, d;
if ($("#uploadimg_upload").attr("disabled", !1), $(".sp_uploadtxt").text("上传"), isBeforeUpload = !0, $("#uploading_file").val(""), b = $.parseJSON(a), c = !1, "Fail" == b.state) return layer.alert(b.msg, {
icon: 5,
title: "上传结果"
}), void 0;
for (d = 0; d < uploadPic.length; d++) if (uploadPic[d] == b.msg) {
c = !0;
break
}
c || uploadPic.splice(0, 0, b.msg), bind_imglist(1), bind_imgpage()
})
}
function bind_imglist(a) {
var d, b = "",
c = "";
for (d = 10 * (a - 1) ; 10 * a > d; d++) uploadPic[d] && (c = uploadPic[d].replace(".", "_"), b += "<div style='height:64px;float:left;margin:25px 5px;'><img id='uploadimgitem_" + uploadPic[d].replace(".", "_") + "'onclick='click_selimg(id);' onmouseover='mouseover_zoomimg(id);' onmouseout='mouseout_closezoom();' style='height:64px;width:64px;' src='IMG/Upload/" + $.cookie("user_id") + "/" + uploadPic[d] + "' /></div>");
$("#uploadimg_list").html(b)
}
function fun_getuploadimg() {
$.getJSON("Act/h_main.ashx", {
act: "getUploadImg"
}, function (a) {
-1 != a.code && (uploadPic = a.msg)
})
}
function bind_imgpage() {
laypage({
cont: "uploadimg_pages",
pages: Math.ceil(uploadPic.length / 10),
first: !1,
groups: 5,
last: !1,
prev: !1,
next: !1,
jump: function (a, b) {
b || bind_imglist(a.curr)
}
})
}
</script>
<script>
// 涂鸦
$(function () {
$("#a_doodle").click(function () {
init_doodle()
})
});
function init_doodle() {
index_doodle = layer.open({
type: 2,
title: !1,
closeBtn: 0,
shadeClose: !0,
skin: "layui-layer-rim",
area: ["756px", "415px"],
content: ["Doodle", "no"]
})
}
</script>
<script>
// 昵称
var NickName = {
FName: ["美丽的", "帅气的", "善良的", "高大的", "傲娇的", "猥琐的", "富有的"],
LName: ["青蛙", "花猫", "金鱼", "菊花", "领导", "苹果", "老师"]
};
// 随机获取用户名
function fun_getnickname(a) {
if ($.cookie("user_id") && $.cookie("user_nickname") && a) {
$("#inp_nickname").val($.cookie("user_nickname"));
$("#inp_userid").val($.cookie("user_id"));
}
else {
var timestamp = Date.parse(new Date());
var randomName = NickName.FName[parseInt(Math.random() * NickName.FName.length)] + NickName.LName[parseInt(Math.random(NickName.LName.length) * NickName.LName.length)];
if (randomName) {
$.cookie("user_id") || $.cookie("user_id", timestamp, {
expires: 365
});
$.cookie("user_nickname", randomName, {
expires: 365
});
$("#inp_nickname").val(randomName);
$("#inp_userid").val($.cookie("user_id"));
}
else {
alert("昵称获取失败！");
}
}
}
</script>
</head>
<body>
<div style="float:left;width:30%;margin-left:10px;">
<div class="input-group">
<span class="input-group-addon" style="color:orange;">你的昵称</span>
<input id="inp_nickname" type="text" maxlength="10">
<span id="btn_getnick" style="background-color: orange;"><a href="#">重置</a></span>
<input id="inp_userid" type="hidden" value="" />
<input id="inp_userconn" type="hidden" value="" />
<input id="to_chatid" type="hidden" value="" />
<input id="to_chattype" type="hidden" value="" />
<input id="to_usernick" type="hidden" value="" />
</div>
<div>
<textarea style="width:90%;height:80px;margin-top:10px;" id="message"></textarea>
<div style="margin-top:4px;height:30px;">
<a class="emoji" style="margin-right:10px;" data-toggle="popover" data-placement="top" title="表情">
<img height="20" width="20" style="outline-width:40px;" class="img_emoji" src="http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/5c/huanglianwx_thumb.gif">
</a>
<a id="a_uploadimg" style="margin-right:10px;" title="上传图片">
<img height="20" width="20" style="padding-top:4px;" src="http://www.blue-zero.com/Chat/IMG/uploadpic.png">
</a>
<a id="a_uploadfile" style="margin-right:10px;" title="上传文件">
<img height="20" width="20" src="http://www.blue-zero.com/Chat/IMG/uploadfile.png">
</a>
<a id="a_doodle" style="margin-right:10px;" title="涂鸦">
<img height="20" width="20" src="http://www.blue-zero.com/Chat/IMG/doodle.png">
</a>
<a style="cursor:default;margin-right:10px;">|</a>
<a id="a_getphoto" style="margin-right:10px;" title="拍照">
<img height="20" width="20" src="http://www.blue-zero.com/Chat/IMG/camera.png">
</a>
<a id="a_record" style="margin-right:10px;" title="录音">
<img height="20" width="20" src="http://www.blue-zero.com/Chat/IMG/record.png">
</a>
<input type="button" id="sendmessage" value="发送" style="height:25px;" />
<input type="button" value="建组" style="height:25px;" class="showcreatgroup" data-groupid="" data-groupname="" />
</div>
</div>
<div id="OnlineUsers">
<ul class="nav">
<li onclick="javascript:setMessageObj('','',0)" data-chatid=''>
<span class ="userli_0">所有人</spanclass>
</li>
<li>
<span class="userli_1">在线用户</span>
<dl class="onlineuser">
<dt>aa</dt>
<dt>bb</dt>
</dl>
</li>
<li>
<span class="userli_2">所在群组</span>
<dl class="ingroups">
<dt>aa</dt>
<dt>bb</dt>
</dl>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
//二级导航下拉
$(".nav li span").each(function () {
$(this).click(function () {
$(this).addClass("on");
$(this).next("dl").stop(false, true).slideToggle(200);
});
});
});
</script>
</div>
<div id="contentmsg" style ="position: absolute; width: 500px; height: 500px;margin:10px 0 0 500px;">
<div class="container" style="top:0px;left:0px;" data-chatid=''>
<div style="height:25px;background-color:blue;color:red;">
公共聊天窗口
<input type="button" value="清除" style="float:right;" onclick="ChearAllMsg('')"/>
</div>
<ul class="discussion" data-chatid=''></ul>
</div>
</div>
<div class="popup" id="popEditGroup" style="display:none;">
<div style="margin:10px auto;text-align:center;">
组名:<input id="editgroupname" type="text" value="" />
</div>
<div class="choose">
<div class="name-list name-list-1 choose-list">
<div class="name-list-l name-list-l-1 choose-list-l fl">
<p>可选组员</p>
@*<div class="search">
<input type="text" maxlength="30"><i onclick="searchLU()"></i>
</div>*@
<ul id="addUnSelClass">
@*<li class="tableEllipsis" value="1" title="aa">aa</li>
<li class="tableEllipsis" value="2" title="bb">bb</li>*@
</ul>
</div>
<div class="name-btn">
<span class="hi btn-right">></span>
<span class="hi btn-left"><</span>
<span class="hi btn-right2">»</span>
<span class="hi btn-left2">«</span>
</div>
<div class="name-list-r name-list-r-1 choose-list-r fr">
<p>已选组员</p>
<span class="help-block" id="TeachSelect" style="display:none"><b></b>Please choose a class.</span>
<ul id="addSelClass"></ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
//Date.prototype.format = function (format) {
// var o = {
// "M+": this.getMonth() + 1, //month
// "d+": this.getDate(), //day
// "h+": this.getHours(), //hour
// "m+": this.getMinutes(), //minute
// "s+": this.getSeconds(), //second
// "q+": Math.floor((this.getMonth() + 3) / 3), //quarter
// "S": this.getMilliseconds() //millisecond
// }
// if (/(y+)/.test(format)) {
// format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
// }
// for (var k in o) {
// if (new RegExp("(" + k + ")").test(format)) {
// format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
// }
// }
// return format;
//}
$(function () {
var chat = $.connection.chatHub;
// 添加公共消息
chat.client.addAllMessageToPage = function (sendid,sendname, message, sendtime) {
// 自己消息在右；他人消息在左
if (sendid == $.cookie("user_id")) {
$('.discussion').append('<li class=\"rightmsg\"><strong>' + htmlEncode(sendname)
+ '</strong>: ' + sendtime + ' ▼<div class=\"rightcon\">' + chg_emoji(htmlEncode(message)) + '</div></li>');
}
else {
$('.discussion').append('<li class=\"leftmsg\"><strong>' + htmlEncode(sendname)
+ '</strong>: ' + sendtime + ' ▼<div class=\"leftcon\">' + chg_emoji(htmlEncode(message)) + '</div></li>');
}
};
// 添加私信消息
chat.client.addPerMessageToPage = function (chatid, chatname, sendid, sendname, message, sendtime) {
var priul = $(".private[data-chatid = '" + chatid + "']");
if (priul.length <= 0) {
// 追加私信聊天窗口
var allul = $('.private').length + 1;
var elePosition = "top:" + allul * 10 + "px;left:" + allul * 10 + "px;";
var dialoghtml = "";
dialoghtml += "<div class='chatname' style='height:25px;background-color:blue;color:red;' >";
dialoghtml += "<span class='showname'>组：" + chatname + "</span>";
dialoghtml += "<input type='button' value='关闭' style='float:right;' onclick='CloseThisDlg(\"" + chatid + "\")'/>";
dialoghtml += "<input type='button' value='清除' style='float:right;' onclick='ChearAllMsg(\"" + chatid + "\")'/></div>"
$('#contentmsg').append('<div class="container" style="' + elePosition + '" data-chatid="' + chatid + '"><ul class="private" data-chatid="' + chatid + '"></ul></div>');
$(".container[data-chatid = '" + chatid + "']").prepend(dialoghtml);
//$(".container[data-chatid = '" + chatid + "']").prepend("<div style='height:25px;background-color:blue;color:red;'>与" + chatname + "的聊天窗口<input type='button' value='关闭' style='float:right;' onclick='CloseThisDlg(\"" + chatid + "\")'/><input type='button' value='清除' style='float:right;' onclick='ChearAllMsg(\"" + chatid + "\")'/></div>");
priul = $(".private[data-chatid = '" + chatid + "']");
RefreshShow();
}
else {
// 更新窗口名
$(".container[data-chatid = '" + chatid + "'] .showname").text("私：" + chatname);
}
// 自己消息在右；他人消息在左
if (sendid == $.cookie("user_id")) {
priul.append('<li class=\"rightmsg\"><strong>' + htmlEncode(sendname)
+ '</strong>: ' + sendtime + ' ▼<div class=\"rightcon\">' + chg_emoji(htmlEncode(message)) + '</div></li>');
}
else {
priul.append('<li class=\"leftmsg\"><strong>' + htmlEncode(sendname)
+ '</strong>: ' + sendtime + ' ▼<div class=\"leftcon\">' + chg_emoji(htmlEncode(message)) + '</div></li>');
}
};
// 添加群组消息（对话框标识，对话框名称，发送者标识，发送者昵称，消息，发送时间）
chat.client.addGroupMessageToPage = function (chatid, chatname, sendid, sendname, message, sendtime) {
var priul = $(".private[data-chatid = '" + chatid + "']");
if (priul.length <= 0) {
// 追加群组聊天窗口
var allul = $('.private').length + 1;
var elePosition = "top:" + allul * 10 + "px;left:" + allul * 10 + "px;";
var dialoghtml = "";
dialoghtml += "<div class='chatname' style='height:25px;background-color:blue;color:red;' >";
dialoghtml += "<span class='showname'>组：" + chatname + "</span>";
dialoghtml += "<input type='button' value='关闭' style='float:right;' onclick='CloseThisDlg(\"" + chatid + "\")'/>";
dialoghtml += "<input type='button' value='清除' style='float:right;' onclick='ChearAllMsg(\"" + chatid + "\")'/>"
dialoghtml += "<input type='button' value='修改' style='float:right;' class='showcreatgroup' data-groupid='" + chatid + "' data-groupname='" + chatname + "' /></div>"
$('#contentmsg').append('<div class="container" style="' + elePosition + '" data-chatid="' + chatid + '"><ul class="private" data-chatid="' + chatid + '"></ul></div>');
$(".container[data-chatid = '" + chatid + "']").prepend(dialoghtml);
priul = $(".private[data-chatid = '" + chatid + "']");
RefreshShow();
}
else {
// 更新组名
$(".container[data-chatid = '" + chatid + "'] .showname").text("组：" + chatname);
$(".container[data-chatid = '" + chatid + "'] .showcreatgroup").attr("data-groupname", chatname);
}
// 自己消息在右；他人消息在左
if (sendid == $.cookie("user_id")) {
priul.append('<li class=\"rightmsg\"><strong>' + htmlEncode(sendname)
+ '</strong>: ' + sendtime + ' ▼<div class=\"rightcon\">' + chg_emoji(htmlEncode(message)) + '</div></li>');
}
else {
priul.append('<li class=\"leftmsg\"><strong>' + htmlEncode(sendname)
+ '</strong>: ' + sendtime + ' ▼<div class=\"leftcon\">' + chg_emoji(htmlEncode(message)) + '</div></li>');
}
};
// 加载在线用户列表
chat.client.CurUserList = function (UserList) {
// 解析Json
var userdata = eval("(" + UserList + ")");
// 拼接当前用户
var html = "";
for (var i = 0; i < userdata.length; i++) {
// 生成聊天对象列表
if (userdata[i].UserId != $("#inp_userid").val()) {
html += "<dt onclick=\"javascript:setMessageObj('" + userdata[i].UserId + "','" + userdata[i].UserNickName + "',1)\" data-chatid='" + userdata[i].UserId + "'>" + userdata[i].UserNickName + "</dt>";
}
}
//更新页面用户列表
$(".onlineuser").html(html);
var tochatid = $("#to_chatid").val();
$(".onlineuser dt[data-chatid='" + tochatid + "']").addClass("curchat");
};
// 加载所在群组列表
chat.client.CurUserGroup = function (GroupList) {
// 解析Json
var groupdata = eval("(" + GroupList + ")");
// 拼接当前组
var html = "";
for (var i = 0; i < groupdata.length; i++) {
// 生成组列表
html += "<dt onclick=\"javascript:setMessageObj('" + groupdata[i].GroupId + "','" + groupdata[i].GroupName + "',2)\" data-chatid='" + groupdata[i].GroupId + "'>" + groupdata[i].GroupName + "</dt>";
}
//更新页面用户列表
$(".ingroups").html(html);
var tochatid = $("#to_chatid").val();
$(".ingroups dt[data-chatid='" + tochatid + "']").addClass("curchat");
};
// 更新群组列表
chat.client.UpdateUserGroup = function (GroupList) {
// 解析Json
var groupdata = eval("(" + GroupList + ")");
// 拼接当前组
var html = "";
// 生成组列表
html += "<dt onclick=\"javascript:setMessageObj('" + groupdata.GroupId + "','" + groupdata.GroupName + "',2)\" data-chatid='" + groupdata.GroupId + "'>" + groupdata.GroupName + "</dt>";
//更新页面用户列表
$(".ingroups dt[data-chatid='" + groupdata.GroupId + "']").remove();
$(".ingroups").prepend(html);
var tochatid = $("#to_chatid").val();
$(".ingroups dt[data-chatid='" + tochatid + "']").addClass("curchat");
};
// 用户编辑组时设置已选成员
chat.client.setCurGroupItems = function (UserList, groupitems) {
// 解析Json
var userdata = eval("(" + UserList + ")");
var arrItems = groupitems.split(',');
// 更新设置组员弹窗的组员列表
var lefthtml = "";
var righthtml = "";
for (var i = 0; i < userdata.length; i++) {
// 生成聊天对象列表
if (userdata[i].UserId != $("#inp_userid").val()) {
if ($.inArray(userdata[i].UserId,arrItems)>0) {
righthtml += "<li value='" + userdata[i].UserId + "' class='tableEllipsis' title='" + userdata[i].UserNickName + "'>" + userdata[i].UserNickName + "</li>";
}
else {
lefthtml += "<li value='" + userdata[i].UserId + "' class='tableEllipsis' title='" + userdata[i].UserNickName + "'>" + userdata[i].UserNickName + "</li>";
}
}
}
$("#addUnSelClass").html(lefthtml);
$("#addSelClass").html(righthtml);
};
$("#btn_getnick").click(function () {
fun_getnickname(!1)
// 调用hub的改名方法.
chat.server.resetName($('#inp_nickname').val());
});
$("#inp_nickname").change(function () {
$.trim($("#inp_nickname").val()) && ($.cookie("user_nickname", $.trim($("#inp_nickname").val()), {
expires: 365
}));
// 调用hub的改名方法.
chat.server.resetName($('#inp_nickname').val());
});
// 为消息输入框设置初始焦点。
$('#message').focus();
// 启动连接
$.connection.hub.start().done(function () {
// 获取昵称和标识
fun_getnickname(!0);
// 调用hub的登录方法.
chat.server.register($('#inp_userid').val(), $('#inp_nickname').val());
// 点击发送消息
$('#sendmessage').click(function () {
if ($('#message').val().length > 0) {
var to_chatid = $("#to_chatid").val(); // 接收者连接号
var to_chattype = $("#to_chattype").val(); // 消息类型
//var inp_userid = $("#inp_userid").val(); // 接收者昵称
if (to_chattype == 1) {
// 调用hub的私聊方法.
chat.server.sendSingle(to_chatid, $('#message').val());
}
else if (to_chattype == 2) {
// 调用hub的组聊方法.
chat.server.sendGroup(to_chatid, $('#message').val());
}
else {
// 调用hub的群发方法.
chat.server.sendToAll($('#message').val());
}
// 清空内容，重置焦点
$('#message').val('').focus();
}
});
});
$("body").on('click', '.showcreatgroup', function (event) {
var groupid = $(this).attr("data-groupid");
var groupname = $(this).attr("data-groupname");
$("#editgroupname").val(groupname);
// 调用hub的查询组员方法.
chat.server.getCurGroupItems(groupid);
layer.open({
type: 1,
title: '编辑组员',
btn: ['确定', '取消'],
btnAlign: 'c',
area: ['600px', '400px'],
content: $('#popEditGroup'),
yes: function (index) {
var rightli = $('.choose-list-r li');
var groupitems = $.trim($("#inp_userid").val());
if (rightli.length > 0) {
$.each(rightli, function (key, value) {
groupitems += "," + $.trim($(value).attr('value'));
});
}
// 调用hub的建组方法.
chat.server.setGroup(groupid, groupitems, $("#editgroupname").val());
layer.close(index);
},
cancel: function (index) {
//alert("fou");
},
});
});
// 显示编辑组弹窗
$(".showcreatgroup1").click(function () {
var groupid = $(this).attr("data-groupid");
var groupname = $(this).attr("data-groupname");
$("#editgroupname").val(groupname);
// 调用hub的查询组员方法.
chat.server.getCurGroupItems(groupid);
layer.open({
type: 1,
title: '编辑组员',
btn: ['确定', '取消'],
btnAlign: 'c',
area: ['650px', '360px'],
content: $('#popEditGroup'),
yes: function (index) {
var rightli = $('.choose-list-r li');
var groupitems = $.trim($("#inp_userid").val());
if (rightli.length > 0) {
$.each(rightli, function (key, value) {
groupitems += "," + $.trim($(value).attr('value'));
});
}
// 调用hub的建组方法.
chat.server.setGroup(groupid, groupitems, $("#editgroupname").val());
layer.close(index);
},
cancel: function (index) {
//alert("fou");
},
});
});
});
// 这个可选功能使html-encodes消息显示在页面上。
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
};
// 切换聊天对象
function setMessageObj(chatid, nick, type) {
$("#to_chatid").val(chatid);
$("#to_usernick").val(nick);
$("#to_chattype").val(type); // 0:群发，1：私聊，2：组聊
// 更新用户列表及聊天窗口的选中状态
RefreshShow();
};
// 更新用户列表及聊天窗口的选中状态
function RefreshShow() {
var curchatid = $("#to_chatid").val();
var curchattype = $("#to_chattype").val();
$("#OnlineUsers li span").removeClass("curchat");
$("#OnlineUsers li dt").removeClass("curchat");
$("#OnlineUsers .userli_" + curchattype).addClass("curchat");
$("#OnlineUsers dt[data-chatid='" + curchatid + "']").addClass("curchat");
// 聊天窗口前置
$(".container").css("z-index", "1");
$(".container[data-chatid='" + curchatid + "']").css("z-index", "5");
};
// 清除历史消息
function ChearAllMsg(chatid) {
if (chatid) {
$(".private[data-chatid = '" + chatid + "']").html("");
}
else {
$(".discussion[data-chatid = '" + chatid + "']").html("");
}
};
// 关闭当前窗口
function CloseThisDlg(chatid) {
if (chatid) {
$(".container[data-chatid = '" + chatid + "']").remove();
}
};
// 组用户设置界面
$(function () {
$("body").on('click', '.name-list ul li', function (event) {
$(this).parent("ul").children("li").removeClass('active');
$(this).addClass('active');
$("#TeachSelect").css("display", "none");
$("#classMsg").html("");
});
$("body").on('click', '.choose-list .btn-right:visible', function (event) {
var left = $(this).closest('.choose-list').find('.choose-list-l');
var right = $(this).closest('.choose-list').find('.choose-list-r');
var li = left.find('li.active');
var exist = false;
$.each(right.find("ul").find("li"), function (key, value) {
if ($(value).attr('value') == li.attr('value')) {
exist = true;
}
});
if (!exist) {
if (li.length == 1) {
li.remove();
right.find('ul').prepend('<li value=' + li.attr('value') + ' class="tableEllipsis" title=' + li.text() + '>' + li.html() + '</li>')
} else {
alert("Please choose one.")
}
$("#TeachSelect").css("display", "none");
$("#classMsg").html("");
}
});
//双击
$("body").on('dblclick', '.choose-list', function (event) {
var left = $(this).closest('.choose-list').find('.choose-list-l');
var right = $(this).closest('.choose-list').find('.choose-list-r');
var li = left.find('li.active');
if (li.length == 1) {
$(".btn-right").click();
} else {
}
$("#TeachSelect").css("display", "none");
$("#classMsg").html("");
});
$("body").on('click', '.choose-list .btn-left:visible', function (event) {
var left = $(this).closest('.choose-list').find('.choose-list-l');
var right = $(this).closest('.choose-list').find('.choose-list-r');
var li = right.find('li.active');
if (li.length == 1) {
li.remove();
left.find('ul').prepend('<li value=' + li.attr('value') + ' class="tableEllipsis " title=' + li.text() + '>' + li.html() + '</li>')
} else {
alert("Please choose one.")
}
$("#TeachSelect").css("display", "none");
$("#classMsg").html("");
});
//双击
$("body").on('dblclick', '.choose-list', function (event) {
var left = $(this).closest('.choose-list').find('.choose-list-l');
var right = $(this).closest('.choose-list').find('.choose-list-r');
var li = right.find('li.active');
if (li.length == 1) {
$(".btn-left").click();
} else {
}
$("#TeachSelect").css("display", "none");
$("#classMsg").html("");
});
$("body").on('click', '.choose-list .btn-right2', function (event) {
var left = $(this).closest(".choose-list").find(".choose-list-l").find("ul");
var right = $(this).closest(".choose-list").find(".choose-list-r").find("ul");
right.append(left.html());
left.html('');
$("#TeachSelect").css("display", "none");
$("#classMsg").html("");
});
$("body").on('click', '.choose-list .btn-left2', function (event) {
var left = $(this).closest(".choose-list").find(".choose-list-l").find("ul");
var right = $(this).closest(".choose-list").find(".choose-list-r").find("ul");
left.append(right.html());
right.html('');
$("#TeachSelect").css("display", "none");
$("#classMsg").html("");
});
});
</script>
github:完善后将提供
使用signalR创建聊天室。的更多相关文章
- [Asp.net 开发系列之SignalR篇]专题三：使用SignalR实现聊天室的功能
一.引言 在前一篇文章中,我向大家介绍了如何实现实现端对端聊天的功能的,在这一篇文章中将像大家如何使用SignalR实现群聊这样的功能. 二.实现思路 要想实现群聊的功能,首先我们需要创建一个房间,然 ...
- SignalR 开始聊天室之旅
首先明确需求,我现在有很多个直播间,每个直播间内需要存在一个聊天室,每个聊天室内可以存在很多人聊天,当然,只有登陆系统的会员才能聊天,没有登陆的,干看着吧! 根据以上需求,可以做出三个简单的页面:登陆 ...
- 史上最全面的SignalR系列教程-6、SignalR 实现聊天室
1.概述 通过前面几篇文章对SignalR的详细介绍.我们知道Asp.net SignalR是微软为实现实时通信的一个类库.一般情况下,SignalR会使用JavaScript的长轮询(long po ...
- Asp.Net SignalR - 简单聊天室实现
简单聊天室 使用持久链接类我们就可以做一些即时通讯的应用了,我使用Group做了一个简单的聊天室,先上图技术细节下面再讲 可以加入聊天室.创建聊天室.发送消息,下面就说说我是如何通过Group做出来的 ...
- Workerman创建聊天室实例
// 标记是全局启动 define('GLOBAL_START', 1); require_once __DIR__ . '/Workerman/Connection.php'; require_on ...
- 用SignalR 2.0开发客服系统[系列2:实现聊天室]
前言 交流群:195866844 上周发表了 用SignalR 2.0开发客服系统[系列1:实现群发通讯] 这篇文章,得到了很多帮助和鼓励,小弟在此真心的感谢大家的支持.. 这周继续系列2,实现聊天室 ...
- 使用ASP.NET SignalR实现一个简单的聊天室
前言 距离我写上一篇博客已经又过了一年半载了,时间过得很快,一眨眼,就把人变得沧桑了许多.青春是短暂的,知识是无限的.要用短暂的青春,去学无穷无尽的知识,及时当勉励,岁月不待人.今天写个随笔小结记录一 ...
- 第二个 SignalR，可以私聊的聊天室
一.简介 上一次,我们写了个简单的聊天室,接下来,我们来整一个可以私聊的聊天室. SignalR 官方 API 文档 需求简单分析: 1.私聊功能,那么要记录用户名或用户ID,用于发送消息. 2.怎么 ...
- android asmack 注册 登陆 聊天 多人聊天室 文件传输
XMPP协议简介 XMPP协议(Extensible Messaging and PresenceProtocol,可扩展消息处理现场协议)是一种基于XML的协议,目的是为了解决及时通信标准而提出来的 ...
随机推荐
- 编写Windows Service 备忘
项目需求要做一个定时扫表,将按条件查询到的数据插入或者更新到另一个数据表的需求,老大要求让用window service来做 因为以前没有做过,把这次的经历写出来.作为备忘. 1.什么是windows ...
- MVC 过滤器1
ASP.NET MVC 过滤器(一) 前言 前面的篇幅中,了解到了控制器的生成的过程以及在生成的过程中的各种注入点,按照常理来说篇幅应该到了讲解控制器内部的执行过程以及模型绑定.验证这些知识了.但是呢 ...
- select省市联动选择城市 asp.net mvc4
本文在 http://www.cnblogs.com/darrenji/p/3606703.html(感谢博主的分享)基础上加入全国各省市,从文件中读取全国省市县,组成省市联动的选择标签 在Model ...
- 【推荐】推荐一本学习ExtJS4的好书《ExtJS江湖》（含pdf电子书和源代码下载地址）
最近在网上游逛,突然发现了一本介绍ExtJS 4框架的好书,书名叫<ExtJS江湖>,作者是大漠穷秋,个人感觉非常不错,书写得很幽默,很具有可读性,在此推荐给各位. 以下是这本书的介绍: ...
- 应该熟知的表单js应用（select、label、submit）
前言 首先需要清楚的是,表单传数据方式,有POST和GET的方式,通过name和对应的value值提交到后台.通过name,可以用对象属性调用的方式获取对应的input标签,如: document. ...
- Android系统源码导入到eclipse
1.把eclipse工程配置文件复制到android源码根目录下 cp development/ide/eclipse/.classpath ./ 2. 在android源码根目录下新建文 ...
- 通过VS2010命令提示窗口创建强命名文件时报错问题
问题描述详见图 解决方案 00000005意思是Access Denied(即拒绝访问). 原因是:Program Files(x86)目录对一般用户和未提升权限的管理员是只读的. 所以只要赋予Use ...
- [原]Escape From the iOS Sanbox on Jailbreak Device
just my thinking, 3 ways to escape from sandbox on jailbreak device, to do file copying or execute s ...
- 由浅入深shell脚本训练
由浅入深shell脚本训练 最近一直在学习Shell,以前一直觉得Shell语法很难,不好学,现在总算有一些收获了.其实Shell脚本就是一堆linux命令的集合,把脚本里每一步的命令搞懂是什么意思, ...
- UIKit类结构图