使用.net和jquery实现一对一的网页聊天系统

来源：互联网发布：vue.js if else 编辑：程序博客网时间：2024/05/21 07:50

一、首先介绍一下网页聊天系统的设计思路：

1）用户1和用户2进行网页聊天，我们将聊天数据存入数据库中，数据库的设计如下：

其中ID为一条聊天记录的id,YHID1为发送方，YHID2为接收方，XXSJ为消息时间，XXNR为消息内容，COLOR为字体颜色，SIZE为字体大小，SFJS为标记消息是否已被接收。

2）两人聊天，自己为发送方，对方为接收方。当用户进入聊天窗口时，从数据库中查询以时间为顺序的前10条数据（YHID1或者YHID2为自己的ID的数据）；当发送方发出消息时，将该消息插入数据库，同时从数据库查询以时间为顺序的前10条数据。

3）消息记录页面为了采用ajax页面无刷新更新数据。

二、然后介绍如何控制数据的收发：

接收消息函数：

function receiveMessage() {            $.ajax({                url: "services/WebService.asmx/ReceiveMess",                type: 'post',                contentType: "application/json;charset=utf-8",                dataType: 'json',                data:"{YHID:"+$('#H_YHID1').val()+",TOP:"+'10'+"}",                async: true,                success: function (response) {                    $('#chat_info').html(response.d);                },                            });        }

发送消息函数：

<strong><span style="font-size:14px;">function sendMessage() {            clearInterval(receiveMessage);            var mess = $('#message').val();            var f_size = $('#ztdx').find("option:selected").text();            var f_color = $('#ztys').find("option:selected").text();            if (mess.trim() == "") { alert("请输入消息内容"); }            else {                 $('#btn_send').val("请稍等");                   $.ajax({                    url: "services/WebService.asmx/SendMess",                    type: 'post',                    contentType: "application/json;charset=utf-8",                    dataType: 'json',                    data: "{mess:'" + mess + "',size:" + f_size+",color:'"+f_color+"'}",                    async: true,                    success: function (response) {                        if (response.d == "SendOk") {                            $('#message').val("");                            $('#btn_send').val("发送");                            $('#btn_send').button();                        }                    },                                   });</span>               <span style="font-size:14px;"> setInterval(receiveMessage,1000);            }        }</span></strong>

<strong><span style="font-size:14px;"></span></strong>

在document.ready函数中执行以下函数：

$(function(){

      ///////////////////////////////接收消息
     receiveMessage();
     setInterval(receiveMessage, 1000);//每秒刷新
     ///////////////////////////////发送消息

      $('#btn_send').click(function () {
                sendMessage();
            });

})

在后台的WebService.asmx函数中有两个方法，用来响应ajax执行后台动作，读取/写入数据库信息

发送消息：

public string SendMess(string mess,int size,string color)
        {

            Model.T_JSTX model = new Model.T_JSTX();//消息对象实例化
            model.YHID1 = Session["YHID1"].ToString();//发送方
            model.YHID2 = Session["YHID2"].ToString();//接收方
            model.XXNR = mess;//消息
            model.XXSJ = DateTime.Now;//事件
            model.SFJS = false;//初始设置为未接收
            model.SIZE = size;//字体大小
            model.COLOR = color;//字体颜色
            BLL.B_JSTX bll = new BLL.B_JSTX();
            if (bll.Add(model))
            {
                return "SendOk";
            }
            else
            {
                return "SendError";
            }

}

接收消息：

public string ReceiveMess(string YHID,string TOP)
        {

            BLL.B_JSTX bll = new BLL.B_JSTX();
            DataSet ds = bll.Get(YHID, Convert.ToInt32(TOP));//获取前TOP条数据
            List<Model.T_JSTX> list = new List<Model.T_JSTX>();
            string YHID1=Session["YHID1"].ToString();//用戶ID
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                Model.T_JSTX model=new Model.T_JSTX();
                int ID = (int)ds.Tables[0].Rows[i]["ID"];
                model.YHID1 =(string) ds.Tables[0].Rows[i]["YHID1"];
                model.YHID2 = (string)ds.Tables[0].Rows[i]["YHID2"];
                model.XXNR = (string)ds.Tables[0].Rows[i]["XXNR"];
                model.XXSJ = (DateTime)ds.Tables[0].Rows[i]["XXSJ"];
                model.SIZE = (int)ds.Tables[0].Rows[i]["SIZE"];
                model.COLOR = (string)ds.Tables[0].Rows[i]["COLOR"];
                list.Add(model);
                if (YHID1 == model.YHID2.Trim())//如果用戶是接收方
                {
                    bll.UpdataSFJS(ID);//写回，设置是否接收为True
                }

            }
            StringBuilder sb = new StringBuilder();

//下面的for语句是用来匹配字符实现表情显示的
            for (int i = 0; i < list.Count; i++)
            {
                Regex reg = new Regex(@"\[.*?\]", RegexOptions.IgnoreCase);

                MatchCollection regs = reg.Matches(list[i].XXNR);
                if (regs.Count!=0)
                {
                    foreach (Match match in regs)
                    {
                        for (int j = 0; j < str.Length; j++)
                        {
                            if ("["+str[j]+"]" == match.Value) {
                                list[i].XXNR = list[i].XXNR.Replace(match.Value, "<img src='images/mr/"+j+".gif'" + "/>");
                            }

                        }

                    }

                }
               //通过判断接收方还是发送方显示不同的颜色
                if (list[i].YHID1.Trim() == Session["YHID1"].Tostring())
                {
                    sb.Insert(0, "<div><div style='color:blue'>"+ list[i].YHID1 + "对" + list[i].YHID2 + "说：" + list[i].XXSJ + "</div><div style='word-wrap:break-word;word-break:break-all;color:"+list[i].COLOR+";font-size:"+list[i].SIZE+"pt'>" + list[i].XXNR + "</div></div>");
                }
                else
                {
                    sb.Insert(0, "<div><div style='color:green'>" + list[i].YHID1 + "对" + list[i].YHID2 + "说：" + list[i].XXSJ + "</div><div style='word-wrap:break-word;word-break:break-all;color:" + list[i].COLOR + ";font-size:"+list[i].SIZE+"pt'>" + list[i].XXNR + "</div></div>");
                }

            }

            return sb.ToString();

}
}

这里只提供了一个大体的思路和不太清晰的代码，代码是从我在项目中直接拷贝出来的，没有经过修改，直接拷贝的话是不能用的。

这样的数据库设计存在一个很大的弊端：当数据量过大时，查询的速度会明显变慢，导致用户体验过差。

如果你有更好的设计思路，请不吝赐教！

0 0