Ajax B/S 聊天工具txt文件保存

时间:2023-03-08 18:16:46
Ajax B/S 聊天工具txt文件保存

打算做一个两个或多个网页之间交流的功能,思路是多个页面聊天的内容存放到一个文件里,每个页面都有提交聊天功能,当提交聊天信息时保存到上面那个文件里,

在每个也页面里放一个定时器,每秒钟获取聊天文件里的记录信息与自己当前的信息是否一致,如果大于自己的信息数量,说明了有别人提交信息了,那么就把聊天记录的信息追加到自己的浏览器里。

js起到了很重要的部分, 定时器,信息计数器都用到了js。

需要一个ajaxserver页面,一个聊天记录txt文件。

当客户端通过ajax提交聊天信息时,ajaxserver里读取提交的信息,保存到文件里,不用多说了,我用的是c#的File类AppendAllText方法,这个方法简单,同时将系统的聊天计数器加1。

通过脚本做个定时器settimeout 递归调用本身1秒钟取服务器信息,当发生差异时获取服务器聊天信息。

重要的部分都在js里,用prototype={}方式扩展Talk,ajax调用引用的是jquery框架。

js部分

Talk = function ()
{
}
Talk.prototype =
{
AjaxPagePath: "AjaxHandler.ashx",
ShowDivID: "divTalkList",
CrrentCount: ,
UserName:null,
  //最加聊天信息
AppendTalk: function (divid, meg)
{
document.getElementById(divid).innerHTML += meg;
},
  //获取服务器信息
GetTalk: function (talk)
{
if (talk == undefined)
{
talk = this;
}
$.ajax({
type: "POST",
url: talk.AjaxPagePath,
data: { "op": "GetTalk", "Count": talk.CrrentCount, "Date": new Date() },
      //提交服务器时,提交的信息要不同不然ajaxserver接受不到,所以用了时间作为入参。
success: function (m)
{
var ms = m.split('@');
talk.AppendTalk(talk.ShowDivID, ms[]);
talk.CrrentCount = ms[];
}
});
},
///刷新方法
RefreshTalk: function ()
{
var t = this;
$.ajax({
type: "POST",
url: t.AjaxPagePath,
data: { "op": "RefreshTalk", "Count": t.CrrentCount, "Date": new Date() },
success: function (m)
{
if (m == "")
{
t.GetTalk(t); }
}
});
setTimeout(function ()
{
t.RefreshTalk();
}, );
},
   //提交信息
SubmitTalk: function ()
{
var meg = $("#txtInput").val();
var t = this;
$.ajax({
type: "POST",
url: t.AjaxPagePath,
data: { "op": "Talk", "Talk": meg, "UserName": t.UserName, "Date": new Date() },
success: function ()
{
t.GetTalk(t);
}
});
}
}

aspx部分
调用Js

Ajax B/S 聊天工具txt文件保存
 <script src="Script/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Script/talk.js" type="text/javascript"></script>
<script type="text/javascript">
var cTalk = new Talk();
cTalk.CrrentCount = 0;
cTalk.RefreshTalk();//定时查看是否有新纪录
cTalk.UserName = "client";
</script>
Ajax B/S 聊天工具txt文件保存
 <div id="divTalkList" style="width:80%; height:40%; border:1px solid #000000; overflow:scroll"></div>
<div><input type="text" id="txtInput" /><input type="button" value="Submit" onclick="cTalk.SubmitTalk();" />
<input id="btnRefresh" type="button" value="刷新" onclick="cTalk.RefreshTalk()" /><!--手动刷新测试用--></div>

ajaxserver 部分

Ajax B/S 聊天工具txt文件保存
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";      //聊天记录文件
     string talkPath = @"/TextFile.txt";
string op = context.Request["op"];
     //网站运行的物理路径
String rootPath =context.Server.MapPath("~");
string path1 =rootPath+ talkPath; if (op == "Talk")
{
   string talk =
context.Request["UserName"]+":" //用户名
+ context.Request["Talk"]    //提交的聊天信息
+System.Environment.NewLine; //新行就是\n\r          //这个地方要用到单例模式就好了,保证服务器聊天数量唯一
count++;
File.AppendAllText(path1, talk, System.Text.Encoding.UTF8);
} if (op == "RefreshTalk")
{
       //客户端传过来的聊天数量与服务器上的聊天数量对比 if (int.Parse(context.Request["Count"]) < count)
{
context.Response.Write("");
}
else
{
context.Response.Write("");
}
}     //获取服务器上的聊天信息和聊天纪录数
    if (op=="GetTalk")
{
string takl = GetTalk(path1, int.Parse(context.Request["Count"]));
context.Response.Write(count+"@"+takl);
} }

  
  
     ///获取聊天信息和信息记录数 当小于服务器端的信息个数,则获取缺少的部分
  ///path1 聊天信息路径
  ///currentCount 是客服端有的信息记录
  string GetTalk(string path1, int currentCount)
{
string[] lastMegs = File.ReadAllLines(path1, System.Text.Encoding.UTF8);
count = lastMegs.Length;
string lastMeg = string.Empty;
if (currentCount < count)
{
for (; currentCount < count; )
{
          //拼接字符串
lastMeg += lastMegs[currentCount] + "<br/>";
currentCount++;
}
return lastMeg;
}
return null;
} public bool IsReusable {
get {
return false;
}
} }