zoukankan      html  css  js  c++  java
  • 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: 0,
        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[1]);
                    talk.CrrentCount = ms[0];
                }
            });
        },
        ///刷新方法
        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 == "1")
                    {
                        t.GetTalk(t);
                        
                    }
                }
            });
            setTimeout(function ()
            {
               t.RefreshTalk();
            }, 1000);
        },
       //提交信息
        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);
                }
            });
        }
    }
    View Code

    aspx部分
    调用Js

    复制代码
     <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>
    复制代码
     <div id="divTalkList" style="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 部分

    复制代码
    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; //新行就是   

           //这个地方要用到单例模式就好了,保证服务器聊天数量唯一
    count
    ++; File.AppendAllText(path1, talk, System.Text.Encoding.UTF8); } if (op == "RefreshTalk") {        //客户端传过来的聊天数量与服务器上的聊天数量对比 if (int.Parse(context.Request["Count"]) < count) { context.Response.Write("1"); } else { context.Response.Write("0"); } }
        //获取服务器上的聊天信息和聊天纪录数
        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; } } }
  • 相关阅读:
    CentOS6 install Ruby 1.9.3
    php注释规范
    ecstore小记
    关于local storage 和 session storage以及cookie 区别简析
    local storage 简单应用‘’记住密码’
    点击按钮播放音频 停止后再次点击再次播放 添加背景音乐
    页面触底自动加载数据
    侧导航下载
    解决ie对于Bootstrap的兼容性问题
    js判断微信 选择浏览器打开
  • 原文地址:https://www.cnblogs.com/liuwj/p/3394004.html
Copyright © 2011-2022 走看看