WebChart网页局域网聊天系列(一):ActiveX插件编写

第一步：创建ActiveX控件类库，在解决方案中右击添加Window窗体控件库

在该类库属性中，设置 使程序集COM可见，同时设置为COM互操作注册

另外在自动生成的文件中AssemblyInfo.cs，添加[assembly: AllowPartiallyTrustedCallers()]

以上操作的目的是，让其他框架页可以访问该ActiveX里的方法

第二步：添加前台接口类，主要给web页面调用

    [Guid("806635E5-AFF1-4BBE-960F-121910EB7F7A"),InterfaceType(ComInterfaceType.InterfaceIsDual),ComVisible(true)]
    public interface ISendMsg
    {
        [DispId(1)]
        int Conn(string ip,int port);
        [DispId(2)]
        void Send(string msg);
    }

添加了这个方法，网页页面就可以访问这两个方法了

第三步：添加ActiveX触发接口，用于触发传递到Web页面的事件

    [Guid("D6F88421-BE17-4310-9692-A07A00CDF474"),InterfaceType(ComInterfaceType.InterfaceIsIDispatch),ComVisible(true)]
    public interface IMsgEvent
    {
        [DispId(21)]
        void OnMsgHander(string msg);
    }

第四步：在ActiveX类库中，实现前台接口类的实现方法

[Guid("8366F83A-F207-4B41-ACD1-49A3EBAFE192"), ProgId("Socket_Ocx.UserMain"), ClassInterface(ClassInterfaceType.None), ComDefaultInterface(typeof(ISendMsg)),ComSourceInterfaces(typeof(IMsgEvent)), ComVisible(true)]
    public partial class UserMain : UserControl, ISendMsg
    {
        private Socket client;
        public delegate void MsgHander(string msg);
        public event MsgHander OnMsgHander;

        public UserMain()
        {
            InitializeComponent();
        }

        /// <summary>
        /// 连接到WEB通信服务器，同时开启接收消息线程
        /// </summary>
        /// <param name="ip"></param>
        /// <param name="port"></param>
        /// <returns></returns>
        public int Conn(string ip, int port)
        {
            int result = 0;
            IPEndPoint iep = new IPEndPoint(IPAddress.Parse(ip),port);
            client = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
            try
            {
                client.Connect(iep);
                result = 1;
                Thread nowThread = new Thread(new ThreadStart(ReciveData));
                nowThread.Start();
            }
            catch
            {
                result = 0;
            }
            return result;
        }

        //发送消息给WEB服务器
        public void Send(string msg)
        {
            try
            {
                byte[] data = Encoding.UTF8.GetBytes(msg);
                client.Send(data);
            }
            catch (Exception ex)
            {

            }
        }

        /// <summary>
        /// 接收WEB服务器发来的消息
        /// </summary>
        private void ReciveData()
        {
            int res;
            while (true)
            {
                try
                {
                    byte[] bytes = new byte[1024];
                    res = client.Receive(bytes);
                    string msg = Encoding.UTF8.GetString(bytes, 0, res);
                    OnMsgHander(msg);
                }
                catch (Exception ex)
                {

                }
            }
        }
    }

第五步：Web页面连接及接收发送数据

<object id="ocx" classid="clsid:8366F83A-F207-4B41-ACD1-49A3EBAFE192">
</object>

前台脚本编写，代码如下：

	<script for="ocx" language="JavaScript" event="OnMsgHander(s)">
		if(document.getElementById("txtAllMsg").value == ""){
			document.getElementById("txtAllMsg").value = s;
		}
		else{
			document.getElementById("txtAllMsg").value += "\r\n"+ s;
		}
   </script>
   <script type="text/javascript">
		function onLogin(){
			var user = document.getElementById("txtUserName").value;
			var pswd = document.getElementById("txtPswd").value;
			if(user==""||pswd==""){
				alert("请输入用户名及密码！");
				return;
			}
			document.getElementById("divMax").style.display="none";
			document.getElementById("txtUser").value = user;
			document.getElementById("spanUser").innerHTML = user;
			init();
		}

		function init(){
			var res = ocx.Conn('127.0.0.1',2000);
		}

		function onSend(){
			var msg = document.getElementById("txtSendMsg").value;
			if(msg==""){
				alert("您的发送内容为空！");
				return;
			}
			var user = document.getElementById("txtUser").value;
			ocx.Send(user+":"+msg);
			if(document.getElementById("txtAllMsg").value == ""){
				document.getElementById("txtAllMsg").value = user+":"+msg;
			}
			else{
				document.getElementById("txtAllMsg").value += "\r\n"+ user+":"+msg;
			}
			document.getElementById("txtSendMsg").value ="";
		}
	</script>

以上展示的是客户端基本结构及主要代码，下一篇主要接收服务器端主要结构及代码

源代码：WebChart.rar