<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Sample of websocket with VDN</title>
    <style>
        .jsontotable table,
        .jsontotable th,
        .jsontotable td {
            border: 1px solid black;
            margin: 10px;
            padding: 5px;
            font-size: 12pt;
        }
        
        body {
            line-height: 75%;
            font-family: 宋体, 黑体;
            font-size: 10pt;
        }
        
        table {
            font-size: 100%;
            text-align: left;
            margin-top: 1em;
        }
        
        tr {
            margin: .50em;
            vertical-align: top;
        }
        
        td {
            margin: .50em;
            vertical-align: middle;
            background-color: #EEE;
            padding: 2px;
        }
        
        .content {
            width: 600px;
            height: 200px;
            color: #FFFF00;
            background-color: #000000;
            font-size: 10px;
            overflow: scroll;
            line-height: 100%;
        }
    </style>

    <script language='javascript' src="scripts/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.jsontotable.min.js"></script>
    <script>
        //服务器地址
        var serverURL;
        var ws;
        //clear outpub
        function clear() {
            $("#t_all").text("");
            $("#t_return").text("");
            $("#jsontotable-obj").html("");
        }
        $(document).ready(function() {
            try {
            	var ishttps = 'https:' == document.location.protocol ? true: false;
            	if (ishttps){
            		$("#t_server").val("wss://" +window.location.host +"/ws");	
            	} else {
            		$("#t_server").val("ws://" +window.location.host +"/ws");
            	}
                serverURL = $("#t_server").val();
                var $ul = $('#msg-list');
                //var ws = new WebSocket("http://www.vesn.net:8088/ws");
                //初始化Ws并登录
                $("#bLogin").click(function() {
                    ws = new WebSocket(serverURL);
                    //open之后立即发送登录消息
                    ws.onopen = function(e) {
                        ws.send('{"id":"login","method":"online","params":{"Group":"通用","Soft":"App","UserID":"8888","UserName":"小明","MsgFormat":"json","Online":"^self","GetOnlineMsg":"1","GetSimpleOnlne":"1"}}');
                        $("#bSend").attr("disabled", false);
                        $("#bLoginOut").attr("disabled", false);
                        $("#bLogin").attr("disabled", "disabled");
                    };
                    //close event
                    ws.onclose = function() {
                        $('<li>').text("连接关闭").appendTo($ul);
                        $("#bSend").attr("disabled", "disabled");
                        $("#bLoginOut").attr("disabled", "disabled");
                        $("#bLogin").attr("disabled", false);
                    };
                    //消息到达
                    ws.onmessage = function(e) {
                        try {
                            clear();
                            //消息主体
                            $('#t_all').text(event.data);
                            //构建
                            var obj = JSON.parse(event.data);
                            //核心内容
                            $('#t_return').text(JSON.stringify(obj.Result));
                            if (obj.Error == null) {
                                //分析 obj.ID 对应Send数据是的JSON的ID
                                switch (obj.ID) {
                                    case "login":
                                        $('<li>').text("登录成功,ResponseID:" + obj.Result.ResponseID).appendTo($ul);
                                        break;
                                    case "online":
                                        var user = obj.Result
                                        $('<li>').text(user.UserName + "登录").appendTo($ul);
                                        break;
                                    case "outline":
                                        var user = obj.Result
                                        $('<li>').text(user.ID + "注销").appendTo($ul);
                                        break;
                                    case "msg":
                                        var msg = obj.Result
                                        $('<li>').text(msg.FromUserID + "说:" + msg.Msg).appendTo($ul);
                                        break;
                                    case "send": //消息发送成功返回
                                        var msg = obj.Result
                                        $('<li>').text("消息成功发送给 " + msg.succeed + " 个人").appendTo($ul);
                                        break;
                                    case "GetData": //获取数据
                                        //parse table
                                        $.jsontotable(JSON.parse(obj.Result).rows, {
                                            id: "#jsontotable-obj"
                                        });
                                        break;
                                    default:
                                        $('<li>').text("Other Type:" + obj.ID).appendTo($ul);
                                }
                            } else {
                                //Error 系统返回错误信息
                                alert(obj.Error.Message + "(" + obj.Error.Code.toString() + ")")
                            }
                        } catch (e) {
                            $('<li>').text(event.data).appendTo($ul);
                            alert(e.name + ":" + e.message + " code:" + e.number);
                        }
                    }
                });
                //发送消息
                $('#bSend').click(function() {
                    //确认目标
                    var sTo;
                    switch ($("#d_to").val()) {
                        case "all":
                            sTo = "all"
                            break;
                        case "$all":
                            sTo = "$all"
                            break;
                        case "ResponseID":
                            sTo = $("#t_name").val()
                            break;
                        default:
                            sTo = $("#d_to").val() + ":" + $("#t_name").val()
                            break;
                    }
                    var msg = {
                        to: sTo,
                        msgType: "msg",
                        msg: $("#t_msg").val()
                    };
                    var data = {
                        ID: "send",
                        method: "send",
                        Params: msg
                    };
                    var jsonStr = JSON.stringify(data);
                    ws.send(jsonStr);
                });
                //注销
                $("#bLoginOut").click(function() {
                    ws.close();
                });
                $('#bGetData').click(function() {
                    try {
                        var data = {
                            ID: "GetData",
                            method: "[PBPlugin].f_getdata",
                            Params: ["a1", "a2"]
                        };
                        var jsonStr = JSON.stringify(data);
                        ws.send(jsonStr);
                    } catch (e) {
                        //代码发生异常
                        alert(e.name + ":" + e.message + " code:" + e.number);
                    }
                    return false;
                });
            } catch (e) {
                //代码发生异常
                alert(e.name + ":" + e.message + " code:" + e.number);
            }
        });
    </script>
</head>

<body>
    <form id="form1" runat="server">
        <h3>WebSocket示例</h3>
        <h4>
            完整信息</h4>
        <textarea id="t_all" style="width: 559px; height: 80px;"></textarea>
        <h4>
            核心信息</h4>
        <textarea id="t_return" style="width: 559px; height: 70px;"></textarea>
        <h4>
            构建数据表</h4>
        <div id="jsontotable-obj" class="jsontotable">
        </div>

        <h4>
            服务器URL</h4>
        <div>
            <input type="text" id="t_server" value="ws://localhost:8088/ws" onchange="serverURL=this.value;" style="width:500px" />
            <input type="button" id="bLogin" value="登录" />
            <input type="button" id="bLoginOut" value="注销" disabled="disabled" />
        </div>
        <p>
            消息: <input id="t_msg" type="text" value="hello world" style="width:500px;" /> </p>
        <p>目标: <select name="d_to" id="d_to" class="EditControl">
                        <option selected=selected value="all">all</option>
                        <option  value="$all">$all</option>
                        <option  value="group">group</option>
                        <option  value="$group">$group</option>
                        <option  value="user">user</option>
                        <option  value="ResponseID">ResponseID</option>
                    </select> 名称/ID: <input id="t_name" type="text" />
            <input type="button" id="bSend" value="发送消息" disabled="disabled" />
        </p>
        <h4>
            调用WebAPI</h4>
        <p> <input type="button" id="bGetData" value="获取数据" /></p>
        <h4>
            消息列表</h4>
        <div class="content">
            <ul id="msg-list"></ul>
        </div>
    </form>
</body>

</html>