NET 项目多人沟通记录

效果图

气泡相关CSS链接

http://user.qzone.qq.com/873113580/blog/1490278262

Demo下载

https://share.weiyun.com/1eadc6a423092f1a3f7d610b441a0e86



涉及功能：
1，@人功能，
     通过正则匹配格式：@[code-name]
    拆分得到code和Name 存入单条聊天记录对应的@人列表中
    核心代码：
    function Sendmessage() {
        if ($.trim($('#txtContext').textbox('getValue')) == "") {
            $.messager.alert("操作提示", "请填写发送内容。", "info", function () {
                $('#txtContext').next('span').find('textarea').focus();
            });
            $(".panel-tool-close").hide();
            return false;
        }
        var param = {};
        param.flag = new Date().getTime();
        param.TProblemID = $("#ProblemID").val();
        param.Content = encodeURIComponent($.trim($("#txtContext").textbox('getValue')));
        if ($.trim($("#txtContext").textbox('getValue')).match(/@@\[[A-Za-z]\d{6}-.{2,10}\]/g) == null) {
            param.ATUser = "";
        }
        else {
            param.ATUser = encodeURIComponent($.trim($("#txtContext").textbox('getValue')).match(/@@\[[A-Za-z]\d{6}-.{2,10}\]/g));
        }

        $.post("/OnlineChart/SendTProblemChart", param, function (data) {
            $("#txtContext").textbox('setValue', "");
            if (data.Result == false) {
                $.messager.alert("操作提示", data.Msg, "info");
            }
        });
        return true;
    }

  后台：
  public JsonResult SendTProblemChart()
        {
            var loginUser = WebCommon.GetLoginUser();

            UserInfoBusiness userInfoBusiness = new UserInfoBusiness();
            TProblemChartBusiness chartbll = new TProblemChartBusiness();
            ResultJson jr = new ResultJson();
            string TProblemID = Request.Form["TProblemID"];
            string Content = Server.UrlDecode(Request.Form["Content"]);
            string ATUser = Server.UrlDecode(Request.Form["ATUser"]);


            #region 主问题
            TProblemChart chart = new TProblemChart();
            chart.ID = Guid.NewGuid();
            chart.TProblemID = new Guid(TProblemID);
            chart.Type = Convert.ToInt32(DBStateEnum.文字).ToString();
            chart.CreateUserID = new Guid(loginUser.UserID);
            chart.CreateTime = DateTime.Now;
            chart.Content = Content;
            #endregion

            #region @人列表
            //得到这个问题下@的人员列表
            var soruceAtUserList = new TProblemChartBusiness().GetPeopleList("", WebCommon.GetLoginUser().UserID, TProblemID);
            //@人列表
            List<TProblemChartAT> atList = new List<TProblemChartAT>();
            if (string.IsNullOrEmpty(ATUser) == false)
            {
                string[] adUsers = ATUser.Replace("@[", "").Replace("]", "").Split(',');
                foreach (var u in adUsers)
                {
                    if (string.IsNullOrEmpty(u))
                    {
                        continue;
                    }
                    string[] users = u.Split('-');
                    //如果这个人是在允许@的人里面-code和name必须一致
                    var user = soruceAtUserList.FirstOrDefault(x => x.AdCode.Trim().ToUpper() == users[0].Trim().ToUpper() && x.UserName.Trim().ToUpper() == users[1].Trim().ToUpper());
                    if (user == null)
                    {
                        //不是就跳过
                        continue;
                    }
                    //判断在待添加列表是否存在，不存在则添加,以及不能@自己
                    if (atList.Count(x => x.ReceiverID == user.UserID) == 0 && chart.CreateUserID != user.UserID)
                    {
                        TProblemChartAT atUser = new TProblemChartAT();
                        atUser.ID = Guid.NewGuid();
                        atUser.ReceiverID = user.UserID;
                        atUser.TProblemChartID = chart.ID;
                        atList.Add(atUser);
                    }
                }

            }
            #endregion


            jr = chartbll.AddProblemChart(chart, atList, loginUser);
            return Json(jr, JsonRequestBehavior.AllowGet);
        }

     被@人特殊显示标识 核心代码
    //得到这个问题下@的人员列表
                var soruceAtUserList = new TProblemChartBusiness().GetPeopleList("", WebCommon.GetLoginUser().UserID, problemid);
                for (int i = 0; i < list.Count; i++)
                {
                    foreach (var item in soruceAtUserList)
                    {
                        string fl = "@[" + item.AdCode + "-" + item.UserName + "]";
                        if (list[i].Content.LastIndexOf(fl) > -1)
                        {
                            list[i].Content = list[i].Content.Replace(fl, "<span style=\"color:blue;text-decoration:underline; cursor:pointer;\">" + fl + "</span>");
                        }
                        else
                        {
                            list[i].Content = Server.HtmlEncode(list[i].Content);
                        }

                    }
                }

