.Net MVC 實現WebSocket_ZenDei技術網路在線

WebSocket 1.基於Html5,IIS8.0版本以上，前端代碼和伺服器都必須支持WebSocket才能使用； 2.請求必須以WS:開頭下麵是後臺接收前端websocket申請的方法： /// <summary> /// WebSocket建立鏈接的方法 /// </summary> /// ...

WebSocket

1.基於Html5,IIS8.0版本以上，前端代碼和伺服器都必須支持WebSocket才能使用；

2.請求必須以WS:開頭

下麵是後臺接收前端websocket申請的方法：

/// <summary>
        /// WebSocket建立鏈接的方法
        /// </summary>
        /// <param name="name"></param>
        public void MyWebSocket(string name)
        {
            //MVC中的上下文中存在IsWebSocketRequest這樣一個屬性，來看當前是否是websocket
            if (HttpContext.IsWebSocketRequest)
            {
                this.UserName = name;
                //如果是websocket，那需要指定一個委托 ，把方法ProcessChat當做一個參數傳入AcceptWebSocketRequest中來執行。
                HttpContext.AcceptWebSocketRequest(ProcessChat);
            }
            else
            {
                HttpContext.Response.Write("我不處理");
            }
        }

從上面代碼可以知道申請的連接必須是websocket，否則不做處理，如果我瀏覽器上通過url調用這個方法，而不是通過創建websocket對象來調用的話，會出現下麵結果：

如果是websocket對象調用的話就能夠走通：

 var url = "ws://localhost:57211/Home/MyWebSocket";
        var socket;
        function connect() {
            var webSocketUrl = url + "?name=" + $("#userName").val();
            //註意：下麵這行代碼執行之後就已經調通到後臺的MyWebSocket方法中了。
            socket = new WebSocket(webSocketUrl) 
        }

就能夠執行到後臺自定義的ProcessChat方法中了，這個方法專門處理websocket連接的相關事務邏輯。比如說前端發來消息，後端回覆收到：

 public async Task ProcessChat(AspNetWebSocketContext socketContext)
        {
            //socketContext.WebSocket這裡獲取到的是當前瀏覽器傳到伺服器端一個websocket對象信息,通過這個對象就能在當前的連接通過中進行信息的處理
            System.Net.WebSockets.WebSocket socket = socketContext.WebSocket;
            ArraySegment<byte> buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes($"這裡是伺服器，客戶端你的消息我收到了"));
            CancellationToken cancellation = new CancellationToken();
            //第三個參數需要設置為true
            await socket.SendAsync(buffer, WebSocketMessageType.Text, true, cancellation);
        }

WebSocket四大事件

1.OnOpen: 連接打開時觸發

2.OnMessage: 接收消息時觸發（來自於伺服器的消息）

3.OnError: 異常時觸發

4.OnClose: 連接關閉時觸發

前端整體代碼如下：

@{
    Layout = null;
}

<h3>WebSocket</h3>
<form id="form1" runat="server">
    <div>
        <input id="userName" type="text" />
        <input id="conn" type="button" value="連接" />
        <input id="close" type="button" value="關閉" />
        <span id="tips"></span>
        <input id="content" type="text" />
        <input id="send" type="button" value="發送" />
    </div>
    <div id="view">
        <ul></ul>
    </div>
</form>
<script src="~/Scripts/jquery-3.3.1.js"></script>

<script type="text/javascript">
    //你這裡就直接定義了一個MVC;
    //WebSocket：還支持ashx/aspx/webapi，不僅僅是支持MVC 
    $(function () {
        //註意，websocket是以ws:開頭的！！
        var url = "ws://localhost:57211/Home/MyWebSocket";
        var socket;
        function connect() {
            var webSocketUrl = url + "?name=" + $("#userName").val();
            //註意：下麵這行代碼執行之後就已經調通到後臺的MyWebSocket方法中了。
            socket = new WebSocket(webSocketUrl)

            //鏈接打開的時候觸發
            socket.onopen = function () {
                $("#tips").text("鏈接已打開");
                // 定時發送一個消息給伺服器發送心跳包 伺服器接收到心跳包以後馬上就再回覆一個消息給客戶端
                // 如果我發現十秒鐘或者在間隔時間內 接受不到伺服器回覆的心跳消息 我就認為連接掉線
                // 這時候就需要斷線 connect();
            }
            // 接受伺服器發送過來的消息
            socket.onmessage = function (evt) {
                debugger;
                $("#view ul").append("<li>" + evt.data + "</li>");
            }
            // 異常的時候觸發方法
            socket.onerror = function (evt) {
                $("#tips").text(JSON.stringify(evt));
            }
            // 鏈接關閉的時候觸發
            socket.onclose = function () {
                $("#tips").text("連接關閉了");
            }
        }

        // 點擊"連接"按鈕
        $("#conn").on("click", function () {
            connect();
        })
        //點擊“關閉”按鈕
        $("#close").on("click", function () {
            socket.close();

        })

        //點擊“發送”按鈕
        $("#send").on("click", function () {
            if (socket.readyState == WebSocket.OPEN) {
                socket.send($("#content").val());
            }
            else {
                alert("鏈接已經斷開");
            }
        })

    })
