HTML5 WebSocketAPI实例(二)

来源：互联网发布：the zen of python 编辑：程序博客网时间：2024/06/08 14:31

统一后台代码：

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" onclick="sendClick();" /><input type="button" value="关闭" id="closeBtn" onclick="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="打开链接" onclick="openClick();" /><input type="text" id="txt1" /><input type="button" value="发送" id="sendBtn" onclick="sendClick();" /><input type="button" value="关闭" id="closeBtn" onclick="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简介

0 0