feat: complate websocket plugin
This commit is contained in:
72
packages/plugins/public/index.html
Normal file
72
packages/plugins/public/index.html
Normal file
@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<!-- UC应用模式 -->
|
||||
<meta name="browsermode" content="application">
|
||||
<!-- QQ应用模式 -->
|
||||
<meta name="x5-page-mode" content="app">
|
||||
<title>MiaoConsole 调试工具</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/avalon2@2.2.10/dist/avalon.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/js-yaml@3.13.0/dist/js-yaml.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/messenger-hubspot@1.5.0/build/js/messenger.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/messenger-hubspot@1.5.0/build/js/messenger-theme-future.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/xterm.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/addons/fit/fit.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/addons/attach/attach.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/addons/fullscreen/fullscreen.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/xterm.css" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@3.12.2/dist/addons/fullscreen/fullscreen.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.18.1/min/vs/loader.js"></script>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monaco-editor@0.18.1/min/vs/editor/editor.main.css">
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@3.0.1/github-markdown.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/messenger-hubspot@1.5.0/build/css/messenger.min.css">
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/messenger-hubspot@1.5.0/build/css/messenger-theme-future.min.css">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js"></script>
|
||||
|
||||
<!-- <script src="https://raw.githubusercontent.com/imaya/zlib.js/develop/bin/gzip.min.js"></script>
|
||||
<script src="https://raw.githubusercontent.com/imaya/zlib.js/develop/bin/gunzip.min.js"></script> -->
|
||||
|
||||
<script src="js/message.js"></script>
|
||||
<script src="js/term.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
<script src="js/editor.js"></script>
|
||||
</head>
|
||||
|
||||
<body noscroll="true">
|
||||
<div class="container-fluid bs-docs-container" :controller="main">
|
||||
<h3>欢迎使用 MiaoConsole 调试控制台</h3>
|
||||
<div class="input-group">
|
||||
<span class="input-group-addon">服务器地址</span>
|
||||
<input id="address" class="form-control" :duplex="@server" :keydown="@connect" style="width: 100%"></input>
|
||||
<a class="input-group-addon btn" :click="@connect">连接</a>
|
||||
</div>
|
||||
<div class="panel panel-success" style="margin-top: 10px; height: 332px;">
|
||||
<div class="panel-heading">服务器日志 当前服务器类型: {{@type}}</div>
|
||||
<div id="terminal" style="height: 300px; width:100%;"></div>
|
||||
</div>
|
||||
<div class="progress progress-striped active" :visible='@classes.total != @classes.loaded'>
|
||||
<div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0"
|
||||
aria-valuemax="100" :css="{width: (@classes.loaded/@classes.total*100) +'%', 'min-width': '30em'}">
|
||||
<span>正在加载 {{@type}} 类型定义 {{@classes.loaded}}/{{@classes.total}}({{~~(@classes.loaded/@classes.total*100)|percent}}%) </span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-info" :visible='@classes.total == @classes.loaded'>
|
||||
<div class="panel-heading">代码编辑器</div>
|
||||
<div id="editor" style="height: 450px; width:100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
54
packages/plugins/public/js/editor.js
Normal file
54
packages/plugins/public/js/editor.js
Normal file
@ -0,0 +1,54 @@
|
||||
let editor
|
||||
let codeStorageKey = "MiaoScript:code";
|
||||
|
||||
let monaco_path = 'https://cdn.jsdelivr.net/npm/monaco-editor@0.18.1/min'
|
||||
require.config({ paths: { 'vs': monaco_path + '/vs' } });
|
||||
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
|
||||
let proxy = URL.createObjectURL(new Blob([`
|
||||
self.MonacoEnvironment = {
|
||||
baseUrl: '${monaco_path}/'
|
||||
};
|
||||
importScripts('${monaco_path}/vs/base/worker/workerMain.js');
|
||||
`], { type: 'text/javascript' }));
|
||||
|
||||
require(["vs/editor/editor.main"], function() {
|
||||
if (main.type !== 'unknow') {
|
||||
let ts_d_src = `https://cdn.jsdelivr.net/gh/circlecloud/ms@master/packages/${main.type}/src/typings`
|
||||
$.get(`${ts_d_src}/index.ts`, (res) => {
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(res, 'file:///src/typings/index.ts')
|
||||
let classes = res.split('\n').map(line => line.match(/.*\.\/(.*)".*/)).filter(line => line).map(dts => dts[1])
|
||||
main.classes.total = classes.length
|
||||
main.classes.loaded = 0
|
||||
classes.forEach(fname => {
|
||||
$.get(`${ts_d_src}/${fname}`, content => {
|
||||
monaco.languages.typescript.javascriptDefaults.addExtraLib(content, `file:///src/typings/${fname}`)
|
||||
main.classes.loaded++
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
editor = monaco.editor.create(document.getElementById('editor'), {
|
||||
value: window.localStorage.getItem(codeStorageKey) || 'org.bukkit.Bukkit.server.version',
|
||||
language: 'javascript',
|
||||
automaticLayout: true,
|
||||
scrollBeyondLastLine: false,
|
||||
theme: 'vs-dark'
|
||||
});
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function() {
|
||||
window.localStorage.setItem(codeStorageKey, editor.getValue())
|
||||
showMessenger('代码保存成功!')
|
||||
})
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_R, function() {
|
||||
main.send('execCode', getSelectContent(editor) || editor.getValue())
|
||||
})
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_E, function() {
|
||||
main.send('execCommand', getSelectContent(editor))
|
||||
})
|
||||
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_Q, function() {
|
||||
console.log('switch')
|
||||
})
|
||||
});
|
||||
function getSelectContent(editor) {
|
||||
let selInfo = editor.getSelection();
|
||||
return editor.getModel().getLineContent(selInfo.startLineNumber).substr(selInfo.startColumn - 1, selInfo.endColumn - selInfo.startColumn);
|
||||
}
|
||||
62
packages/plugins/public/js/main.js
Normal file
62
packages/plugins/public/js/main.js
Normal file
@ -0,0 +1,62 @@
|
||||
var ws
|
||||
var SPLIT_LINE = '\\M\\W\\S|T|S|S/L/T/'
|
||||
let serverKey = 'MiaoScript:server'
|
||||
var main = avalon.define({
|
||||
$id: 'main',
|
||||
server: window.localStorage.getItem(serverKey) || location.host,
|
||||
type: 'unknow',
|
||||
logs: '',
|
||||
classes: {
|
||||
total: 1,
|
||||
loaded: 0,
|
||||
},
|
||||
precent: () => {
|
||||
return classes.total
|
||||
},
|
||||
log: (info) => {
|
||||
info.split("\n").forEach((line) => { term.writeln(mcColor2ANSI(line + '§r')) })
|
||||
},
|
||||
send: (type, content) => {
|
||||
if (!ws || ws.readyState != 1) { term.writeln('Please Connect to Server first!'); return; }
|
||||
ws.send(`${type}${SPLIT_LINE}${content}`);
|
||||
},
|
||||
connect: (event = { key: 'Enter' }) => {
|
||||
if (event.key !== "Enter") {
|
||||
return;
|
||||
}
|
||||
if (ws && ws.readyState == 1) {
|
||||
ws.close()
|
||||
}
|
||||
window.localStorage.setItem(serverKey, main.server)
|
||||
ws = new WebSocket(`${location.protocol == 'http:' ? 'ws' : 'wss'}://${main.server}/ws`)
|
||||
ws.onmessage = (event) => {
|
||||
const [type, obj] = event.data.split(SPLIT_LINE)
|
||||
switch (type) {
|
||||
case "log":
|
||||
main.log(obj)
|
||||
break;
|
||||
case "type":
|
||||
main.type = obj;
|
||||
break;
|
||||
}
|
||||
}
|
||||
ws.onopen = () => {
|
||||
main.send("execDetect", "type");
|
||||
}
|
||||
ws.onclose = (ev) => {
|
||||
main.log(`Remote Server Close Connection... ${ev.code}`)
|
||||
if (ev.code == 1006) {
|
||||
setTimeout(() => {
|
||||
main.connect()
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
},
|
||||
init: () => {
|
||||
if (main.server) {
|
||||
main.connect()
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
main.init()
|
||||
10
packages/plugins/public/js/message.js
Normal file
10
packages/plugins/public/js/message.js
Normal file
@ -0,0 +1,10 @@
|
||||
$._messengerDefaults = {
|
||||
extraClasses: 'messenger-fixed messenger-theme-future messenger-on-top messenger-on-right'
|
||||
};
|
||||
var showMessenger = function(message, type) {
|
||||
return Messenger().post({
|
||||
message: message,
|
||||
type: type || 'info',
|
||||
showClo6seButton: true
|
||||
});
|
||||
};
|
||||
54
packages/plugins/public/js/term.js
Normal file
54
packages/plugins/public/js/term.js
Normal file
@ -0,0 +1,54 @@
|
||||
Terminal.applyAddon(fit);
|
||||
var term = new Terminal();
|
||||
avalon.ready(() => {
|
||||
term.open(document.getElementById('terminal'));
|
||||
window.onresize = () => {
|
||||
term.fit();
|
||||
}
|
||||
window.onresize()
|
||||
})
|
||||
term.on('data', (data) => {
|
||||
if (data == '\r') {
|
||||
term.writeln(data)
|
||||
}
|
||||
});
|
||||
term.attachCustomKeyEventHandler(e => {
|
||||
if (e.ctrlKey && e.key == 'c' && term.hasSelection()) {
|
||||
showMessenger('内容已复制到粘贴板')
|
||||
return false;
|
||||
}
|
||||
if (e.ctrlKey && e.key == 'v') {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
})
|
||||
var colorMap = []
|
||||
colorMap['0'] = '38;5;0'
|
||||
colorMap['1'] = '38;5;4'
|
||||
colorMap['2'] = '38;5;2'
|
||||
colorMap['3'] = '38;5;6'
|
||||
colorMap['4'] = '38;5;1'
|
||||
colorMap['5'] = '38;5;5'
|
||||
colorMap['6'] = '38;5;3'
|
||||
colorMap['7'] = '38;5;7'
|
||||
colorMap['8'] = '38;5;8'
|
||||
colorMap['9'] = '38;5;12'
|
||||
colorMap['a'] = '38;5;10'
|
||||
colorMap['b'] = '38;5;14'
|
||||
colorMap['c'] = '38;5;9'
|
||||
colorMap['d'] = '38;5;13'
|
||||
colorMap['e'] = '38;5;11'
|
||||
colorMap['f'] = '38;5;15'
|
||||
colorMap['r'] = '0'
|
||||
colorMap['l'] = '1'
|
||||
colorMap['n'] = '4'
|
||||
var regexMap = []
|
||||
for (const c in colorMap) {
|
||||
regexMap[colorMap[c]] = new RegExp(`§${c}`, "g")
|
||||
}
|
||||
function mcColor2ANSI(str) {
|
||||
for (const regex in regexMap) {
|
||||
str = str.replace(regexMap[regex], `\u001b[${regex}m`)
|
||||
}
|
||||
return str;
|
||||
}
|
||||
0
packages/plugins/public/js/websocket.js
Normal file
0
packages/plugins/public/js/websocket.js
Normal file
Reference in New Issue
Block a user