mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2025-11-04 05:00:25 +08:00
实现websocket基本功能
This commit is contained in:
GoEdgeLab
161
web/public/js/components/server/http-websocket-box.js
Normal file
161
web/public/js/components/server/http-websocket-box.js
Normal file
@@ -0,0 +1,161 @@
|
||||
Vue.component("http-websocket-box", {
|
||||
props: ["v-websocket-ref", "v-websocket-config", "v-is-location"],
|
||||
data: function () {
|
||||
let websocketRef = this.vWebsocketRef
|
||||
if (websocketRef == null) {
|
||||
websocketRef = {
|
||||
isPrior: false,
|
||||
isOn: true,
|
||||
websocketId: 0
|
||||
}
|
||||
}
|
||||
|
||||
let websocketConfig = this.vWebsocketConfig
|
||||
if (websocketConfig == null) {
|
||||
websocketConfig = {
|
||||
id: 0,
|
||||
isOn: true,
|
||||
handshakeTimeout: {
|
||||
count: 30,
|
||||
unit: "second"
|
||||
},
|
||||
allowAllOrigins: true,
|
||||
allowedOrigins: [],
|
||||
requestSameOrigin: true,
|
||||
requestOrigin: ""
|
||||
}
|
||||
} else {
|
||||
if (websocketConfig.handshakeTimeout == null) {
|
||||
websocketConfig.handshakeTimeout = {
|
||||
count: 30,
|
||||
unit: "second",
|
||||
}
|
||||
}
|
||||
if (websocketConfig.allowedOrigins == null) {
|
||||
websocketConfig.allowedOrigins = []
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
websocketRef: websocketRef,
|
||||
websocketConfig: websocketConfig,
|
||||
handshakeTimeoutCountString: websocketConfig.handshakeTimeout.count.toString(),
|
||||
advancedVisible: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
handshakeTimeoutCountString: function (v) {
|
||||
let count = parseInt(v)
|
||||
if (!isNaN(count) && count >= 0) {
|
||||
this.websocketConfig.handshakeTimeout.count = count
|
||||
} else {
|
||||
this.websocketConfig.handshakeTimeout.count = 0
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
isOn: function () {
|
||||
return (!this.vIsLocation || this.websocketRef.isPrior) && this.websocketRef.isOn
|
||||
},
|
||||
changeAdvancedVisible: function (v) {
|
||||
this.advancedVisible = v
|
||||
},
|
||||
createOrigin: function () {
|
||||
let that = this
|
||||
teaweb.popup("/servers/server/settings/websocket/createOrigin", {
|
||||
height: "12.5em",
|
||||
callback: function (resp) {
|
||||
that.websocketConfig.allowedOrigins.push(resp.data.origin)
|
||||
}
|
||||
})
|
||||
},
|
||||
removeOrigin: function (index) {
|
||||
this.websocketConfig.allowedOrigins.$remove(index)
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="hidden" name="websocketRefJSON" :value="JSON.stringify(websocketRef)"/>
|
||||
<input type="hidden" name="websocketJSON" :value="JSON.stringify(websocketConfig)"/>
|
||||
<table class="ui table definition selectable">
|
||||
<prior-checkbox :v-config="websocketRef" v-if="vIsLocation"></prior-checkbox>
|
||||
<tbody v-show="(!this.vIsLocation || this.websocketRef.isPrior)">
|
||||
<tr>
|
||||
<td class="title">是否启用配置</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" v-model="websocketRef.isOn"/>
|
||||
<label></label>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody v-show="isOn()">
|
||||
<tr>
|
||||
<td>允许所有来源域<em>（Origin）</em></td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" v-model="websocketConfig.allowAllOrigins"/>
|
||||
<label></label>
|
||||
</div>
|
||||
<p class="comment">选中表示允许所有的来源域。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody v-show="isOn() && !websocketConfig.allowAllOrigins">
|
||||
<tr>
|
||||
<td>允许的来源域列表<em>（Origin）</em></td>
|
||||
<td>
|
||||
<div v-if="websocketConfig.allowedOrigins.length > 0">
|
||||
<div class="ui label tiny" v-for="(origin, index) in websocketConfig.allowedOrigins">
|
||||
{{origin}} <a href="" title="删除" @click.prevent="removeOrigin(index)"><i class="icon remove"></i></a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
<button class="ui button tiny" type="button" @click.prevent="createOrigin()">+</button>
|
||||
<p class="comment">只允许在列表中的来源域名访问Websocket服务。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<more-options-tbody @change="changeAdvancedVisible" v-show="isOn()"></more-options-tbody>
|
||||
<tbody v-show="isOn() && advancedVisible">
|
||||
<tr>
|
||||
<td>是否传递请求来源域</td>
|
||||
<td>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" v-model="websocketConfig.requestSameOrigin"/>
|
||||
<label></label>
|
||||
</div>
|
||||
<p class="comment">选中表示把接收到的请求中的<span class="ui label tiny">Origin</span>字段传递到源站。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody v-show="isOn() && advancedVisible && !websocketConfig.requestSameOrigin">
|
||||
<tr>
|
||||
<td>指定传递的来源域</td>
|
||||
<td>
|
||||
<input type="text" v-model="websocketConfig.requestOrigin" maxlength="200"/>
|
||||
<p class="comment">指定向源站传递的<span class="ui label tiny">Origin</span>字段值。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- TODO 这个选项暂时保留 -->
|
||||
<tbody v-show="isOn() && false">
|
||||
<tr>
|
||||
<td>握手超时时间<em>（Handshake）</em></td>
|
||||
<td>
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" maxlength="10" v-model="handshakeTimeoutCountString" style="width:6em"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
秒
|
||||
</div>
|
||||
</div>
|
||||
<p class="comment">0表示使用默认的时间设置。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="margin"></div>
|
||||
</div>`
|
||||
})
|
||||
@@ -39,9 +39,6 @@
|
||||
.left-box.disabled {
|
||||
opacity: 0.1;
|
||||
}
|
||||
.left-box.disabled:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
.left-box.tiny {
|
||||
top: 10.5em;
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -52,10 +52,6 @@
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.left-box.disabled:hover {
|
||||
opacity: 1.0;
|
||||
}
|
||||
|
||||
.left-box.tiny {
|
||||
top: 10.5em;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,11 @@
|
||||
{$layout}
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "../location_menu"}
|
||||
{$template "../left_menu"}
|
||||
|
||||
<div class="right-box tiny">
|
||||
<p class="ui message">此功能暂未开放，敬请期待。</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,5 +1,4 @@
|
||||
{$layout}
|
||||
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{$layout}
|
||||
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
{$layout}
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "../location_menu"}
|
||||
{$template "../left_menu"}
|
||||
|
||||
<div class="right-box tiny">
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<input type="hidden" name="webId" :value="webId"/>
|
||||
<http-websocket-box :v-websocket-ref="websocketRef"
|
||||
:v-websocket-config="websocketConfig"
|
||||
:v-is-location="true"></http-websocket-box>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyReloadSuccess("保存成功")
|
||||
})
|
||||
@@ -0,0 +1,6 @@
|
||||
{$layout}
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
<p class="ui message">此功能暂未开放，敬请期待。</p>
|
||||
</div>
|
||||
@@ -0,0 +1,15 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>添加来源域</h3>
|
||||
<form class="ui form" data-tea-success="success" data-tea-action="$">
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">来源域 *</td>
|
||||
<td>
|
||||
<input type="text" name="origin" maxlength="200" placeholder="比如 example.com" ref="focus"/>
|
||||
<p class="comment">允许客户端通过Websocket可以访问的域名，可以使用星号通配符（*）来表示匹配一组域名，比如www.example.com *.google.com</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
})
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyReloadSuccess("保存成功")
|
||||
})
|
||||
Reference in New Issue
Block a user