</script>

點擊連接按鈕：

補充：

SendAsync方法：

//
        // 摘要:
        //     發送 WebSocket 上連接非同步的數據。
        //
        // 參數:
        //   buffer:
        //     要通過連接發送的緩衝區。
        //
        //   messageType:
        //     指示應用是否發送二進位或文本消息。
        //
        //   endOfMessage:
        //     指示在“緩衝區”的數據是否實消息的最後一部分。
        //
        //   cancellationToken:
        //     傳播有關應取消操作的通知的標記。
        //
        // 返回結果:
        //     返回 System.Threading.Tasks.Task。表示非同步操作的任務對象。
        public abstract Task SendAsync(ArraySegment<byte> buffer, WebSocketMessageType messageType, bool endOfMessage, CancellationToken cancellationToken);

ArraySegment

WebSocket：還支持ashx/aspx/webapi，不僅僅是支持MVC。有時間可以研究下基於WebApi的實現。

如果是多人同時和伺服器端進行聊天，伺服器如何分辨並回覆？

下麵先簡單實現一個功能：客戶端1和客戶端2能夠實現對話

思路：webSocket每次鏈接到伺服器之後，就在伺服器端把鏈接保存起來。我現在的做法是瀏覽器發送消息的時候需要將對方的名稱寫上，根據這個名稱找到對應負責通信的websocket對象，實現通信。實際開發中可以根據需求進行更改。

一個封裝好的聊天類：

namespace Utility
{
    public class ChatManager
    {
        /// <summary>
        /// 每一個Socket對應一個客戶端和伺服器的連接（也可理解成一個用戶）
        ///  
        /// </summary>
        public static List<SocketModel> socketlist = new List<SocketModel>();

        //SocketModel 建議大家保存在NoSql  Redis  MongoDb;
        /// <summary>
        /// 發送消息  這裡在發送的消息上是做了格式限制的 
        /// </summary>
        /// <param name="messge">瀏覽器傳來的消息，預設的格式：user1;你好，就是用戶名：發送信息的內容</param>
        /// <param name="cancellationToken"></param>
        public static void SendOne(string messge, CancellationToken cancellationToken)
        {
            //   user1;你好
            string[] messageArray = messge.Split(':');  //toUser:Message;
            //用戶名
            string toUser = messageArray[0];
            //消息
            string toMessage = messageArray[1];
            //根據用戶名找到對應的socket
            var socketModel = socketlist.FirstOrDefault(a => toUser.Equals(a.UserName));
            if (socketModel != null)
            {
                //使用當前用戶的socket對象進行通信
                WebSocket toSocket = socketModel.Socket;
                ArraySegment<byte> buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(toMessage));
                toSocket.SendAsync(buffer, WebSocketMessageType.Text, true, cancellationToken);
            }
        }

        /// <summary>
        /// 添加一個用戶（包含了這個用戶對應的Socket）
        /// </summary>
        /// <param name="socketGuid"></param>
        /// <param name="userName"></param>
        /// <param name="socket"></param>
        public static void AddUser(string socketGuid, string userName, WebSocket socket)
        {
            socketlist.Add(new SocketModel()
            {
                SocketGuid = socketGuid,
                UserName = userName,
                Socket = socket
            });
        }

        /// <summary>
        /// 刪除已經連接的用戶
        /// </summary>
        /// <param name="socketGuid"></param>
        public static void RemoveUser(string socketGuid)
        {
            socketlist = socketlist.Where(a => a.SocketGuid != socketGuid).ToList();
        } 
        

    }
}

SocketModel類：

namespace Utility
{
    public class SocketModel
    {
        /// <summary>
        /// 鏈接的唯一ID
        /// </summary>
        public string SocketGuid { get; set; }

        /// <summary>
        ///  用戶名稱
        /// </summary>
        public string UserName { get; set; }

        /// <summary>
        /// 每一個用戶鏈接進來以後 對應的這一個Socket實例
        /// </summary>
        public WebSocket Socket { get; set; }
    }
}

