[c#]使用Fleck实现简单的WebSocket含兼容低版本IE

WebSocket是html5的一种协议,那么就表示要使用websocket,客户端的浏览器就要支持html5。

对于不支持websocket的浏览器就切换至轮询的方式！

Fleck地址

Fleck的好处就是简单方便,作者已经进行了完整的封装

兼容低版本IE

使用flash实现兼容低版本IE

websocket 连接集合

using Fleck;
using System.Collections.Generic;

namespace Common
{
    public class FlectWebSock
    {
        public static List<IWebSocketConnection> sockets = new List<IWebSocketConnection>();
    }
}

在启动时创建 WebSocketServer服务

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            WebApiConfig.Register(GlobalConfiguration.Configuration);
            FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
            RouteConfig.RegisterRoutes(RouteTable.Routes);
            FleckWebSocket();
        }
        public void FleckWebSocket()
        {
            /*与网站的端口号不一致,与websocket地址的端口号保持一致*/
            var socketServer = new WebSocketServer("ws://0.0.0.0:58349");
            /*发生错误自动重启*/
            socketServer.RestartAfterListenError = true;
            socketServer.Start(socket =>
            {
                socket.OnOpen = () =>
                {
                    FlectWebSock.sockets.Add(socket);
                };
                socket.OnClose = () =>
                {
                    FlectWebSock.sockets.Remove(socket);
                };
                socket.OnMessage =Message => {
                    FlectWebSock.sockets.ForEach(x => x.Send(Message));
                };
            });
        }

简单的页面

   怎么称呼您？<input type="text" value="张三" id="userName" /><br />
        您要说什么？<input type="text" id="Message" /><input type="button" value="发送" onclick="Send()" /><br />
        <input type="button" value="连接" onclick="Connect()" />
        <input type="button" value="关闭" onclick="Close()" />
        <div id="content"></div>

简单的样式

  #content{
            height:400px;
            overflow-y:auto;
            width:500px;
        }

前端js

<!--兼容低版本IE方案的JS-->
    <script src="~/Script/webSocket_js/swfobject.js"></script>
    <!--兼容低版本IE方案的JS-->
    <script src="~/Script/webSocket_js/web_socket.js"></script>
    <script type="text/javascript">
        var _WebSocket;
        /*兼容低版本IE方案的SWF地址*/
        WEB_SOCKET_SWF_LOCATION = "/Script/webSocket_js/WebSocketMain.swf";
        /*兼容低版本IE方案,调试信息*/
        WEB_SOCKET_DEBUG = true;
        function Connect() {
            if (_WebSocket != null) {
                switch (_WebSocket.readyState) {
                    case _WebSocket.CLOSED: Open(); break;
                    default: alert("无法操作！"); break;
                }
            } else {
                Open();
            }
          
        }
        function Open() {
            /*websocket地址端口号*/
            _WebSocket = new WebSocket("ws://localhost:58349");
            _WebSocket.onopen = function () {
                alert("连接成功！");
            }
            _WebSocket.onmessage = function (socket) {
                var p = document.createElement("p");
                p.innerHTML = socket.data;
                document.getElementById("content").appendChild(p);
            }
            _WebSocket.onclose = function () {
                alert("关闭成功！");
            }
        }
        function Send() {
            /*发送消息*/
            _WebSocket.send(DateNow() + " " + document.getElementById("userName").value + "：" + document.getElementById("Message").value);
        }
        function Close() {
            _WebSocket.close();
        }
        function DateNow(){
            var time=new Date();
            return parseInt(time.getFullYear())+"-"+time.getMonth()+"-"+time.getDate();
        }
    </script>

效果图

如果有错误,欢迎指出！相互学习共同进步