jquery+asp.net实现的一个简易web聊天工具

本demo非常简单并，没有用到数据库来存储数据而是Cach来缓存数据，后台代码：

    public class _6_1 : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/xml";
            string timespan = context.Request["time"];
         
            string name = context.Request["name"];
            string msg = context.Request["message"];
            string action = context.Request["action"];
            if (!string.IsNullOrEmpty(name))
            {
                Data.Add(new Message { Id = id, user = name, message = msg, time = DateTime.Now });
            }
            List<Message> query = new List<Message>(); ;
            
          
            if (timespan == "0")
                query = Data;
            else
                query = Data.Where(c => (c.time - DateTime.Parse(timespan)).Ticks / 10000000>0).ToList();
            string statu = query.Count > 0 ? "1" : "2";
            string xml = "<?xml version='1.0' encoding='UTF-8'?><response><status>" + statu + "</status><time>" + DateTime.Now.ToString()
                + "</time>{0}</response>";
            string message = string.Empty;
            foreach (var item in query)
            {
                message += "<message><author>" + item.user + "</author><text>" + item.message + "</text></message>";
            }
    
            xml = string.Format(xml,message);
            context.Response.Write(xml);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        class Message
        {
            public int Id { set; get; }
            public string user { set; get; }
            public string message { set; get; }
            public DateTime time { set; get; }
        }

        List<Message> Data
        {
            get
            {
                if (HttpRuntime.Cache["data"] == null)
                    HttpRuntime.Cache["data"] = new List<Message>();
                return (List<Message>)HttpRuntime.Cache["data"];
            }
        }
        int id
        {
            get
            {
                if (HttpRuntime.Cache["id"] == null)
                    HttpRuntime.Cache["id"] = 0;
                HttpRuntime.Cache["id"] = (int)HttpRuntime.Cache["id"] + 1;
                return (int)HttpRuntime.Cache["id"];
            }
        }
    }

前台代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>6-1</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <style type="text/css">
        body
        {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
        #messagewindow
        {
            height: 250px;
            border: 1px solid;
            padding: 5px;
            overflow: scroll;
        }
        #wrapper
        {
            margin: auto;
            width: 438px;
        }
    </style>
    <script type="text/javascript">
        var timestamp = 0;
        function updateMsg() {
            $.post("6-1.ashx", { time: timestamp }, function (xml) {
                $("#loading").remove();
                addMessage(xml);
            });
            setTimeout(updateMsg, 400);

        }
        function addMessage(xml) {
            // console.log(xml);
            if ($("status", xml).text() == 2) return;
            timestamp = $("time", xml).text();
            $("message", xml).each(function () {
                var author = $("author", this).text();
                var content = $("text", this).text();

                var htmlcode = "<strong>" + author + "<strong>: " + content + "<br/>";
                $("#messagewindow").prepend(htmlcode);
            });
        }
        $(function () {
            updateMsg();
            $("#send").click(function () {
                $.post("6-1.ashx",
               { message: $("#msg").val(), name: $("#author").val(), action: "postmsg", time: timestamp },
               function (xml) {
                   $("#msg").val("");
                   addMessage(xml);
               }
               );
                return false;
            });
        });
    </script>
</head>
<body>
    <div id="wrapper">
        <p id="messagewindow">
            <span id="loading">加载中.....</span></p>
        <form id="chatfrom">
        姓名:<input type="text" id="author" size="50" />
        <br />
        内容:<input type="text" id="msg" size="50" />
        <br />
        <input type="submit" value="发送" id="send" />
        <br />
        </form>
    </div>
</body>
</html>

Tags：