HTML5 WebSocketAPI執行個體(二)

統一背景代碼：

LogHelper.LogHelper _log = new LogHelper.LogHelper();
public void ProcessRequest(HttpContext context)
{
    //處理WebSocket 請求
    context.AcceptWebSocketRequest(DoWork);
}
/// <summary>
/// 委托處理函數定義
/// </summary>
/// <param name="context">目前WebSocket上下文</param>
/// <returns></returns>
public async Task DoWork(AspNetWebSocketContext context)
{
    //1.擷取目前WebSocket 對象
    WebSocket socket = context.WebSocket;
    //2.監視相應
    while (true)
    {
        /*
        * 此處緩存數組指定讀取用戶端資料的長度
        * 如果用戶端發送資料超過目前緩存區，則會讀取多次
        */
        ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[10]);
        //接收用戶端資訊
        CancellationToken token;
        WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, token);
        if (socket.State == WebSocketState.Open)
        {
            //1.擷取使用者送出内容
            string userMsg = Encoding.UTF8.GetString(buffer.Array, 0, buffer.Array.Length);
            //2.将内容以字元串的方式，傳回用戶端
            string echo = "您傳入的内容為：" + userMsg + ",資料總量：" + result.Count + ",資料類型" + result.MessageType;
            buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(echo));
            await socket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);
        }
        else { break; }
    }
}
           

1.發送二進制數組

<input type="button" value="發送" id="sendBtn" οnclick="sendClick();" />
<input type="button" value="關閉" id="closeBtn" οnclick="closeClick();" />
<div id="result"></div>
           

JS：

var url = 'ws://localhost:55373/ashx/upload2.ashx';
var ws = null;
ws = new WebSocket(url);
ws.onopen = function (e) {
    console.log('連結打開');
}
ws.onmessage = function (e) {
    showData(e.data);
}
ws.onclose = function (e) {
    console.info(e);
    console.log('連結已經關閉');
}
ws.onerror = function (e) {
    console.log('發生異常:' + e.message);
}
//顯示背景位元組數組
function showData(data) {
    var result = document.getElementById('result');
    result.innerHTML += data + '<br />';
}
//發送
function sendClick() {
    var content = new Int8Array([65, 66, 67, 68]);
    //如果發送緩沖區沒有資料才繼續發送
    if (ws.bufferedAmount <= 0) {
        ws.send(content);
    }
}
//關閉
function closeClick() {
    ws.close();
    ws = null;
}
           

2.發送字元串

<input type="button" value="打開連結" οnclick="openClick();" />
<input type="text" id="txt1" />
<input type="button" value="發送" id="sendBtn" οnclick="sendClick();" />
<input type="button" value="關閉" id="closeBtn" οnclick="closeClick();" />
<div id="result"></div>
           

JS：

var url = 'ws://localhost:55373/ashx/upload2.ashx';
var ws = null;
//打開連結
function openClick() {
    ws = new WebSocket(url);
    ws.onopen = function (e) {
        console.log('連結打開');
    }
    ws.onmessage = function (e) {
        showData(e.data);
    }
    ws.onclose = function (e) {
        console.info(e);
        console.log('連結已經關閉');
    }
    ws.onerror = function (e) {
        console.log('發生異常:' + e.message);
    }
}
//顯示背景傳送結果
function showData(data) {
    var result = document.getElementById('result');
    result.innerHTML += data + '<br />';
}
//發送
function sendClick() {
    var content = document.getElementById('txt1').value;
    //如果發送緩沖區沒有資料才繼續發送
    if (ws.bufferedAmount <= 0) {
        ws.send(content);
    }
}
//關閉
function closeClick() {
    ws.close();
    ws = null;
}
           

顯示說明：如果背景讀取緩沖區，小于發送内容，背景則分多次讀取

執行個體一： http://blog.csdn.net/u011127019/article/details/52457551

HTML5 WebSocket API簡介