Attack on Life ⚔️

背景

1. 网页iframe嵌入了code-server web，两个网页是同站，现在需要code-server下在触发操作后发送消息给宿主页面。

需求细化

1. code-server 进行定制UI，支持显示一些按钮，比如可以在顶部右侧工具栏
2. code-server可以与宿主页面进行通讯

方案

最近线上接到一个严重问题，即我们的服务端疯狂的向另一个某SDK服务方发送心跳请求。排查后发现是没注意到的一个点造成的，其中与定时器有关，因此这里Mark下

问题情况

现状是一分钟/一个服务IP请求了超 4000次。实际上正常情况应该是5分钟只会报一次。

分析

整个排查过程还是比较简单/清晰的

最近看病去了中日友好医院，但又碰到好多流程上的坑，白跑好几趟。这里Mark下就医流程吧。

携带物品

• 医保卡用于报销部分花费

  可以不带-走支付宝/微信电子医保是一样的

• 手机-取号及最终买药支付等

• 身份证以备不时之需

就医全流程

因为开发Web IDE，了解到code-server。使用了有一段时间了，这里总结下code-server使用/定制遇到的一些问题

介绍

code-server即Web版Visual Studio Code。本身code-server的架构中也是将vsc作为子模块开发的，因此很多feat也都兼容。如果你需要一款强大+与vsc几乎一致的开发体验，那么code-server非常合适。

Code-Server背后的技术

1. code-server是node程序，但最后安装包里也内置了node，因此安装时不需要手动再安装node环境

2. code-server本身项目也依赖了code即visual studio code。因此也就知道了vsc也是个node，但性能确实还不错

3. code-server中的编辑器部分即monaco editor,终端部分即xterm.js。是不是都很熟悉，😊。

今年又更新了软硬件，这里总结下

萤石C6C家用摄像机

2023-01月份入手，233CNY，带32G存储卡。之前尝试购买过小米的，画面差也就算了，拿到手就升级系统变砖，果断退货。

使用一年下来萤石很满意，当然软件体验还是差点，不过足够了。

最近做WebShell有个需求即命令输入框支持自动补全。除了本身补全逻辑之外，需要解决的就是补全样式效果实现。

这里总结下实现技巧

补全效果涂上，输入框输入h,补全显示之后的ello。但是两者颜色一定是不同的。

CSS本身并不支持文本字符中比如前几个字符颜色，因此无法纯CSS解决如上的文本颜色显示。

因此需要DOM+JS解决。

WebShell下拷贝粘贴的支持最近遇到了问题，这里总结下

浏览器剪贴板权限

当浏览器剪贴板权限关闭的情况下，在使用Clipboard API时会报错。但由于有些用户的浏览器有安全要求，因此剪贴板权限是不打开的，那么这时WebShell还可以正常支持复制粘贴吗。答案是可以的，因为浏览器也有拷贝和粘贴支持

浏览器的拷贝粘贴

以Windows为例，拷贝是⌃+c，粘贴是⌃+v

Online会员可以免费玩经典小游戏比如双截龙，当然还有其它一些福利。最近因为想玩小游戏，因此订阅下会员体验下。

会员订阅

我选择走HK的个人会员25HKD/月，家庭会员性价比更高，但拼车人数多，这里就不折腾了。

支付方式

支持Visa，因此国内信用卡绑定即可

网页热键监听处理可以使用mousetrap.js。这个lib已经处于不维护状态，但胜在好用，还是很推荐。

这里介绍下使用

feat

支持单/组合键/gmail风格/Konami Code 按键绑定

1. gmail风格即比如g i，连续输入这样的按键可以执行某个动作，这种热键的好处是很容易规避浏览器/插件的热键
2. Konami Code 就有点像魂斗罗时，特定的按键触发30条命一样。个人认为这种按键绑定，如有必要，设计成网页彩蛋挺合适

最近做的WebShell-命令面板功能上线，这里Mark下其中的设计/思考

解决痛点

先解释下，为什么要做。

网页WebShell的功能在不断增加，不可避免会造成用户进行一些操作时，整个操作路径会很长。举个🌰，用户想登录一台机器。没有命令面板之前，需要这样做e

1. 光标点击连接管理
2. 光标聚焦搜索
3. 光标选中连接配置
4. 点击登录