让web socket"兼容"各个浏览器

建立了Socket服务端，服务器数据有变动，想要推送给客户端，如果是C/S模式，使用Socket自然没问题；如果是B/S呢，没有Socket怎么办？

html5支持WebSocket，这是一个不错的改善。

想起没有顺丰、韵达、各种通等之类快递的日子，你以为远方的朋友会给你邮寄包裹——虽然不会有人这样做——然后你就翻山越岭天天去邮局问，“有没有我的包裹啊”，运气好的话，有，你领回去了，运气不好，对不起接着坚持来问吧。于是，跑啊跑啊，累个半死不活。

不过就你自己累，邮局无所谓，反正不用给你送货上门。

但架不住人多啊，更多的像你一样的人有你那样的想法了，跑邮局，人多邮局就出问题了，每天只回答有没有包裹这个问题都忙到嘴没工夫闭上的地步，无法进行日常的发信和拍电报业务了。

于是邮局崩溃了。

这时，快递产生了。

他们负责送货上门。住在城市中的人幸福了，不用跑邮局了。不过住在乡下的人还是郁闷，他们以为快递会平等对待给他们送货上门，也不跑邮局了，可等来等去，等到了一句话：乡下交通不便，恕不配送。。

kao kao kao

 

html5 WebSocket同样遇到了这样的尴尬。对IE，它只兼容10以及以上的版本（其它浏览器不考虑，IE是大户）。对于6789这些依旧没能淘汰掉的老古董，开发人员只能采用别的方式解决。

有人说Nodejs可以。

不错，确实可以。

不过我想说的是，Nodejs的socket.io应该是判断了浏览器的兼容性之后做出的选择吧？支持web socket的采用websocket，不支持的采用别的方式（跑邮局）？

工作也这么多年了，script一直是我的弱项。。。。

虽然照猫画虎使用nodejs及socket.io写出了同样的功能，但心里总是没底。。。打脸-ing

我说nodejs没别的意思，只是我不会。。。

***********************************************************分割线***********************************************************

之前有看园子里的文章，知道使用Flash的socket可以解决兼容性的问题，但由于flex已经好几年没碰了，就没心思去搞。

使用nodejs处理之后由于底气不足不敢在线上服务器用啊，于是转头copy别人的代码使用flash去解决socket问题，搞来搞去园友的文章不是抄别人的就是给出的flash是只适合自己用的，总也调试不通，干脆自己搞，也就是重拾一下as和flex而已。

不多说废话了（打脸-ing），上代码吧。

***********************************************************分割线***********************************************************

首先，创建Socket服务端，c#代码（我是使用Windows服务作Socket服务端，至于别的方式请自行脑补）：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Linq;
using System.Net;
using System.Net.Sockets;
using System.Reflection;
using System.ServiceProcess;
using System.Text;
using log4net;

namespace YourNameSpace
{
    partial class FlashSocket : ServiceBase
    {
        private static readonly ILog Logger = LogManager.GetLogger(MethodBase.GetCurrentMethod().DeclaringType);
        private static Socket server;

        private static Socket handSocket;

        private static string message = "testset";
        /// <summary>
        /// 需要维护的一个Socket Client集合
        /// </summary>
        private static List<Socket> Clients = new List<Socket>();
        public FlashSocket()
        {
            InitializeComponent();
        }

        protected override void OnStart(string[] args)
        {
            // TODO:  在此处添加代码以启动服务。
            CreateSocketServer();
            System.Timers.Timer tmr = new System.Timers.Timer();
            tmr.Interval = 1000 * 3;
            tmr.Elapsed += (sender, e) =>
            {
                DoWork();
            };
            tmr.Start();
        }


        protected override void OnStop()
        {
            // TODO:  在此处添加代码以执行停止服务所需的关闭操作。
        }

        #region 创建Socket服务端

        private static void CreateSocketServer()
        {
            AllowDomain ad = new AllowDomain();
            server = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
            server.Bind(new IPEndPoint(IPAddress.Parse("192.168.5.134"), 2013));
            server.Listen(int.MaxValue);
            server.BeginAccept(InsertClientToCollection, server);
        }
        #endregion
        
        #region 有新客户端访问的时候添加进来
        /// <summary>
        /// 有新客户端访问的时候添加到客户端集合中
        /// </summary>
        /// <param name="ar"></param>
        private static void InsertClientToCollection(IAsyncResult ar)
        {
            try
            {
                var socket = ar.AsyncState as Socket;
                if (socket != null)
                {
                    Clients.Add(socket.EndAccept(ar));
                    server.BeginAccept(InsertClientToCollection, server);
                    Logger.InfoFormat("新用户连接{0}", socket.LocalEndPoint);
                }
            }
            catch (Exception ex)
            {
                Logger.Error(ex);
            }
        }

