使用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 = 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:完善后将提供