Ajax簡單聊天B/S

打算做一個兩個或多個網頁之間交流的功能，思路是多個頁面聊天的內容存放到一個文件里，每個頁面都有提交聊天功能，當提交聊天信息時保存到上面那個文件里，

在每個也頁面里放一個定時器，每秒鍾獲取聊天文件里的記錄信息與自己當前的信息是否一致，如果大於自己的信息數量，說明了有別人提交信息了，那么就把聊天記錄的信息追加到自己的瀏覽器里。

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

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="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 部分

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("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;
        }
    }

}