浏览器支持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 = 0; 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 < 1) { 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-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], { 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;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;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="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-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; 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:完善后将提供