2，进来的时候分页获取历史记录
     初始化获取10条最新的记录，并且把最大的ID保留 以便做下次查找的时候查ID小于最大记录的消息
    通过递归循环调用历史消息记录每页10条
  <div id="mainMsg">
                    @*总页数*@
                    <input type="hidden" id="pageNumber" value="" />
                    @*页大小*@
                    <input type="hidden" id="pageSize" value="10" />
                    @*当前页码*@
                    <input type="hidden" id="pageIndex" value="1" />
                    @*最大的ID*@
                    <input type="hidden" id="maxID" value="" />
                    <div id="topMsg" style="color:blue;text-decoration:underline; cursor:pointer;"></div>
</div>


//加载历史
    function LoadingMsg() {
        var param = {};
        param.flag = new Date().getTime();
        param.TProblemID = $("#ProblemID").val();
        param.pageSize = $("#pageSize").val();
        param.pageIndex = $("#pageIndex").val();
        param.maxID = $("#maxID").val();
        $.post("/OnlineChart/GetMessageList", param, function (data) {
            if (data.maxID == 0) {
                return;
            }
            if ($("#maxID").val() == "") {
                $("#maxID").val(data.maxID);
            }
            //总页数
            $("#pageNumber").val(data.totalPage);

            for (var i = 0; i < data.rows.length; i++) {
                var date = eval('new ' + data.rows[i].CreateTime.substr(1, data.rows[i].CreateTime.length - 2));
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                var hh = date.getHours();
                var mm = date.getMinutes();
                var ss = date.getSeconds();
                var dt = year + "-" + (month < 10 ? ("0" + month) : month) + "-" + (day < 10 ? ("0" + day) : day) + " " + (hh < 10 ? ("0" + hh) : hh) + ":" + (mm < 10 ? ("0" + mm) : mm) + ":" + (ss < 10 ? ("0" + ss) : ss);
                var html = "";
                if ($("#CurrentUserAdCode").val() == data.rows[i].ADcode) {
                    html = "<div>";

                    html += "<table style=\"float:right;\">";
                    html += "<tr><td colspan=\"2\" style=\"text-align:right;\">" + dt + "</td></tr>"
                    html += "<tr>";

                   
                    html += "<td>"

                    html += " <table>";


                    html += " <tr>";
                
                    html += "<td> <div class=\"rightbubble\">" + data.rows[i].Content + "</div>  </td>";
                    html += " <td class=\"tdtop\"><div class=\"right\"></div></td>"
                    html += "  </tr>";

                    html += " </table>";

                    html += " </td>";

                    html += " <td class=\"tdtop\">";
                    html += " <div class=\"head\">" + data.rows[i].CreateName + "<br />[" + data.rows[i].ADcode + "]</div>"
                    html += "</td>";


                    html += " </tr>";

                    html += " </table>";
                    html += "  <div style=\"clear:both;\"></div>";
                    html += " </div>";
                 
                }
                else {
                    html ="<div>";

                    html+="<table>";
                    html += "<tr><td colspan=\"2\">" + dt + "</td></tr>"
                    html+="<tr>";

                    html+=" <td class=\"tdtop\">";
                    html += " <div class=\"head\">" + data.rows[i].CreateName + "<br />[" + data.rows[i].ADcode + "]</div>"
                    html+="</td>";

                    html += "<td>"

                    html+=" <table>";
         
                                  
                    html+=" <tr>";
                    html+=" <td class=\"tdtop\"><div class=\"left\"></div></td>"
                    html += "<td> <div class=\"leftbubble\">" + data.rows[i].Content + "</div>  </td>";
                    html+="  </tr>";   
                   
                    html+=" </table>";   

                    html += " </td>";

                    html += " </tr>";

                    html+=" </table>";   
                    html += " </div>";
                                           
                }
                $("#topMsg").after(html);
                var nh = parseInt($("#mainMsg").height());
                var wh = parseInt($("#mainMsg").parent().height());
                if (nh > wh) {
                    $("#mainMsg").parent().scrollTop(nh - wh + 100);
                }
            }
            var pindex = (parseInt($("#pageIndex").val()) + 1);
            if (pindex <= parseInt($("#pageNumber").val())) {
                $("#pageIndex").val(pindex)
                LoadingMsg();
            }

        });
    }


public List<V_TProblemChart> PaginationList(ZemtProblemManagementDBContext dbContext,int pageIndex, int pageSize,string problemid,string maxID, out int totalCount, out int totalPage)
        {
            List<SqlParameter> sqlplist = new List<SqlParameter>();
            string sql = "select * from V_TProblemChart where TProblemID=@TProblemID";
            string sqlCount = "select Count=Count(ID) from V_TProblemChart where TProblemID=@TProblemID";
            sqlplist.Add(new SqlParameter("@TProblemID", problemid));
            if (string.IsNullOrEmpty(maxID) == false)
            {
                sql += " and OrderID<=@OrderID";
                sqlCount += " and OrderID<=@OrderID";
                sqlplist.Add(new SqlParameter("@OrderID", maxID));
            }
            sql = "select top " + pageSize + " * from (" + sql + ")   as a  where RowNumber > " + (pageSize * (pageIndex - 1));
            totalCount = dbContext.Database.SqlQuery<CountEntity>(sqlCount, sqlplist.ToArray()).Single().Count;
            sqlplist = SqlParameterUtil.GetCopyList(sqlplist);
            totalPage = (int)Math.Ceiling((totalCount * 0.1) / (pageSize * 0.1));
            return dbContext.Database.SqlQuery<V_TProblemChart>(sql, sqlplist.ToArray()).ToList();
        }


