使用Pixysoft.Ajax技术 三步教你创建一个 WEB IM!

 

前言

pixysoft.ajax的介绍在：http://www.cnblogs.com/zc22/archive/2009/11/16/1603938.html

comet架构介绍在：http://www.cnblogs.com/zc22/archive/2009/11/14/1603141.html

下载地址在：http://www.boxcn.net/shared/86y259srcv

本文将介绍使用这个技术创建一个WEB IM, 而且只需要三步！

 

效果预览

正文

第一步 页面

首先建一个ASP.NET的网站，有一个Default.aspx页面。把PixysoftAjaxBase控件拖进来，然后在form标签下建立以下代码：

 

    <form id="form1" runat="server">
        <div>
            <cc1:PixysoftAjaxBase ID="PixysoftAjaxBase1" runat="server"></cc1:PixysoftAjaxBase>
            <p>
                <textarea id="message" style="width: 300px; height: 100px"></textarea></p>
            <p>
                昵称:
                <input type="text" id="id" />
                <input type="button" value="链接服务器" id="b1" onclick="Connect()" />
            </p>
            <p>
                信息:
                <input type="text" id="sendmessage" /></p>
            <p>
                接受人:
                <input type="text" id="targetid" /></p>
            <input type="button" value="发送信息" onclick="Send()" />
        </div>
    </form>

 

效果预览：

超级简单吧

第二步 写javascript

在head标签下完成以下javascript

 

    <script language="javascript" type="text/javascript">
    function Connect()
    {       
    Subscribe(document.getElementById('id').value);
    }
 
    function SubscribeCallback(value)
    {   
        if(value !=null && value.length!=0)
        {       
        document.getElementById("message").value += value;
        document.getElementById("message").value += '\r\n';
        }        
        setTimeout('Subscribe(document.getElementById(\'id\').value)',1000);
    }
    
    function Send()
    {
    var targetid = document.getElementById('targetid').value;    
    var sendmessage = document.getElementById('sendmessage').value;    
    SendMessage(targetid,sendmessage);
    }
    </script>

也是超级简单吧！

第三步 完成c#代码

后台页面完成以下代码：

 

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    public string Subscribe(string id)
    {
        return MessageController.Instance.GetMessage(id);
    }

    public void SendMessage(string targetid, string message)
    {
        MessageController.Instance.SendMessage(targetid, message);
    }
}
public class MessageController
{
    Dictionary<string, string> dict = new Dictionary<string, string>();
    private static volatile MessageController instance;
    private static object syncRoot = new Object();
    public static MessageController Instance
    {
        get
        {
            if (instance == null)
            {
                lock (syncRoot)
                {
                    instance = new MessageController();
                }
            }
            return instance;
        }
    }

    public void SendMessage(string id, string message)
    {
        if (dict.ContainsKey(id))
            dict[id] = message;
        else
            dict.Add(id, message);
    }

    public string GetMessage(string id)
    {
        if (dict.ContainsKey(id))
        {
            string message = dict[id];
            dict.Remove(id);
            return message;
        }
        return null;
    }
}

 

简单说，就是建一个MessageController的单例，保存信息。然后被页面调用。

 

就这么简单，这一切，使用了ajax技术、comet架构。

 

关键点在于：

使用settimeout函数循环调用，当然，在正式项目中，不建议使用，而是应该在服务器进行循环，具体各位大侠完成吧。

代码下载

具体下载代码文件就知道了。

http://www.boxcn.net/shared/2hz31l6uz9

(控件由boxcn.net提供)

技术支持

reborn_zhang@hotmail.com

zc22.cnblogs.com