You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
147 lines
7.3 KiB
147 lines
7.3 KiB
{php include wl_template('common/header');}
|
|
<ul class="nav nav-tabs" id="myTab">
|
|
<li class="active"><a href="#tab_basic">通信设置</a></li>
|
|
</ul>
|
|
<div class="app-content">
|
|
<div class="app-form">
|
|
<form action="" method="post" class="form-horizontal form form-validate">
|
|
<div class="panel panel-default">
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label">通信方式</label>
|
|
<div class="col-sm-9">
|
|
<label class="radio-inline">
|
|
<input type="radio" name="data[type]" onclick="$('#imParams').addClass('hide')" value="0" {if $set['type'] != 1} checked {/if}> 普通通信
|
|
</label>
|
|
<label class="radio-inline">
|
|
<input type="radio" name="data[type]" onclick="$('#imParams').removeClass('hide')" value="1" {if $set['type'] == 1} checked {/if}> 多功能通信
|
|
</label>
|
|
<div class="help-block">
|
|
普通通信：即旧的通讯方式，仅支持发送文本信息。<br />
|
|
多功能通信：新的通讯方式支持文本、表情、图片、视频等等。但是配置复杂，需要修改服务器配置。多功能通信必须配置ssl证书！
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 多功能通知基本设置内容 -->
|
|
<div id="imParams" class="{if $set['type'] != 1}hide{/if}">
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label">请求端口</label>
|
|
<div class="col-sm-9">
|
|
<input type="number" name="data[port]" class="form-control" value="{$set['port']}">
|
|
<span class="help-block">请求时使用的端口。需要在服务器放行</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label">公钥文件路径(.pem文件)</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" name="data[pem_path]" class="form-control" value="{$set['pem_path']}">
|
|
<div class="help-block">公钥在服务器的绝对路径，例如：/www/server/data/ssl/pem.pem</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label">私钥文件路径(.key文件)</label>
|
|
<div class="col-sm-9">
|
|
<input type="text" name="data[key_path]" class="form-control" value="{$set['key_path']}">
|
|
<div class="help-block">私钥在服务器的绝对路径，例如：/www/server/data/ssl/pem.key</div>
|
|
</div>
|
|
</div>
|
|
{if $set['port'] && $set['key_path'] && $set['pem_path']}
|
|
<div class="form-group" id="testSocket">
|
|
<label class="col-sm-2 control-label">通信测试</label>
|
|
<div class="col-sm-9">
|
|
<input v-if="status != 1 && status != 2" type="button" @click="startLink()" value="链接测试" class="btn btn-info min-width" />
|
|
<div class="help-block" style="display: inline-block;color: #f16060;font-weight: bolder;">
|
|
<!-- 状态：0=未链接，1=链接中，2=通讯中，3=断开链接，可重连 -->
|
|
<span v-if="status == 0">未链接...</span>
|
|
<span v-if="status == 1">正在请求，链接中...</span>
|
|
<span v-if="status == 2">请求成功，通讯中...</span>
|
|
<span v-if="status == 3">断开链接...</span>
|
|
<span v-if="status == 4">链接失败，通讯不可用...</span>
|
|
<span v-if="status == 5">链接失败，当前浏览器不支持WebSocket通讯...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-sm-2 control-label"></label>
|
|
<div class="col-sm-9">
|
|
<input type="submit" name="submit" value="提交" class="btn btn-primary min-width" />
|
|
<input type="hidden" name="token" value="{$_W['token']}" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
let port = "{$set['port']}";
|
|
//判断是否支持websocket
|
|
new Vue({
|
|
el:"#testSocket",
|
|
data:{
|
|
wsUrl: '',
|
|
status: 0,//状态 0=未链接，1=链接中，2=通讯中，3=断开链接，可重连，4=链接失败，通讯不可用，5=不支持WebSocket
|
|
linkTimes: 0,//当前重连次数
|
|
max: 3,//最大重连次数
|
|
},
|
|
watch: {
|
|
'status'(){
|
|
//根据状态进行对应的操作
|
|
if(this.status == 0 && this.max > this.linkTimes){
|
|
this.linkTimes++;
|
|
this.startLink();
|
|
}
|
|
},
|
|
},
|
|
methods:{
|
|
//开始链接
|
|
startLink(){
|
|
//判断是否支持webSocket
|
|
if(!'WebSocket' in window) {
|
|
_this.status = 5;
|
|
return false;
|
|
}
|
|
//开始通信操作
|
|
let _this = this;
|
|
_this.status = 1;
|
|
_this.ws = new WebSocket(_this.wsUrl);
|
|
//链接成功
|
|
_this.ws.onopen = function (){
|
|
_this.status = 2;
|
|
console.log("通讯成功");
|
|
}
|
|
//获取返回的数据信息
|
|
_this.ws.onmessage = function(event){
|
|
//信息拼接
|
|
console.log(event);
|
|
}
|
|
//链接已关闭
|
|
_this.ws.onclose = function(event){
|
|
console.log(event);
|
|
//再次请求
|
|
if(_this.max > _this.linkTimes){
|
|
if(_this.status == 1) {
|
|
_this.status = 0;//链接中断开 请求运行PHP文件
|
|
} else {
|
|
_this.status = 3; //通讯中断开 断开链接，可以从新链接
|
|
}
|
|
}else{
|
|
//重连超出 链接失败 通讯不可用
|
|
_this.status = 4;
|
|
}
|
|
}
|
|
//错误抛出
|
|
_this.ws.error = function (e){
|
|
console.log('链接报错');
|
|
console.log(e);
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
//获取请求地址
|
|
let domain = document.domain;
|
|
this.wsUrl = 'wss://'+domain+':'+port;
|
|
}
|
|
});
|
|
</script>
|
|
{php include wl_template('common/footer');}
|