        #endregion
        #region
        private void DoWork()
        {
            message = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss") + "";
            try
            {
                if (Clients.Count > 0)
                {
                    var count = Clients.Count;
                    for (int i = 0; i < count; )
                    {
                        if (i < Clients.Count)
                        {
                            try
                            {
                                Clients[i].Send(Encoding.UTF8.GetBytes(message));
                            }
                            catch (Exception)
                            {
                                Clients.RemoveAt(i);
                                i--;
                            }
                        }
                        i++;
                    }
                }
                if (Clients.Count > 0)
                    Logger.InfoFormat("当前客户端总数：{0}", Clients.Count);
            }
            catch (Exception ex)
            {
                Logger.Error(ex);
            }

        }
        #endregion

    }
}

其中CreateSocketServer方法内有一句“AllowDomain ad = new AllowDomain();”，这个是解决flash安全沙箱跨域问题的，如果没有这句，flash读取socket数据的时候会报安全沙箱冲突。其实就是暴露Socket Server所在服务器的843端口给flash，以供握手（个人理解）。

代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Sockets;
using System.Text;

namespace YourNameSpace
{
    public class AllowDomain
    {
        private TcpListener Server;
        private AsyncCallback callback;
        private bool islisten = false;

        public AllowDomain()
        {
            this.Server = new TcpListener(843);
            this.Server.Start();
            this.callback = new AsyncCallback(this.OnConnectionEvent);
            this.islisten = true;
            this.Server.BeginAcceptSocket(this.callback, null);
        }

        public void Close()
        {
            this.islisten = false;
            this.Server.Stop();
        }

        private void OnConnectionEvent(IAsyncResult syn)
    {
        if (this.islisten)
        {
            SocketError error;
            Socket conn = this.Server.EndAcceptSocket(syn);
            //conn.Send(PolicyFile.Policys);
            
            byte[] buffer = new byte[1024];
            int len = conn.Receive(buffer, 0, 1024, SocketFlags.None, out error);
            if (error == SocketError.Success)
            {
                string s = Encoding.Default.GetString(buffer, 0, len);
                if (s == "<policy-file-request/>")
                {
                    buffer = Encoding.Default.GetBytes("<cross-domain-policy><allow-access-from domain="*" to-ports="2013"/></cross-domain-policy>");
                    conn.Send(buffer);
                }
            }
            conn.Close();            
            if (this.islisten)
                this.Server.BeginAcceptSocket(this.OnConnectionEvent, null);
        }
    }
    }
}

 下面是Flash代码，AS3：

package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.ProgressEvent;
    import flash.external.ExternalInterface;
    import flash.net.Socket;
    import flash.system.Security;
    import flash.utils.ByteArray;
    
    public class PushMessageLess extends Sprite
    {
        private var socket:Socket;
        private var msg:String="";
        protected function CreateSocket():void
        {
            Security.allowDomain("*");
            Security.loadPolicyFile("xmlsocket://192.168.5.134:843");
            
            // TODO Auto-generated method stub
            socket=new Socket();
            socket.connect("192.168.5.134",2013);
            socket.addEventListener(ProgressEvent.SOCKET_DATA,receivedMessage);
        }
        
        private function socketConnected(event:Event):void{
        }
        private function receivedMessage(e:ProgressEvent):void{
            var message:String="";
            while(socket.bytesAvailable){
                message+=socket.readMultiByte(socket.bytesAvailable,"utf8");
            }
            msg=message;
            if(message.length>0){
                callJs(message);
            }
        }
        
        private function callJs(m:String):void{
            ExternalInterface.call("callFlexFunction",m);
        }
        public function PushMessageLess()
        {
            if(stage){
                CreateSocket();
            }else
            {
                addEventListener(Event.ADDED_TO_STAGE,CreateSocket);
            }
        }
    }
}

使用Flash Builder编译成swf文件PushMessageLess.swf（其实Less没有别的意思，是我原来用的是Flex项目，编译后把sdk中mx的部分东西编译进去了，比较大，有280k+，这个只有2k，可以接受）。

这个文件名会在后面代码中用到，拿来主义者切记：用的时候改名字。

下面是html代码：

<html>
<head>
    <title>测试Flash socket兼容IE6，7，8</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="swfobject.js"></script>
</head>

<body>
<script type="text/javascript">
    function callFlexFunction(msg) {
        if (msg != null) {
            document.getElementById("msgContainer").innerHTML = msg;
        }
    }
    var flashvars = false;
    var params = {};
    params.allowScriptAccess = "always";
    var attributes = {};
    //ID,也就是swf的ID，这个ID很重要，通过它调用flex的方法 
    attributes.id = "PushMessageLess";

    swfobject.embedSWF("PushMessageLess.swf?"+Math.random(), "PushMessageLess", "0", "0", "9.0.0","",flashvars,params,attributes);
</script>
<div id="PushMessageLess" style="display: none;"></div>
<div id="msgContainer"></div>
</body>
</html>

所需做的只是把上面生成的swf文件放到html同级目录下（当然，不放同级目录也可以，注意下html中的路径就可以了）。

还有一个就是html页面中引用的一个swfObject.js，地址在这里

swfObject.js

就这么多了，希望各位少走弯路。