idea.icandy.top
Open in
urlscan Pro
2606:50c0:8001::153
Public Scan
URL:
https://idea.icandy.top/
Submission: On May 21 via api from US — Scanned from DE
Submission: On May 21 via api from US — Scanned from DE
Form analysis 1 forms found in the DOM
<form id="search-form">
<label><input type="text" id="local-search-input" name="q" results="0" placeholder="站内搜索" class="input form-control" autocomplete="off" autocorrect="off"></label>
<!-- 清空/重置搜索框 -->
<i class="fa fa-times" onclick="resetSearch()"></i>
</form>Text Content
文章6
标签3
分类2
回到首页
文章归档
关于我
我的朋友
下载中心
RSS
文章分类
* 个人感悟 1
* 学习成长 4
个人感悟 学习成长 无聊分享
文章归档
* 20246
© 2024 fingerboy Powered by Hexo
本站总访问量 12 次
本站访客数12人次
屏蔽页面调试
2024年05月21日 172 字 大概 1 分钟
屏蔽页面调试的JS代码
<script type="text/javascript">
document.onkeydown=function(){
var e = window.event||arguments[0];
if(e.keyCode==123){
alert('你知道的太多了');
return false;
}
if((e.ctrlKey)&&(e.shiftKey)&&(e.keyCode==73)){
alert('你知道的太多了');
return false;
}
if((e.ctrlKey)&&(e.keyCode==85)){
alert('你知道的太多了');
return false;
}
if((e.ctrlKey)&&(e.keyCode==83)){
alert('你知道的太多了');
return false;
}
}
document.oncontextmenu=function(){
alert('你知道的太多了');
return false;
}
var threshold = 160;
window.setInterval(function() {
if (window.outerWidth - window.innerWidth > threshold ||
window.outerHeight - window.innerHeight > threshold) {
function disableDebugger() {
debugger;
}
$(document).ready(function () {
disableDebugger();
});
}
}, 1e3);
</script>
创建快速稳定的WEBSOCKET长链接
2024年05月21日 1.3k 字 大概 5 分钟
创建快速稳定的WEBSOCKET长链接
在一个完善的即时信息应用中，WebSocket是极其关键的一环，它为基于Web的即时通讯应用提供了一种全双工的通信机制。但为了提升实际应用场景下的消息即时性和可靠性，我们需要克服WebSocket及其底层依赖的TCP连接对于复杂网络情况下的不稳定性，即时通讯的开发者们通常都需要为其设计一套完整的连接保活、验活以及断片网重连方案。就断网重连而言，其重连响应速度将严重影响了上层应用的“即时性”和用户体验。
因此，如何在复杂网络场景下，更即时快速地感知网络变动，并快速恢复WebSocket的可用性，就变得尤为重要。本文分享WebSocket在不同状态下、不同的网络状态下，应该如何实现快速断网重连。
1. WEBSOCKET长链接的基本使用
// 定义几个变量检测状态
var WS_URL = "ws://127.0.0.1:9225/ws"; // websocket地址 http对应ws https对应wss
var timeout = 30*1000; // 心跳检测时间
var timeoutObj = null; // 心跳心跳倒计时
var serverTimeoutObj = null; // 心跳倒计时
var lockReconnect = false; // 防止
var timeoutnum = null; // 断开重连倒计时
// 创建websocket
function initWebSocket(){
// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
window.websocket = new WebSocket(WS_URL);
// websocket链接成功回调
window.websocket.onopen = websocketonopen;
// websocket链接发生错误回调
window.websocket.onerror = websocketonerror;
// websocket链接获取到消息调用注册全局websocket消息接收事件
window.websocket.onmessage = websocketonmessage;
// websocket断开消息回调
window.websocket.onclose = websocketonclose;
}
// onopen回调函数
function websocketonopen() {
// 连接成功后开启心跳
heart();
console.log("WebSocket连接成功!!!" + new Date() + "----" + window.websocket.readyState);
}
// onerror回调函数
function websocketonerror(e) {
// 如果发生链接错误 则关闭websocket
closeWebSocket();
console.log("WebSocket连接发生错误,重启socket");
console.log('Error:',e);
}
// onclose回调函数
function websocketonclose(e) {
window.websocket.close();
clearTimeout(timeoutObj);
clearTimeout(serverTimeoutObj);
console.log("WebSocket连接关闭,重启socket");
// 链接关闭，执行重新连接
reconnect();
}
// onmessage回调函数
function websocketonmessage(event) {
// 重置心跳检测
reset();
// 自定义全局监听事件
window.dispatchEvent(
new CustomEvent("onWebSocketMessage", {
detail: {
data: event.data,
},
})
);
}
// 关闭WebSocket
function closeWebSocket() {
// 关闭websocket
window.websocket.close();
}
2. WEBSOCKET使用心跳检测和断开重新连接
> 为什么使用心跳检测？
>
> 因为WebSocket底层基于tcp连接，所以在有些时候是无法触发onclose函数来感知WebSocket链接已经断开的，例如：切换网络、链路中间路由崩溃、链路的前端出口不可用、服务器负载持续过高无法响应；导致链接断开的原因有很多难以把控，所以通过心跳检测的方式定时向服务端发送消息，服务端返回心跳检测消息，前端根据消息判断是否出现err，如果出现err则说明连接断开，进行重新连接，通过这样可以保证链接的；
// 心跳检测函数
function heart(){
//清除延时器
timeoutObj && clearTimeout(timeoutObj);
serverTimeoutObj && clearTimeout(serverTimeoutObj);
timeoutObj = setTimeout(() => {
if (window.websocket && window.websocket.readyState == 1) {
//发送消息，服务端返回信息，即表示连接良好，可以在socket的onmessage事件重置心跳机制函数
window.websocket.send("heart");
} else {
//如果不返回消息 则执行WebSocket重连
reconnect();
}
//定义一个延时器等待服务器响应，若超时，则关闭连接，重新请求server建立socket连接
serverTimeoutObj = setTimeout(() => {
window.websocket.close();
}, timeout);
}, timeout);
}
// 收到消息后重新执行心跳检测
function reset() {
// 重置心跳 清除时间
clearTimeout(timeoutObj);
clearTimeout(serverTimeoutObj);
// 重启心跳
heart();
}
// 重连接函数
function reconnect(){
if (lockReconnect) return;
lockReconnect = true;
//没连接上会一直重连，设置延迟避免请求过多
timeoutnum && clearTimeout(timeoutnum);
timeoutnum = setTimeout(() => {
initWebSocket();
lockReconnect = false;
}, 5000);
}
3. 监测电脑网络状态，实现断开快速重新连接
> javascript通过监听online和offline事件判断网络状态
>
> 心跳检测的弊端在于定时发送请求，即时性不够。通过网络状态监测可以更快感知断开，弥补心跳检测的缺点，使链接更快速，系统更稳定
// 监听网络状态
window.addEventListener("online", () => {
console.log("网络正常");
});
window.addEventListener("offline", () => {
console.log("网络断开");
// 网络断开则重连
reconnect()
});
4. 注册全局WEBSOCKET监听事件，保证在模块化开发中任何地方都能用到同一个WEBSOCKET，不用重新创建连接。
// onmessage回调函数
function websocketonmessage(event) {
// 重置心跳检测
reset();
// 自定义全局监听事件
window.dispatchEvent(
new CustomEvent("onWebSocketMessage", {
detail: {
data: event.data,
},
})
);
}
// 全局可以监听websocket onmessage事件
window.addEventListener("onWebSocketMessage", businessFunction);
// 获取到websocket返回执行业务代码
function businessFunction(data){
console.log("Data::::",data)
}
使用 TELEGRAM 创建无限容量的云存储
2024年05月21日 531 字 大概 2 分钟
TELEDRIVE: UNLEASH UNLIMITED CLOUD STORAGE WITH TELEGRAM
大家好！今天，我将指导您使用 TeleDrive 在 Telegram 上创建无限的云存储解决方案。这个开源项目改变了游戏规则，通过 Telegram API
提供 Google Drive/OneDrive 等功能。
创建云
对于那些在各种论坛或 YouTube 上寻求信息的人来说，这是微不足道的选择。我花了大约 2
个小时来解码这个问题，因为脚本正在喝咖啡休息！事实证明，该修复程序在问题存储库中非常漂亮。😂
与其浪费我们数百万美元的软件工程时间，不如让我们深入学习如何安装 TeleDrive。
搭建云储存
让我们从更新我们的软件包开始:
apt-get update
软后安装 Build-essentials:
apt-get install build-essential
接下来，让我们用 git-clone 获取 fork 存储库:
git clone https://github.com/mgilangjanuar/teledrive.git
如果 Git不可用，请先安装Git:
apt install git
部署过程
首先安装NVM（Node版本管理器）:
wget https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh
下载完脚本后:
bash install.sh
source ~/.bashrc
确保 NVM 启动并运行:
nvm -v
用NVM安装 Node.JS 18.16.0:
nvm install v18.16.0
检查 Node.JS 和 NPM 到版本:
node -v
npm -v
现在，让我们进入下载的 GitHub 项目:
cd teledrive
我们需要安装 Yarn 和 PostgreSQL:
sudo apt install postgresql -y
我们用常规方式安装 TeleDrive:
chmod +x ./install.manual.sh
./install.manual.sh
Configuring TeleDrive
Parameters will pop up that require filling:
* TG_API_ID: Application ID
* TG_API_HASH: The hash
* ADMIN_USERNAME: Telegram username (should be admin)
* DATABASE_URL: Your postgres database
* PORT: Operational port
* REACT_APP_API_URL: API operation address
After a successful setup, the installation of packages kicks in. Once that’s
done, a confirmation text should appear, indicating TeleDrive’s successful
launch.
Getting APP_ID and API_HASH
Let’s head over to my.telegram.org and log in using your phone number.
Create an application and gather its data.
Linking to the Database
Create and import data into the database.
Creating:
To get started, access PostgreSQL:
arduinoCopy codepsql -U postgres
# or
sudo su - postgres
psql
Then, execute the following command:
sqlCopy codeCREATE DATABASE teledrive;
Note: If you perform these actions, you’ll also need to import server variables.
DATABASE_URL: postgresql://postgres@localhost:5432/teledrive
Then, watch in awe as TeleDrive works its magic and showcases its wonders
through screenshots.
到此创建完毕，你可以使用它了。
利用闲置服务器搭建一个专属图床加速器
2024年05月21日 865 字 大概 3 分钟
利用闲置服务器搭建一个专属图床加速器
1. 1. 前提条件
2. 2. 教程
3. 3. 总结
前提条件
* 一台国内能流畅访问且能正常访问Github的服务器
* Nginx
* 域名（非必需）
* Python
关于图床和Nginx的教程，你可以查看之前的文章。
教程
第一步：
拉取Github图片仓库到/var/www/目录下。请替换下面命令中的仓库地址为你自己的地址。
git clone https://github.com/image
第二步：
配置Nginx，映射当前图片仓库目录。假设我的图片仓库地址是：/var/www/image。以下配置的作用是，当访问
http://aaa.wangwangit.com/img/1.jpg 时，会实际访问服务器上的 /var/www/image/img/1.jpg 文件。
server {
listen 80;
server_name aaa.wangwangit.com;
root /var/www/html;
location /img {
root /var/www/image/;
autoindex on;
}
}
完成修改后，执行 nginx -s reload 命令来更新配置。
第三步：
上面两步实际上已经配置好了图床的加速器。我们只需要使用自己的域名地址进行访问即可。也许你会问为什么要使用Github，而不是直接将图片存储在服务器上。这样做有几个原因：首先，我的以前的图片已经存在Github上了；另外，使用Github的话，我不需要自己去维护图床。
接下来，我们还需要及时拉取Github图床的更新。下面我来介绍如何实现这一点。
我们可以使用Github的Webhook功能，在服务器的/var/www/目录下创建一个名为webhook_receiver.py的Python文件，并编辑以下内容：
from flask import Flask, request
import subprocess
app = Flask(__name__)
@app.route('/webhook', methods=['POST'])
def webhook():
if request.headers.get('X-GitHub-Event') == 'push':
subprocess.Popen(['git', '-C', '/var/www/image', 'pull'])
return 'Webhook received successfully', 200
else:
return 'Unsupported event', 200
if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)
保存文件后，执行 pip install flask 命令来安装依赖。你可以先使用 python3 webhook_receiver.py
命令进行测试，确认是否正常运行。若一切正常，可以使用 Ctrl+c 结束执行，然后使用 nohup python3 webhook_receiver.py &
命令来运行它。
接下来，在Github项目中设置Webhook：
1. 打开你的项目页面，点击 “Settings”（设置）选项卡。
2. 在左侧导航栏中选择 “Webhooks”（Web钩子）。
3. 点击 “Add webhook”（添加Webhook）按钮。
4. 在 “Payload URL”（有效载荷 URL）字段中输入 http://your-server-ip:5000/webhook，将
your-server-ip 替换为你服务器的实际IP地址。
5. 在 “Content type”（内容类型）字段中选择 “application/json”。
6. 在 “Secret”（密钥）字段中输入一个可选的密钥，用于在请求中进行身份验证。
7. 在 “Which events would you like to trigger this
webhook?”（您想要触发此Webhook的事件？）部分选择 “Just the push event”（仅推送事件）选项。
8. 确保 “Active”（启用）复选框被选中。
9. 点击 “Add webhook”（添加Webhook）按钮保存设置。
至此，部署完成。只需要在图床仓库上传一张图片，然后使用服务器的域名去访问，就可以测试是否配置正常了！
总结
我在文章中提到的几个方案，在之前的文章中都有详细介绍。如果你还有不懂的地方，可以去查看相关文章，或者加入我的交流学习群一起探讨！
学习HEXO博客系统
2024年05月20日 0 字 大概 1 分钟
博客的第一篇文章
2024年05月20日 20 字 大概 1 分钟
我的第一篇文章
这是网站创建后的第一篇文章。