HTML5 WebSocket+Asp.Net 實例四-用戶標識，後臺推送

一、Asp.Net 後臺操作定義

注：當前示例僅考慮了單個鏈接的打開，對於多頁面打開或者換瀏覽器打開的情況沒做處理。

/// <summary>
/// Socket後臺代碼示例
/// </summary>
public class SocketOneController : Controller
{
    static Dictionary<string, WebSocket> CONNECT_POOL = new Dictionary<string, WebSocket>();//用戶連接池
    //測試1,定義socke監聽
    public void One(string user)
    {
        HttpContextBase context = ControllerContext.HttpContext;
        context.AcceptWebSocketRequest(async (ctx) =>
        {
            //開啓socket監聽
            WebSocket socket = ctx.WebSocket;

            while (true)
            {
                ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[1024]);
                CancellationToken token;
                if (socket.State == WebSocketState.Open)
                {
                    //後臺上線處理
                    if (CONNECT_POOL.Keys.Contains(user) == false)
                        CONNECT_POOL.Add(user, socket);

                    WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, token);
                    string userMessage = Encoding.UTF8.GetString(buffer.Array, 0, result.Count);

                    userMessage = "You sent: " + userMessage + " at " +
                    DateTime.Now.ToLongTimeString();

                    //響應處理
                    buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(userMessage));
                    await socket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);
                }
                else
                {
                    //離線處理
                    CONNECT_POOL.Remove(user);
                    break;
                }
            }
        });
    }
    //後臺執行發送操作
    public string Handle(string user)
    {
        if (CONNECT_POOL.Keys.Contains(user) == false)
            return "當前連接已經斷開";

        WebSocket socket = CONNECT_POOL[user];

        byte[] bytes = Encoding.UTF8.GetBytes($"後臺發送通知 at {DateTime.Now.ToString()}");
        ArraySegment<byte> buffer = new ArraySegment<byte>(bytes);
        socket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);

        return "操作成功";
    }
}

二、Html5 前臺簡單代碼示例

var url = 'ws://localhost:61870/socketone/one?user=' + $('#userOne').val();
var ws = new WebSocket(url);
ws.onopen = function () {
    console.info('創建連接成功');
}
ws.onmessage = function (e) {
    var data = e.data;
    console.info(data);
}
ws.onerror = function (e) {
    console.error(e);
}
ws.onclose = function () {
    console.info('連接關閉');
}
//發送內容處理
$('#btnOne').click(function () {
    if (ws.readyState == WebSocket.OPEN) {
        ws.send("來此客戶端測試內容");
    } else {
        console.error('連接已經關閉');
    }
});
//關閉連接
$('#btnTwo').click(function () {
    ws.close();
});

 

更多：

HTML5 WebSocket實例（三）-文件上傳處理

HTML5 WebSocketAPI實例(二)

HTML5 WebSocket實例（一）