通过HTTP请求Websocket

最新推荐文章于 2024-09-27 08:30:00 发布

zzvine

最新推荐文章于 2024-09-27 08:30:00 发布

阅读量1.5w

点赞数

分类专栏： WebSocket 文章标签： WebSocket

本文链接：https://blog.csdn.net/zt102545/article/details/85396360

版权

WebSocket 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

原理：客户端B(Client/Browser)通过websocket向服务端S发起连接，服务端保存这个websocket连接。当浏览器A(Browser)向服务端发起HTTP请求时，服务端S接收HTTP请求并通过websocket向客户端B返回消息。

流程图：

客户端B的代码：用html实现，用于发送websocket请求和接收。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>websocket client</title>
    <script type="text/javascript">
        //**************zzt****************
        var webSocket;
        //HTTP处理程序的地址
        var handlerUrl = "ws://localhost:8082/api/Values";

        function doConnection() {
            InitWebSocket();
        }

        function SendData() {
            var input = document.getElementById('sendText');
            //初始化WebSocket
            InitWebSocket();
            //如果WebSocket打开，发送数据
            if (webSocket.OPEN && webSocket.readyState == 1) {
                if (input.value != "")
                    webSocket.send(input.value);
            }

            //如果WebSocket关闭，显示消息
            if (webSocket.readyState == 2 || webSocket.readyState == 3) {
                alert("WebSocket关闭了，无法发送数据");
            }
        }

        function CloseWebSocket() {
            webSocket.close();
            webSocket = undefined;
        }

        function InitWebSocket() {

            //如果WebSocket对象未初始化，我们将初始化它
            if (webSocket == undefined) {
                webSocket = new WebSocket(handlerUrl);

                //打开连接处理程序
                webSocket.onopen = function () {
                    alert("WebSocket已连接");
                };

                //消息数据处理程序
                webSocket.onmessage = function (e) {
                    var label = '<li>' + e.data + '</li>';
                    $("#receiveText").append(label);
                };

                //关闭事件处理程序
                webSocket.onclose = function () {
                    alert("WebSocket closed.");
                };

                //错误事件处理程序
                webSocket.onerror = function (e) {
                    alert(e.message);
                };
            }
            else {
                //webSocket.open();没有open方法
            }
        }

        function doDeleteConnection(devid) {
            //初始化WebSocket
            InitWebSocket();

            //如果WebSocket打开，发送数据
            if (webSocket.OPEN && webSocket.readyState == 1) {

                webSocket.send("DelConnection^" + devid);
            }

            //如果WebSocket关闭，显示消息
            if (webSocket.readyState == 2 || webSocket.readyState == 3) {
                //document.getElementById("di_span").innerText = "WebSocket关闭了，无法发送数据";
                alert("WebSocket关闭了，无法发送数据");
            }
        }
        //**************zztend*************

    </script>
</head>
<body>
    <form id="sendForm">
        <input id="sendText" placeholder="Text to send" />
        <button type="button" onclick="SendData();">发送</button>
        <button type="button" onclick="doConnection();">连接</button>
        <button type="button" onclick="CloseWebSocket();">关闭</button>
        <br />
        <ul id="receiveText"></ul>
    </form>
</body>
</html>

客户端A的代码：同样用HTML实现，用于发送Http请求。

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>http client</title>
    <script type="text/javascript">
        function SendData() {
            var sendtext = $("#sendText").val();
            $.ajax({
                type: 'GET',
                url: 'http://localhost:8082/api/Values?text=' + sendtext,
                dataType: "jsonp",  //数据格式设置为jsonp
                jsonp: "callback", //Jquery生成验证参数的名称
                success: function (e) {

                }
            });
        }
    </script>
</head>
<body>
    <form id="sendForm">
        <input id="sendText" placeholder="Text to send" />
        <button type="button" onclick="SendData();">发送</button>
    </form>
</body>
</html>

服务端S的代码：用Web API实现，用于接收HTTP和Websocket，还有返回Websocket消息。

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

namespace WebSocketServer.Controllers
{
    public class ValuesController : ApiController
    {
        private static Dictionary<string, object> ws = new Dictionary<string, object>();
        // GET api/values
        public HttpResponseMessage Get()
        {
            //检查 查询是否是WebSocket请求
            if (HttpContext.Current.IsWebSocketRequest)
            {
                //如果是，我们附加异步处理程序
                HttpContext.Current.AcceptWebSocketRequest(ProcessWSMsg);
            }
            else
            {
                //否则，认为是HTTP请求
                if (ws.Count > 0)
                {
                    var WebSocket = ws["1"];
                    var Content = HttpContext.Current.Request["text"];
                    BackWs((WebSocket)WebSocket, Content);

                }
            }
            return new HttpResponseMessage(HttpStatusCode.SwitchingProtocols);
        }

        private async Task ProcessWSMsg(AspNetWebSocketContext arg)
        {
            //获取当前的WebSocket对象
            WebSocket webSocket = arg.WebSocket;
            if (ws.ContainsKey("1"))
                ws["1"] = webSocket;
            else
                ws.Add("1", webSocket);
            /*
             * 我们定义一个常数，它将表示接收到的数据的大小。 它是由我们建立的，我们可以设定任何值。 我们知道在这种情况下，发送的数据的大小非常小。
            */
            const int maxMessageSize = 1024;

            //received bits的缓冲区
            var receivedDataBuffer = new ArraySegment<Byte>(new Byte[maxMessageSize]);

            var cancellationToken = new CancellationToken();

            //检查WebSocket状态
            while (webSocket.State == WebSocketState.Open)
            {
                //读取数据 
                WebSocketReceiveResult webSocketReceiveResult = await webSocket.ReceiveAsync(receivedDataBuffer, cancellationToken);

                //如果输入帧为取消帧，发送close命令
                if (webSocketReceiveResult.MessageType == WebSocketMessageType.Close)
                {
                    await webSocket.CloseAsync(WebSocketCloseStatus.NormalClosure, String.Empty, cancellationToken);
                }
                else
                {
                    byte[] payloadData = receivedDataBuffer.Array.Where(b => b != 0).ToArray();

                    //因为我们知道这是一个字符串，我们转换它
                    string receiveString = System.Text.Encoding.UTF8.GetString(payloadData, 0, payloadData.Length);

                    //将字符串转换为字节数组. 
                    var newString = String.Format("Hello, " + receiveString + " ! Time {0} 消息来自客户端B", DateTime.Now.ToString());
                    Byte[] bytes = System.Text.Encoding.UTF8.GetBytes(newString);

                    //发回数据
                    await webSocket.SendAsync(new ArraySegment<byte>(bytes), WebSocketMessageType.Text, true, cancellationToken);
                }

            }
        }

        /// <summary>
        /// 返回websocket消息
        /// </summary>
        /// <param name="webSocket"></param>
        /// <param name="Content"></param>
        private void BackWs(WebSocket webSocket,string Content)
        {
            var cancellationToken = new CancellationToken();

            Content = String.Format("Hello, " + Content + " ! Time {0} 消息来自客户端A", DateTime.Now.ToString());
            //检查WebSocket状态
            if (webSocket.State == WebSocketState.Open)
            {
                //将字符串转换为字节数组. 
                Byte[] bytes = System.Text.Encoding.UTF8.GetBytes(Content);
                //发回数据
                webSocket.SendAsync(new ArraySegment<byte>(bytes), WebSocketMessageType.Text, true, cancellationToken);

            }
        }

    }
}

实现效果：