使用.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();
}
}
这里只提供了一个大体的思路和不太清晰的代码，代码是从我在项目中直接拷贝出来的，没有经过修改，直接拷贝的话是不能用的。
这样的数据库设计存在一个很大的弊端：当数据量过大时，查询的速度会明显变慢，导致用户体验过差。
如果你有更好的设计思路，请不吝赐教！
使用.net和jquery实现一对一的网页聊天系统相关推荐
- HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
- php鼠标经过显示文本,jQuery实现鼠标单击网页文字后在文本框显示的方法
这篇文章主要介绍了jQuery实现鼠标单击网页文字后在文本框显示的方法,可实现鼠标点击上方文字即可在下方勾选处文本框显示对应文字的效果,涉及jQuery鼠标事件及链式操作的相关技巧,需要的朋友可以参考 ...
- html二级页面内容滑动,jQuery+CSS实现的网页二级下滑菜单效果
本文实例讲述了jQuery+CSS实现的网页二级下滑菜单效果.分享给大家供大家参考.具体如下: 这是一款简洁型的 jQuery+CSS网页二级下滑菜单,练手写的,有需要的自己拿去美化吧,基本的动画效果 ...
- jquery/js实现一个网页同时调用多个倒计时(最新的)
jquery/js实现一个网页同时调用多个倒计时(最新的) 最近需要网页添加多个倒计时. 查阅网络,基本上都是千遍一律的不好用. 自己按需写了个.希望对大家有用. 有用请赞一个哦! //js //js ...
- 使用jQuery 快速高效制作 网页特效
使用jQuery 快速高效制作 网页特效 第一章:JavaScript基础 DOM:document object model 文档对 ...
- jQuery CSS3中国象棋网页代码
下载地址 jQuery CSS3中国象棋网页代码,不是小游戏,只是网页样式. dd:
- 漂亮大气的html导航页面,jquery+css打造位于网页顶部漂亮黄色下拉导航
jquery+css打造位于网页顶部漂亮黄色下拉导航 - www.webdm.cn $(document).ready(function(){ $(".btn-slide").cl ...
- html5网页中加入播放器,10款jquery+html5实现的网页播放器
1.3D版HTML5模拟衣服拖拽动画效果 这是一款3D版HTML5模拟衣服拖拽动画效果源码,是一款非常具有创意而且很好玩的HTML5动画.运行本例源码可见衣服布料呈3D环形显示,可以用鼠标左键来拖拽衣 ...
- php下拉菜单指示图标如何添加,jquery实现很酷的网页顶部图标下拉菜单效果
本文实例讲述了jquery实现很酷的网页顶部图标下拉菜单效果.分享给大家供大家参考.具体如下: 兼容IE和火狐的顶部菜单栏,带图标的图文菜单,还有右上角的下拉导航效果,一个演示包括了两种菜单,都是很实 ...
最新文章
- java升序问题_JAVA并发理解之重排序问题
- 科普丨深度学习 vs 概率图模型 vs 逻辑学
- 如何在Chatbot中应用深度学习
- LwIP 之二 网络接口 netif（ethernetif.c、netif.c）
- 安装java环境linux和windows
- RabbitMQ(2) 一般介绍
- 什么是域名服务器(DNS)
- leetcode 贪心_贪心算法：给我最好的，现在就要！
- 通俗理解“Schmidt正交化”和“正交矩阵” 此博文包含图片 (2015-05-19 09:50:47) 施密特正交化在空间上是不断建立垂直于原次维空间的新向量的过程。 如图β2垂直于β1（1维）
- 【气动学】基于matlab内弹道【含Matlab源码 057期】
- aplay 源码分析
- Xposed框架详解
- 『杭电1166』敌兵布阵
- “乌龙学院”的是是非非
- sentos chrony服务器安装配置与简易实验
- Unity3D开发游戏有没有流行的框架
- 2019-08-12 纪中NOIP模拟赛B组
- Live软件开发面面谈——权限
- 太爽啦，GitHub网站1S变VS Code
- jQuery - Chaining