WebSocket

概述

來源：https://www.runoob.com/html/html5-websocket.html

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，並且能夠更實時地進行通訊。

客戶端部分

客戶端異常簡單，正常情況直接用WebSocket，然后監聽WebSocket的幾個事件就ok。連接的時候可將當前連接者的ID傳入（用戶編號），發送消息的時候采用 “接收者ID|我是消息內容” 這種方式，如“A|A你好，我是B！”

但如用移動端使用還是有一些常見的場景需要處理下的

1：手機關屏幕，IOS關掉屏幕的時候WebSocket會立即失去連接，Android則會等待一段時間才會失去連接。服務器端能檢測到失去連接

2：網絡不穩定，斷網情況WebSocket也不會立即失去連接，服務器端不能知道。（可以服務端設計心跳機制，定時給連接池中的用戶發送消息，來檢測用戶是否保持連接）

3：其他等等...（突然關機、后台結束應用）

無論哪種，客戶端在發送消息（或者網絡恢復連接、亮屏）的時候可以先判斷ws的狀態，如果不是連接狀態則需要重連（new下即可）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <title></title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script>
        var ws;
        $().ready(function () {
            $('#conn').click(function () {
                ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/api/values/' + $("#user").val());
                $('#msg').append('<p>正在連接</p>');

                ws.onopen = function () {
                    $('#msg').append('<p>已經連接</p>');
                }
                ws.onmessage = function (evt) {
                    $('#msg').append('<p>' + evt.data + '</p>');
                }
                ws.onerror = function (evt) {
                    $('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
                }
                ws.onclose = function () {
                    $('#msg').append('<p>已經關閉</p>');
                }
            });

            $('#close').click(function () {
                ws.close();
            });

            $('#send').click(function () {
                if (ws.readyState == WebSocket.OPEN) {
                    ws.send($("#to").val() + "|" + $('#content').val());
                }
                else {
                    $('#tips').text('連接已經關閉');
                }
            });

        });
    </script>
</head>
<body>
    <div>
        <input id="user" type="text" />
        <input id="conn" type="button" value="連接" />
        <input id="close" type="button" value="關閉" /><br />
        <span id="tips"></span>
        發送內容<input id="content" type="text" />
        目的用戶<input id="to" type="text" />
        <input id="send" type="button" value="發送" /><br />
        <div id="msg">
        </div>
    </div>
</body>
</html>

View Code

服務器端部分

服務器端使用WebAPI，原例子是用的Handler來做，主要用WebSocket的類來實現。代碼中都有相對詳細的注釋，這邊只說一些需要注意的問題

1：Dictionary<string,WebSocket> CONNECT_POOL：用戶連接池。請求Handler的時候會將當前連接者的用戶ID傳入，服務器端維護着所有已連接的用戶ID和當前用戶的WebSocket連接對象

2：Dictionary<string,List<MessageInfo>> MESSAGE_POOL：離線消息池。如果A->B發送消息，B當前因為某種原因沒在線（突然斷網/黑屏等原因），會將這條消息先保存起來（2天），待B連接后立馬將B的離線消息推送給他。（2：MessageInfo：離線Entity。記錄當前離線消息的時間、內容）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Web.WebSockets;

namespace WebSocketService.Controllers
{
    public class ValuesController : ApiController
    {
        private static Dictionary<string, WebSocket> CONNECT_POOL = new Dictionary<string, WebSocket>();//用戶連接池
        private static Dictionary<string, List<MessageInfo>> MESSAGE_POOL = new Dictionary<string, List<MessageInfo>>();//離線消息池
        //[Route]
        [HttpGet]
        public HttpResponseMessage Get(string user)
        {
            //在服務端接受web socket請求，傳入的函數作為web socket的處理函數，待web socket建立后該函數會被調用，
            //在該函數中可以對web socket進行消息收發
            HttpContext.Current.AcceptWebSocketRequest(ProcessRequest);

            //構造同意切換至web socket的response
            return Request.CreateResponse(HttpStatusCode.SwitchingProtocols);
        }
        private async Task ProcessRequest(AspNetWebSocketContext context)
        {
            WebSocket socket = context.WebSocket;
            //HttpContextBase context2 = (HttpContextBase)Request.Properties["MS_HttpContext"];//獲取傳統context
            //HttpRequestBase request = context2.Request;//定義傳統request對象
            string user = context.RawUrl.Substring(context.RawUrl.LastIndexOf('/') + 1);// request.QueryString["user"].ToString();

            try
            {
                #region 用戶添加連接池
                //第一次open時，添加到連接池中
                if (!CONNECT_POOL.ContainsKey(user))
                    CONNECT_POOL.Add(user, socket);//不存在，添加
                else
                    if (socket != CONNECT_POOL[user])//當前對象不一致，更新
                    CONNECT_POOL[user] = socket;
                #endregion

                #region 離線消息處理
                if (MESSAGE_POOL.ContainsKey(user))
                {
                    List<MessageInfo> msgs = MESSAGE_POOL[user];
                    foreach (MessageInfo item in msgs)
                    {
                        await socket.SendAsync(item.MsgContent, WebSocketMessageType.Text, true, CancellationToken.None);
                    }
                    MESSAGE_POOL.Remove(user);//移除離線消息
                }
                #endregion

                string descUser = string.Empty;//目的用戶
                while (true)
                {
                    if (socket.State == WebSocketState.Open)
                    {
                        ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
                        WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, CancellationToken.None);

                        #region 消息處理（字符截取、消息轉發）
                        try
                        {
                            #region 關閉Socket處理，刪除連接池
                            if (socket.State != WebSocketState.Open)//連接關閉
                            {
                                if (CONNECT_POOL.ContainsKey(user)) CONNECT_POOL.Remove(user);//刪除連接池
                                break;
                            }
                            #endregion

                            string userMsg = Encoding.UTF8.GetString(buffer.Array, 0, result.Count);//發送過來的消息
                            string[] msgList = userMsg.Split('|');
                            if (msgList.Length == 2)
                            {
                                if (msgList[0].Trim().Length > 0)
                                    descUser = msgList[0].Trim();//記錄消息目的用戶
                                buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(msgList[1]));
                            }
                            else
                                buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(userMsg));

                            if (CONNECT_POOL.ContainsKey(descUser))//判斷客戶端是否在線
                            {
                                WebSocket destSocket = CONNECT_POOL[descUser];//目的客戶端
                                if (destSocket != null && destSocket.State == WebSocketState.Open)
                                    await destSocket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);
                            }
                            else
                            {
                                await Task.Run(() =>
                                {
                                    if (!MESSAGE_POOL.ContainsKey(descUser))//將用戶添加至離線消息池中
                                        MESSAGE_POOL.Add(descUser, new List<MessageInfo>());
                                    MESSAGE_POOL[descUser].Add(new MessageInfo(DateTime.Now, buffer));//添加離線消息
                                });
                            }
                        }
                        catch (Exception exs)
                        {
                            //消息轉發異常處理，本次消息忽略 繼續監聽接下來的消息
                        }
                        #endregion
                    }
                    else
                    {
                        break;
                    }
                }//while end
            }
            catch (Exception ex)
            {
                //整體異常處理
                if (CONNECT_POOL.ContainsKey(user)) CONNECT_POOL.Remove(user);
            }
        }

        /// <summary>
        /// 離線消息
        /// </summary>
        public class MessageInfo
        {
            public MessageInfo(DateTime _MsgTime, ArraySegment<byte> _MsgContent)
            {
                MsgTime = _MsgTime;
                MsgContent = _MsgContent;
            }
            public DateTime MsgTime { get; set; }
            public ArraySegment<byte> MsgContent { get; set; }
        }
        // POST api/values
        public void Post([FromBody]string value)
        {
        }

        // PUT api/values/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }
    }
}

View Code

PS:對Dictionary的操作可以寫兩個方案Add和Remove，並用lock，這樣子並發會穩定點

在本地測試過程中遇到的問題：

1、WebSocket請求提示握手失敗，這個是因為IIS沒有安裝WebSocket協議，在如下目錄安裝

來源：https://www.cnblogs.com/Tsong/p/6385585.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WebSocket實現前后端通訊 websocket后端的實現基於SuperSocket實現的WebSocket（后端） Java后端WebSocket的Jetty實現 WebSocket 實現前后端通信的筆記 Java后端WebSocket的Tomcat實現如何使用websocket實現前后端通信 Java后端WebSocket的Tomcat實現 .Net MVC 實現WebSocket JS通過WebSocket實現前后端通信實例