WebSocketBaseTestTool
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>WebSocket Test</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="row">
        <div class="col-xs-6">
            <div class="input-group">
                <span class="input-group-addon">WS HOST</span>
                <input type="text" id="wsHost" value="ws://8.129.219.65:9503" class="form-control" placeholder="ws://127.0.0.1:8080">
            </div>
        </div>
        <div class="col-xs-6 controllerArea" style="display: none;">
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" id="linkSocket" class="btn btn-success">连接</button>
                <button type="button" id="closeSocket" class="btn btn-danger">断开</button>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-12">
                    <div>

                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="active">
                              <a href="#home" aria-controls="home" role="tab" data-toggle="tab">发送内容</a>
                            </li>
                            <li role="presentation">
                                <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">心跳设置</a>
                            </li>
                          <!-- <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> -->
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content" style="padding: 10px;">
                          <div role="tabpanel" class="tab-pane active" id="home">
                                <textarea name="" id="sendContent" cols="53" rows="10"></textarea>
                                <button type="button" id="sendMessage" class="btn btn-primary" disabled='disabled'>发送消息</button>
                          </div>
                          <div role="tabpanel" style="padding: 10px;" class="tab-pane" id="profile">
                            <div class="row">
                                <div class="col-xs-12">
                                    <p>需要断开后才能更改</p>
                                    <div class="input-group">
                                        <span class="input-group-addon">心跳(S)</span>
                                        <input type="number" id="heartBeatSecond" class="form-control" placeholder="默认无心跳">
                                    </div>
                                    <div role="tabpanel" class="tab-pane active" id="home">
                                        <textarea name="" id="sendHertContent" cols="53" rows="10"></textarea>
                                        <button type="button" id="sendHertMessage" class="btn btn-primary">设置心跳</button>
                                  </div>
                                </div>
                            </div>
                          </div>
                          <!-- <div role="tabpanel" class="tab-pane" id="messages">...</div> -->
                        </div>

                      </div>
                </div>
            </div>
            <div class="row">

            </div>
        </div>


        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading" style="position: relative;height: 50px;">
                  <h3 class="panel-title" style="display: inline-block;">消息通知</h3>
                  <button style="position: absolute;right: 10px;" type="button" id="clearMessage" class="btn btn-primary">清除</button>
                </div>
                <div class="panel-body messageNot">
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="./js/index.js"></script>
</body>
</html>