一、首先介绍一下网页聊天系统的设计思路:
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();
}
}
这里只提供了一个大体的思路和不太清晰的代码,代码是从我在项目中直接拷贝出来的,没有经过修改,直接拷贝的话是不能用的。
这样的数据库设计存在一个很大的弊端:当数据量过大时,查询的速度会明显变慢,导致用户体验过差。
如果你有更好的设计思路,请不吝赐教!