wildfirechat
/
docs
镜像自地址 https://gitee.com/wfchat/docs.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169
							<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta content="在线WebSocket物联网开发调试测试工具" name="description">
    <meta content="websocket ws wss 在线测试 调试 工具 物联网" name="keywords">

    <!-- 样式表 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="https://static.wildfirechat.cn/static/animate.min.css">
    <link rel="stylesheet" href="css/wstool.css">
    <link rel="stylesheet" href="https://static.wildfirechat.cn/static/qtcreator_light.min.css">

    <title>websocket/ws/wss在线调试测试工具</title>
</head>
<body>

<div id="root">
    <!-- 过渡动效警告框 -->
    <template>
        <transition name="slide-fade">
            <div class="alert ws-alert monospace" :class=" 'alert-' + alert.class " v-if="alert.state">
                {{alert.content}}
            </div>
        </transition>
    </template>
    <!-- 头部导航 -->
    <nav class="navbar navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand monospace" href="javascript:void(0)">
                <span>WEBSOCKET</span>
                <small>在线测试工具</small>
            </a>
        </div>
    </nav>
    <!-- 主体内容 -->
    <template>
        <div class="container mt-3 main-container">
            <div class="row monospace">
                <div class="col-sm-12">
                    <div class="card">
                        <!-- 应用容器 -->
                        <div class="card-body">
                            <div class="row">
                                <!-- 左侧面板 -->
                                <div class="col-sm-12 col-md-5">
                                    <!-- 服务设置 -->
                                    <div class="col-sm-12">
                                        <h5 class="card-title">服务器配置 状态: {{ instance.readyState | rStatus }}</h5>
                                        <hr class="divider divider-dashed">
                                        <!-- 连接地址 -->
                                        <div class="card-text">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">服务地址</div>
                                                </div>
                                                <input type="text" class="form-control" placeholder="ws://im-server-host:8083" v-model="address">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-block" :class="connected ? 'btn-danger' : 'btn-success'" @click="autoWsConnect">{{ connected ? '关闭连接' : '开启连接' }}</button>
                                                </div>
                                            </div>
                                            <div class="wf-tip">
                                                说明：
                                                <div style="color: red">0. 测试ws（非 wss）连接时，请确保本网页是通过 http 方式加载，如果不是的话，需要手动调整为 http 方式加载</div>
                                                <div>1. im-server-host 填节点域名</div>
                                                <div>2. websocket(ws) 端口默认是 8083</div>
                                                <div>3. secure websocket(wss) 端口默认是 8084</div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 发包设置 -->
                                    <div class="col-sm-12 mt-3">
                                        <h5 class="card-title">发包设置</h5>
                                        <hr class="divider divider-dashed">
                                        <!-- 自动发送 -->
                                        <div class="card-text">
                                            <div class="input-group">
                                                <div class="input-group-prepend">
                                                    <div class="input-group-text">每隔</div>
                                                </div>
                                                <input title="" type="text" class="form-control text-center" v-model="heartBeatSecond" :disabled="!connected">
                                                <div class="input-group-append input-group-prepend">
                                                    <span class="input-group-text">秒发送内容</span>
                                                </div>
                                                <input title="" type="text" class="form-control" v-model="heartBeatContent" :disabled="!connected">
                                                <div class="input-group-append">
                                                    <button type="button" class="btn btn-block" :class="autoSend ? 'btn-danger' : 'btn-success'" @click="autoHeartBeat" :disabled="!connected">{{ autoSend ? '停止发送' : '开始发送' }}</button>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 手动发送 -->
                                        <div class="card-text mt-2">
                                            <textarea class="form-control mt-1" id="exampleTextarea" rows="2" placeholder="需要发送到服务端的内容" v-model="content" :disabled="!connected"></textarea>
                                            <div class="custom-control custom-checkbox inline-flex mt-2">
                                                <input type="checkbox" class="custom-control-input" id="sendClean" v-model="sendClean" :disabled="!connected">
                                                <label class="custom-control-label" for="sendClean">发包清空输入</label>
                                            </div>
                                        </div>
                                        <div class="card-text mt-2">
                                            <button class="btn btn-block btn-success" :disabled="!connected" @click="sendData">发送到服务端</button>
                                        </div>
                                    </div>
                                    <!-- 调试消息 -->
                                    <div class="col-sm-12 mt-3">
                                        <h5 class="card-title">调试消息</h5>
                                        <hr class="divider divider-dashed">
                                        <div class="card-text">
                                            <div class="card-title console-box" id="console-box">
                                                <div class="mb-2" v-for="item in consoleData">
                                                    <strong :class="'text-'+item.type">{{item.time}} => </strong> <span>{{item.content}}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 右侧面板 -->
                                <div class="col-sm-12 col-md-7">
                                    <!-- 消息记录 -->
                                    <div class="col-sm-12">
                                        <h5 class="card-title" style="display: inline">消息记录</h5>
                                        <a href="javascript:void(0);" @click="cleanMessage">清空消息</a>
                                        <hr class="divider divider-dashed">
                                        <div>
                                            <div class="custom-control custom-checkbox inline-flex mt-2">
                                                <input type="checkbox" class="custom-control-input" id="recvClean" v-model="recvClean" :disabled="!connected">
                                                <label class="custom-control-label" for="recvClean">收包清空记录</label>
                                            </div>
                                            <div class="custom-control custom-checkbox inline-flex mt-2">
                                                <input type="checkbox" class="custom-control-input" id="recvDecode" v-model="recvDecode" :disabled="!connected">
                                                <label class="custom-control-label" for="recvDecode">收包JSON解码</label>
                                            </div>
                                            <div class="custom-control custom-checkbox inline-flex mt-2">
                                                <input type="checkbox" class="custom-control-input" id="recvPause" v-model="recvPause" :disabled="!connected">
                                                <label class="custom-control-label" for="recvPause">暂停接收</label>
                                            </div>
                                        </div>
                                        <hr class="divider divider-dashed">
                                        <div class="card-text message-box" id="message-box">
                                            <template v-for="item in messageData">
                                                <div class="mb-4" :class="{ 'text-left' : item.direction , 'text-left' : !item.direction }">
                                                    <strong><span :class="{'text-success' : item.direction , 'text-primary' : !item.direction}">{{item.direction ? '发送' : '收到'}}消息</span> {{item.time}}</strong>
                                                    <div class="monospace" v-if="!recvDecode"> {{ item.content }}</div>
                                                    <div class="monospace" v-html='JSON.format(item.content)' v-if="recvDecode"></div>
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>
</div>

<!-- 页面脚本 -->
<script src="https://static.wildfirechat.cn/static/vue.js"></script>
<script src="https://static.wildfirechat.cn/static/moment.min.js"></script>
<script src="https://static.wildfirechat.cn/static/highlight.min.js"></script>
<script src="https://static.wildfirechat.cn/static/json.min.js"></script>
<script src="css/format.js"></script>
<script src="css/socket.js"></script>

</body>
</html>