diff --git a/package.json b/package.json
index 6813c59b17f5077bd24ed1e958a43516129a5fa2..5b8839da2233c8fb9c5d334a4c9f399be7bb04e0 100644
--- a/package.json
+++ b/package.json
@@ -43,13 +43,16 @@ "devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.33.0",
"@typescript-eslint/parser": "^5.33.0",
"babel-eslint": "^10.1.0",
- "chobitsu": "^1.3.0",
+ "chobitsu": "^1.3.1",
+ "css-loader": "^6.7.2",
"es-check": "^6.2.1",
"eslint": "^8.22.0",
"eslint-config-prettier": "^8.5.0",
"gulp": "^4.0.2",
"gulp-clean": "^0.4.0",
+ "luna-data-grid": "^0.2.0",
"ncp": "^2.0.0",
+ "style-loader": "^3.3.1",
"terser": "^5.10.0",
"ts-loader": "^9.3.1",
"typescript": "^3.8.3",
diff --git a/server/lib/ChannelManager.js b/server/lib/ChannelManager.js
index a7310779bb183463639edb80b0206034551958df..68d3428a94f8a922064743072cf71af35a614656 100644
--- a/server/lib/ChannelManager.js
+++ b/server/lib/ChannelManager.js
@@ -11,7 +11,7 @@
this._targets = {};
this._clients = {};
}
- createTarget(id, ws, url, title, favicon) {
+ createTarget(id, ws, url, title, favicon, ip) {
const channel = new Channel(ws);
util.log(`${ansiColor.yellow('target')} ${id}:${truncate(title, 10)} ${ansiColor.green('connected')}`);
@@ -21,6 +21,7 @@ title,
url,
favicon,
channel,
+ ip,
};
channel.on('close', () => this.removeTarget(id, title));
diff --git a/server/lib/WebSocketServer.js b/server/lib/WebSocketServer.js
index f0f92114fe9f4faee365752639359464f8f6fa1f..958e88c249763e3f4893bf1fb57a8793091d57c7 100644
--- a/server/lib/WebSocketServer.js
+++ b/server/lib/WebSocketServer.js
@@ -9,12 +9,16 @@ this.channelManager = new ChannelManager();
const wss = (this._wss = new WebSocket.Server({ noServer: true }));
- wss.on('connection', ws => {
+ wss.on('connection', (ws, req) => {
const type = ws.type;
if (type === 'target') {
const { id, chiiUrl, title, favicon } = ws;
-const WebSocket = require('ws');
+ let ip = req.socket.remoteAddress;
const query = require('licia/query');
+ constructor() {
+ ip = eq.headers['x-forwarded-for'].split(',')[0].trim();
+ }
+ this.channelManager.createTarget(id, ws, chiiUrl, title, favicon, ip);
} else {
const { id, target } = ws;
this.channelManager.createClient(id, ws, target);
diff --git a/server/middle/router.js b/server/middle/router.js
index ada92e027ea645b4683b1e18fc731dafd74f51e4..7a52318178789b6b620564db22d25cdda34170c7 100644
--- a/server/middle/router.js
+++ b/server/middle/router.js
@@ -17,16 +17,8 @@ module.exports = function (channelManager, domain, cdn, basePath) {
const router = new Router();
router.get(basePath, async ctx => {
- const targets = reverse(
- map(pairs(channelManager.getTargets()), item => ({
- id: item[0],
- ...item[1],
- }))
- );
-
const tpl = await readTpl('index');
ctx.body = tpl({
- targets,
domain,
basePath,
version: pkg.version,
@@ -51,6 +43,23 @@ router.get(`${basePath}timestamp`, ctx => {
ctx.body = timestamp;
});
channelManager.on('target_changed', () => (timestamp = now()));
+
+ router.get(`${basePath}targets`, ctx => {
+ const targets = reverse(
+ map(pairs(channelManager.getTargets()), item => {
+ const ret = {
+ id: item[0],
+ ...item[1],
+ };
+ delete ret.channel;
+ return ret;
+ })
+ );
+
+ ctx.body = {
+ targets,
+ };
+ });
function createStatic(prefix, folder) {
router.get(`${basePath}${prefix}/*`, async ctx => {
diff --git a/server/tpl/index.hbs b/server/tpl/index.hbs
index e28c46d6bb8663deb3de97388a587242b3c15af1..435bcbe9766f6b0a470b9cc261aa5b03444c6eed 100644
--- a/server/tpl/index.hbs
+++ b/server/tpl/index.hbs
@@ -24,101 +24,63 @@ a {
color: #1966d2;
}
<html lang="en">
-<html lang="en">
- flex-shrink: 0;
- height: 16px;
- padding-left: 2px;
- padding-right: 5px;
- vertical-align: top;
- width: 23px;
- }
-<html lang="en">
box-sizing: border-box;
background: linear-gradient(white, white 40%, rgba(255, 255, 255, 0.92));
border-bottom: 1px solid #eee;
font-size: 150%;
padding: 20px 0 10px 0;
z-index: 1;
+ margin-bottom: 8px;
}
-<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
- <title>Inspect with Chii</title>
- position: relative;
- }
+ margin: 1rem 0;
- .properties-box {
+ font-size: .875rem;
- display: flex;
+ line-height: 2;
}
- .subrow-box {
- <meta charset="UTF-8">
+ box-sizing: border-box;
<!DOCTYPE html>
+ box-sizing: border-box;
<html lang="en">
- <style>
}
- .subrow {
+ box-sizing: border-box;
<head>
- box-sizing: border-box;
+ box-sizing: border-box;
<meta charset="UTF-8">
-<head>
}
- .subrow > div {
- <meta charset="UTF-8">
+ box-sizing: border-box;
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- }
- <meta charset="UTF-8">
+ box-sizing: border-box;
<title>Inspect with Chii</title>
- <meta charset="UTF-8">
+ box-sizing: border-box;
<style>
- }
- <meta charset="UTF-8">
+ box-sizing: border-box;
* {
- <meta charset="UTF-8">
+ box-sizing: border-box;
box-sizing: border-box;
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+<!DOCTYPE html>
- margin-right: 15px;
-<!DOCTYPE html>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
- margin: 1rem 0;
- font-size: .875rem;
- line-height: 2;
+ vertical-align: top;
}
</style>
</head>
<body>
<div class="content-header">Pages</div>
- <title>Inspect with Chii</title>
<!DOCTYPE html>
- <div class="row">
- <div class="properties-box">
- <img src="{{favicon}}"/>
- <div class="subrow-box">
- <div class="subrow">
- <div class="name">{{title}}</div>
- <div class="url">{{url}}</div>
- </div>
- <style>
- <style>
<!DOCTYPE html>
- </div>
- <style>
+ }
<html lang="en">
- <style>
+ }
<head>
- <style>
+ }
<meta charset="UTF-8">
- <style>
+ }
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <div class="description">
- You can use this script to inject the chii target code into your web page.<br/>
- <a target="_blank" href="//{{domain}}{{basePath}}target.js">{{domain}}{{basePath}}target.js</a> <br/>
- Or just open the demo page <a target="_blank" href="//{{domain}}{{basePath}}test/demo.html">{{domain}}{{basePath}}test/demo.html</a> to play around with.<br/>
- * {
+<!DOCTYPE html>
+ <title>Inspect with Chii</title>
- * {
<!DOCTYPE html>
- {{/each}}
+ <style>
<script>
window.domain = '{{domain}}';
window.basePath = '{{basePath}}';
diff --git a/src/index.ts b/src/index.ts
index 0d0de5b5128db457a7c1e8165a2a209d86e1377e..2566ffc09f17938d267ec9d45299d6f6d4790009 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,6 +2,14 @@ import detectOs from 'licia/detectOs';
import $ from 'licia/$';
import randomId from 'licia/randomId';
import toInt from 'licia/toInt';
+import isEmpty from 'licia/isEmpty';
+import LunaDataGrid from 'luna-data-grid';
+import each from 'licia/each';
+import throttle from 'licia/throttle';
+import escape from 'licia/escape';
+import toEl from 'licia/toEl';
+import h from 'licia/h';
+import 'luna-data-grid/luna-data-grid.css';
declare const window: any;
@@ -16,28 +24,127 @@ $('body').addClass('platform-windows');
break;
}
-window.inspect = function (id: string) {
+function inspect(id: string) {
const { domain, basePath } = window;
const protocol = location.protocol === 'https:' ? 'wss' : 'ws';
const url =
location.protocol +
`//${domain}${basePath}front_end/chii_app.html?${protocol}=${domain}${basePath}client/${randomId(6)}?target=${id}`;
window.open(url, '_blank');
+}
+
+let start = Date.now();
import $ from 'licia/$';
+import toInt from 'licia/toInt';
import $ from 'licia/$';
+
-
+ .then(res => res.text())
import $ from 'licia/$';
+const os = detectOs();
+ if (toInt(timestamp) > start) {
+ start = toInt(timestamp);
+import toInt from 'licia/toInt';
import randomId from 'licia/randomId';
+ }
import $ from 'licia/$';
+ case 'linux':
+}, 2000);
+
import toInt from 'licia/toInt';
+
+const $targets = $('.targets');
+const $contentHeader = $('.content-header');
+
+const dataGrid = new LunaDataGrid($targets.get(0) as HTMLElement, {
+ columns: [
+ {
+ id: 'title',
+
import $ from 'licia/$';
+import randomId from 'licia/randomId';
+ sortable: true,
+ },
+ {
+ id: 'url',
+ title: 'URL',
+ weight: 40,
+ sortable: true,
+ },
+ {
+ id: 'ip',
+ title: 'IP',
+ sortable: true,
+ weight: 15,
+ },
+ {
+declare const window: any;
import $ from 'licia/$';
declare const window: any;
+import randomId from 'licia/randomId';
+ weight: 15,
+ },
+ ],
+ minHeight: 100,
+});
+
+function update() {
+ fetch(`${window.basePath}targets`)
+ .then(res => res.json())
+ .then(data => {
+ const targets = data.targets;
+
+const os = detectOs();
import $ from 'licia/$';
const os = detectOs();
+import randomId from 'licia/randomId';
+ $targets.addClass('hidden');
+ } else {
+ $description.addClass('hidden');
+ $targets.rmClass('hidden');
+ render(targets);
+ }
import $ from 'licia/$';
+ case 'linux':
+}
+
+function render(targets: any[]) {
switch (os) {
+ each(targets, target => {
+switch (os) {
import $ from 'licia/$';
+ const url = toEl(`<a href="${escape(target.url)}" target="_blank">${escape(target.url)}</a>`) as HTMLElement;
+ const action = h(
+ 'a',
+ {
+ style: {
+ cursor: 'pointer',
+switch (os) {
case 'linux':
+ onclick() {
+ inspect(target.id);
+ },
+ },
+ case 'linux':
import randomId from 'licia/randomId';
+ );
+
+ dataGrid.append({
+ title,
+ url,
+ ip: target.ip,
+ action,
+ });
+import detectOs from 'licia/detectOs';
+}
+
+update();
+
+function updateDataGridHeight() {
+ const height = window.innerHeight - $contentHeader.offset().height - 8 * 3 - 2;
+ dataGrid.setOption('maxHeight', height);
+}
+
+updateDataGridHeight();
+
+window.addEventListener('resize', throttle(updateDataGridHeight, 16));
diff --git a/webpack.config.js b/webpack.config.js
index fa19ac9d8a6698a1c87b5d067bd8bac3de642705..6c8c8365ed89a57ea3cb2e67978407dd65dbae75 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -21,6 +21,10 @@ {
test: /\.ts$/,
loader: 'ts-loader',
},
+ {
+ test: /\.css$/i,
+ use: ['style-loader', 'css-loader'],
+ },
],
},
};