接收瀏覽器信息以及進行的邏輯判斷：

private string UserName = string.Empty;

        /// <summary>
        /// WebSocket建立鏈接的方法
        /// </summary>
        /// <param name="name"></param>
        public void MyWebSocket(string name)
        {
            //MVC中的上下文中存在IsWebSocketRequest這樣一個屬性，來看當前是否是websocket
            if (HttpContext.IsWebSocketRequest)
            {
                this.UserName = name;
                //如果是websocket，那需要指定一個委托 ，把方法ProcessChat當做一個參數傳入AcceptWebSocketRequest中來執行。
                HttpContext.AcceptWebSocketRequest(ProcessChat);
            }
            else
            {
                HttpContext.Response.Write("我不處理");
            }
        }

        public async Task ProcessChat(AspNetWebSocketContext socketContext)
        {
            //socketContext.WebSocket這裡獲取到的是當前瀏覽器傳到伺服器端一個websocket對象信息,通過這個對象就能在當前的連接通過中進行信息的處理
            System.Net.WebSockets.WebSocket socket = socketContext.WebSocket;
            //（1）只要有websocket鏈接進來，直接保存。
            CancellationToken token = new CancellationToken();
            string socketGuid = Guid.NewGuid().ToString(); 
            {
                ChatManager.AddUser(socketGuid, UserName, socket);
            } //（2）準備接受消息然後轉發個目標方
            while (socket.State == WebSocketState.Open)
            {
                ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
                //接受來自於瀏覽器的消息 
                WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, token);
                // 解析來自於瀏覽器發送過來的消息內容   
                string userMessage = Encoding.UTF8.GetString(buffer.Array, 0, result.Count);
                //是否關閉鏈接
                if (result.MessageType == WebSocketMessageType.Close)
                {
                    
                }
                else
                {
                    ChatManager.SendOne(userMessage, token); 
                }
            }
        }

結果：

基於上面代碼，實現群聊

思路：群都是有上限的，所以我們可以定義一個上限數量的群，只要進來一個用戶，就占用一定數量內的一個socket對象，群發的時候就只發給socket對象不空的。

後端代碼：

private string UserName = string.Empty;

        /// <summary>
        /// WebSocket建立鏈接的方法
        /// </summary>
        /// <param name="name"></param>
        public void MyWebSocket(string name)
        {
            //MVC中的上下文中存在IsWebSocketRequest這樣一個屬性，來看當前是否是websocket
            if (HttpContext.IsWebSocketRequest)
            {
                this.UserName = name;
                //如果是websocket，那需要指定一個委托 ，把方法ProcessChat當做一個參數傳入AcceptWebSocketRequest中來執行。
                HttpContext.AcceptWebSocketRequest(ProcessChat);
            }
            else
            {
                HttpContext.Response.Write("我不處理");
            }
        }
 
        /// <summary>
        /// websocket請求的執行方法
        /// </summary>
        /// <param name="socketContext">AspNetWebSocketContext：提供有關各個 System.Web.WebSockets.AspNetWebSocket 請求的表示上下文詳細信息的基本類。</param>
        /// <returns></returns>
        public async Task ProcessChat(AspNetWebSocketContext socketContext)
        {
            //socketContext.WebSocket這裡獲取到的是當前瀏覽器傳到伺服器端一個websocket對象信息,通過這個對象就能在當前的連接通過中進行信息的處理
            System.Net.WebSockets.WebSocket socket = socketContext.WebSocket;
            //（1）只要有websocket鏈接進來，直接保存。
            CancellationToken token = new CancellationToken();
            string socketGuid = Guid.NewGuid().ToString();
            OldChatManager.AddUser(socketGuid, UserName, socket, token);
            //只要是有人進入聊天室，就應該發送一個消息，xxx進入聊天室；
            await OldChatManager.Say(token, UserName, "進入聊天室。。。");
            //（2）準備接受消息然後轉發個目標方
            while (socket.State == WebSocketState.Open)
            {
                ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
                //接受來自於瀏覽器的消息 
                WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, token);
                // 解析來自於瀏覽器發送過來的消息內容   
                string userMessage = Encoding.UTF8.GetString(buffer.Array, 0, result.Count);
                //是否關閉鏈接
                if (result.MessageType == WebSocketMessageType.Close)
                {
                    OldChatManager.RemoveUser(socketGuid);
                    await OldChatManager.Say(token, UserName, "離開聊天室");
                    await socket.CloseAsync(WebSocketCloseStatus.NormalClosure, string.Empty, token);
                }
                else
                {
                    await OldChatManager.SengdMessage(token, UserName, userMessage);
                }
            }
        }