3，通过TImer循环调用 本次最大ID之外的最新数据 添加到最后
  //消息列表
    $(function () {
        $("#pageSize").val("10");
        $("#pageIndex").val("1");
        $("#maxID").val("");
        $("#pageNumber").val("");
        LoadingMsg();
        LoadingNewMsg();
    })
 //加载最新
    function LoadingNewMsg() {
        setInterval(function () {
            if ($("#maxID").val() != "") {
                var param = {};
                param.flag = new Date().getTime();
                param.TProblemID = $("#ProblemID").val();
                param.maxID = $("#maxID").val();
                $.post("/OnlineChart/GetMessageNewList", param, function (data) {
                    if (data.maxID != 0) {
                        $("#maxID").val(data.maxID);
                    }
                    for (var i = 0; i < data.rows.length; i++) {
                        var date = eval('new ' + data.rows[i].CreateTime.substr(1, data.rows[i].CreateTime.length - 2));
                        var year = date.getFullYear();
                        var month = date.getMonth() + 1;
                        var day = date.getDate();
                        var hh = date.getHours();
                        var mm = date.getMinutes();
                        var ss = date.getSeconds();
                        var dt = year + "-" + (month < 10 ? ("0" + month) : month) + "-" + (day < 10 ? ("0" + day) : day) + " " + (hh < 10 ? ("0" + hh) : hh) + ":" + (mm < 10 ? ("0" + mm) : mm) + ":" + (ss < 10 ? ("0" + ss) : ss);
                        var html = "";
                        if ($("#CurrentUserAdCode").val() == data.rows[i].ADcode) {
                            html = "<div>";

                            html += "<table style=\"float:right;\">";

                            html += "<tr><td colspan=\"2\" style=\"text-align:right;\">" + dt + "</td></tr>"

                            html += "<tr>";


                            html += "<td>"

                            html += " <table>";


                            html += " <tr>";

                            html += "<td> <div class=\"rightbubble\">" + data.rows[i].Content + "</div>  </td>";
                            html += " <td class=\"tdtop\"><div class=\"right\"></div></td>"
                            html += "  </tr>";

                            html += " </table>";

                            html += " </td>";

                            html += " <td class=\"tdtop\">";
                            html += " <div class=\"head\">" + data.rows[i].CreateName + "<br />[" + data.rows[i].ADcode + "]</div>"
                            html += "</td>";


                            html += " </tr>";

                            html += " </table>";
                            html += "  <div style=\"clear:both;\"></div>";
                          
                            html += " </div>";

                        }
                        else {
                            html = "<div>";

                            html += "<table>";
                            html += "<tr><td colspan=\"2\">" + dt + "</td></tr>"
                            html += "<tr>";

                            html += " <td class=\"tdtop\">";
                            html += " <div class=\"head\">" + data.rows[i].CreateName + "<br />[" + data.rows[i].ADcode + "]</div>"
                            html += "</td>";

                            html += "<td>"

                            html += " <table>";


                            html += " <tr>";
                            html += " <td class=\"tdtop\"><div class=\"left\"></div></td>"
                            html += "<td> <div class=\"leftbubble\">" + data.rows[i].Content + "</div>  </td>";
                            html += "  </tr>";

                            html += " </table>";

                            html += " </td>";

                            html += " </tr>";

                            html += " </table>";
                            html += " </div>";

                        }

                        $("#mainMsg").append(html);
                        var nh = parseInt($("#mainMsg").height());
                        var wh = parseInt($("#mainMsg").parent().height());
                        if (nh > wh) {
                            $("#mainMsg").parent().scrollTop(nh - wh + 100);
                        }
                    }

                });
            }
        }, 1000);
    }

 public List<V_TProblemChart> GetNewMsg(ZemtProblemManagementDBContext dbContext, int maxID, string problemid)
        {
            List<SqlParameter> sqlplist = new List<SqlParameter>();
            string sql = "select * from V_TProblemChart where TProblemID=@TProblemID and [OrderID]>@OrderID order by [OrderID] desc";
            sqlplist.Add(new SqlParameter("@TProblemID", problemid));
            sqlplist.Add(new SqlParameter("@OrderID", maxID));
            return dbContext.Database.SqlQuery<V_TProblemChart>(sql, sqlplist.ToArray()).ToList();
        }