@page
@model Waste.Web.Entry.Pages.Socket.TestModel
@{
}
<div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="Url" id="Url" value="wss://bright.ljflytjl.cn:9101/device_rpc" placeholder="请输入socket地址" />
                </div>
            </div>
            <div class="layui-inline">
                <button class="btn btn-primary btn-lg  js-start" type="button">连接</button>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input"  id="Content"  placeholder="请输入发送内容" />
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="btn btn-primary btn-lg  js-send" type="button">发送</button>
                    <button class="btn btn-primary btn-lg  js-connect" type="button">握手</button>
                    <button class="btn btn-primary btn-lg  js-hello" type="button">sayHello</button>
                </div>
            </div>
        </div>
        <div class="layui-form">
           <div id="div_receive"></div>
        </div>
    </div>
</div>
@section Scripts{ 
<script type="text/javascript">
    //第一步调用 /
    $(".js-start").on("click", function () {
        initWebSocket();
    });
    $(".js-send").on("click", function () {
        var val = $("#Content").val();
        sendData("", val, "");
    });
    $(".js-connect").on("click", function () {
        var val = {
            "protocol": "json",
            "version":1
        };
        var data = JSON.stringify(val);
        sendData(data);
    });
    $(".js-hello").on("click", function () {
        var val = {
            "protocol": "messagepack",
            "version": 1
        };
        var data = JSON.stringify(val);
        sendData(data);
    });
    var webSocket;
    //d:内容
    function sendData(d) {
        initWebSocket();
        if (webSocket.OPEN && webSocket.readyState == 1) {
            //let time = new Date().getTime(); //1603009495724,精确到毫秒
            //var s = {
            //    "type": 1,
            //    "headers": {
            //        "device": "08d92497-09cb-4d1d-8c47-44443caa6896",
            //        "secret": "oWxxKZwwHvVxQhdE",
            //        "time": time,
            //        "os": 12,
            //        "script": 2,
            //        "baseProgrameLang": 109,
            //        "dev": true
            //    },
            //    "invocationId": "Nil",
            //    "target": "sayHello",
            //    "arguments": [
            //        "Hello Test Message"
            //    ]
            //};
            var s = "<";
            webSocket.send(d+s);
        }
        if (webSocket.readyState == 2 || webSocket.readyState == 3) {
            $("#div_receive").append("WebSocket closed");
        }
    }
    function initWebSocket() {
        var url = $("#Url").val();
        if (!webSocket) {
            webSocket = new WebSocket(url);
            //Open connection  handler.
            webSocket.onopen = function () {
                $("#div_receive").append("WebSocket opened" + "<br>");

            };

            //Message data handler.
            webSocket.onmessage = function (e) {
                $("#div_receive").append(e.data + "<br>");
            };

            //Close event handler.
            webSocket.onclose = function () {
                $("#div_receive").append("WebSocket closed." + "<br>");
            };

            //Error event handler.
            webSocket.onerror = function (e) {
                $("#div_receive").append(e.message + "<br>");
            }
        }
    }
</script>
}