OldChatManager：

public class OldChatManager
    {

        ///一個群就應該有固定的的人數；
        /// <summary>
        /// 預設某一個群組裡面有這麼一些人
        /// 1.預設這個群里就有四個人；
        /// </summary>
        public static List<SocketModel> socketlist = new List<SocketModel>() {
             new SocketModel(){ SocketGuid=string.Empty,UserName="User1",Socket=null },
             new SocketModel(){ SocketGuid=string.Empty,UserName="User2",Socket=null },
             new SocketModel(){ SocketGuid=string.Empty,UserName="User3",Socket=null },
             new SocketModel(){ SocketGuid=string.Empty,UserName="User4",Socket=null }
        };
        // string: 要發誰   ArraySegment<byte>：要發送的消息
        public static Dictionary<string, List<ArraySegment<byte>>> chatList = new Dictionary<string, List<ArraySegment<byte>>>();
        /// <summary>
        /// 增加
        /// </summary>
        /// <param name="socketGuid"></param>
        /// <param name="userName"></param>
        /// <param name="socket"></param>
        /// <param name="token"></param>
        public static void AddUser(string socketGuid, string userName, WebSocket socket, CancellationToken token)
        {
            socketlist.ForEach(item =>
            {
                if (userName == item.UserName)
                {
                    item.Socket = socket;
                    item.SocketGuid = socketGuid;
                }
            });

            #region  離線消息的處理  把這段代碼註釋掉之後，新來的用戶也不會收到之前的 消息了 
            if (chatList.ContainsKey(userName) && chatList[userName].Count > 0)
            {
                foreach (var item in chatList[userName])
                {
                    socket.SendAsync(item, WebSocketMessageType.Text, true, token);
                }
            } 
            #endregion
        }

        /// <summary>
        /// 退出登錄之後去掉通信的websocket對象
        /// </summary>
        /// <param name="socketGuid"></param>
        public static void RemoveUser(string socketGuid)
        {
            socketlist.ForEach(item =>
            {
                if (socketGuid == item.SocketGuid)
                {
                    item.Socket = null;
                    item.SocketGuid = null;
                }
            });
        }


        /// <summary>
        ///  群發消息 包括離線消息
        /// </summary>
        /// <param name="token"></param>
        /// <param name="userName"></param>
        /// <param name="content"></param>
        /// <returns></returns>
        public static async Task SengdMessage(CancellationToken token, string userName, string content)
        {
            ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
            buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes($"{DateTime.Now.ToString("yyyy年MM月dd日 HH:mm:ss:fff")}{userName}:{content}"));

            foreach (var socketInfo in socketlist)
            {
                //如果為空，表示這個websocket對象實例沒有被分配，不線上。
                if (socketInfo.Socket == null)
                {
                    #region  chatList裡面存的是離線人員，在這裡是存儲信息，等待離線人員上線之後能夠接收到信息

                    //這裡主要就是負責離線消息的，確保新登錄的用戶可以看到之前的消息， 
                    //然後看看要發送的對象列表中有沒有這個用戶，存在的話就把這個消息暫存到這個用戶對應的信息中，如果這個用戶上線之後，就可以把這些數據全部發給他。當然也可以將這些數據存到資料庫中，                       但是不怎麼好，最好還是放到redis，nosql，MongoDb。
                    if (chatList.ContainsKey(socketInfo.UserName))
                    {
                        chatList[socketInfo.UserName].Add(buffer);
                    }
                    else
                    {
                        chatList.Add(socketInfo.UserName, new List<ArraySegment<byte>>() { buffer });
                    }

                    #endregion
                }
                else
                {
                    await socketInfo.Socket.SendAsync(buffer, WebSocketMessageType.Text, true, token);
                }
            }

        }
        /// <summary>
        /// 這個不管離線消息 當前用戶進來
        /// </summary>
        /// <param name="token"></param>
        /// <param name="userName"></param>
        /// <param name="content"></param>
        /// <returns></returns>
        public static async Task Say(CancellationToken token, string userName, string content)
        {
            ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
            buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes($"{DateTime.Now.ToString("yyyy年MM月dd日 HH:mm:ss:fff")}{userName}:{content}"));

            foreach (var socketInfo in socketlist)
            {
                if (socketInfo.Socket != null)
                {
                    await socketInfo.Socket.SendAsync(buffer, WebSocketMessageType.Text, true, token);
                }
            }

        }
    }

結果：

心跳包和斷線重連

Reconnecting斷線自動重連

zhuangzai :

https://www.cnblogs.com/anjingdian/p/15327526.html