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

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

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();

}

}

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

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

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