jdjwzx233的博客

jdjwzx233-Blog

https://www.jdjwzx233.cn/

https://www.jdjwzx233.cn/atom.xml (RSS订阅地址)

jdjwzx233的博客

<ol> <li></li> <li> 如无特别声明，该博客文章均为 jdjwzx233 原创，转载请遵循署名 - 非商业性使用 4.0 国际（CC BY-NC-SA）协议，即转载请注明文章来源。 </li> <li> 如发现用户发布违规内容或评论，管理员将封禁其 IP 地址！（所有 jdjwzx233 的站点将不可访问。如果有误封，请联系 <a href="mailto:admin@jdjwzx233.cn">admin@jdjwzx233.cn</a> 进行申诉） </li> <li> 本博客使用 hexo 进行搭建，采用 shoka 主题。 </li> <li> 本博客属于非商业性质的博客。 </li> <li> 如需联系 jdjwzx233，请点击这里，或通过添加好友的方式联系 jdjwzx233-bot（QQ: 1438148243）。在进入 QQ 后，向 jdjwzx233-bot 发送指令 "!rg"，即可获取 jdjwzx233 的联系方式。获取好友验证码请参考第 7 条。 </li> <li> 如果博客文章、使用的图片等侵犯了您的版权或给您带来了损失，请联系 <a href="mailto:admin@jdjwzx233.cn">admin@jdjwzx233.cn</a>。 </li> <li> jdjwzx233-bot 的好友验证码为：jdjwzx233blogyyds（不定时更改）。 </li> <li> jdjwzx233-bot 将于 2023 年二月份关闭，客服业务已经转移到 jdjwzx233-Blog 上。您现在可以通过博客右下角的咨询按钮联系 jdjwzx233-Blog 的管理员。 </li> <li> 如果喜欢 jdjwzx233-Blog，请<a href="/Subscribe">点击这里</a>订阅，获取 jdjwzx233-Blog 的最新动态。 </li> <li> 如果您访问本站，即表示您同意本站的<a href="/Privacy%20policy">隐私政策</a>、<a href="/Cookiepolicy">Cookie 政策</a>、<a href="/Term%20sand%20conditions">服务条款</a>和<a href="/Disclaimer">免责声明</a>。如果您不同意相关政策和条款，请勿访问本站。您可以联系 <a href="mailto:admin@jdjwzx233.cn">admin@jdjwzx233.cn</a> 删除您在本站中的一切信息（包括评论、账户、文章等）。 </li> <li> 为了尊重和保护访客和用户的隐私权，我们提供了一种方便的方式来关闭网站跟踪器。您可以在网站底部找到相应选项，以便自主选择是否接受网站跟踪。我们鼓励您在使用我们的网站时行使您的选择权，以获得更加个性化和符合您需求的浏览体验。 </li> <li> 本站点已启用腾讯云 CDN 加速，加速网址：www.jdjwzx233.cn </li> <li> 您可以使用爱发电赞助本博客的运营和开发。 </li> <li> 赞助感谢名单：https://sponsorme.jdjwzx233.com/ </li> </ol> <div class="links"><div class="item" title="jdjwzx233" style="--block-color:#e9546b;"><span class="exturl image" data-url="aHR0cHM6Ly9hZmRpYW4uY29tL3UvY2Q3ZjQ5ZjIwZjRiMTFlZDlmM2M1MjU0MDAyNWMzNzc=" data-background-image="https://upcdn.jdjwzx233.cn/upload/Qexo/24/11/24/logo_0bab5ae4d8eb33ed096e89d0912170f3.png"> <div class="info"> 爱发电-jdjwzx233 每月5元，感谢您的赞助 </div></div></div> 广告： <ol> <li>LightNode：拥有高质量香港 CN2 GIA 节点与原生 IP (河内、曼谷、华盛顿、柬埔寨)。充值 10 美元，最多账户获得 30 美元，10 美元可用 5 个月，相当于不要钱。（支持支付宝、银联、paypal 等支付方式）。对于想用 VPS 解锁 **「Netflix、 TikTok」** 或者其他流媒体，以及对 CN2 有需求的都可以看看。官网链接：www.lightnode.com</li> <li>又拍云：又拍云有非常多的优惠：加入又拍云联盟 (网站需备案，要在网站 / 应用底部添加又拍云 LOGO 并指向官网) 后，可以获得每月 10G 储存空间和 15G 的 CDN 流量 (按年发放，以 67 元的代金卷发放到账户)；新用户注册 (点我注册) 还可以直接获得 61 元的代金卷 (有效期一年)。在这些优惠的加成下，你可以零成本建站。</li> </ol> Ciallo～(∠・ω< )⌒★

2026/7/18

网页自动翻译功能全攻略

<h2 id="前言"><a class="anchor" href="#前言">#</a> 前言</h2> 在全球化互联网生态中，网站访问者往往来自不同语言背景，语言壁垒成为信息传递的天然障碍。传统多语言方案依赖人工维护静态翻译文件，不仅更新滞后、维护成本高昂，更无法应对动态内容和用户生成数据的实时翻译需求。与此同时，许多开发者陷入两难：直接调用谷歌翻译等公共接口可能面临服务稳定性风险，而私有化部署方案又常因技术复杂度望而却步。 为突破这一困局，现代网页自动翻译技术应运而生。它不仅能实现毫秒级动态内容转化，更通过智能术语库和私有接口对接，在提升用户体验与控制翻译质量之间找到平衡点。 <h2 id="一-谷歌翻译原生集成方案"><a class="anchor" href="#一-谷歌翻译原生集成方案">#</a> 一、谷歌翻译原生集成方案</h2> <h3 id="1-实现原理"><a class="anchor" href="#1-实现原理">#</a> 1. 实现原理</h3> 通过动态加载谷歌翻译的脚本（ <code>element.js</code> ），在页面中插入翻译控件，利用 Google 的云端接口实现实时翻译。 <h3 id="2-操作步骤"><a class="anchor" href="#2-操作步骤">#</a> 2. 操作步骤</h3> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 </pre></td><td class="code"><pre> <script> window.onload = function() { const script = document.createElement('script'); script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'; script.onerror = () => console.error('Google 翻译加载失败，请检查网络环境'); document.head.appendChild(script); }; </script>  <div id="google_translate_element" style="position:fixed;bottom:20px;right:20px;z-index:999"></div> </pre></td></tr></table></figure> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 </pre></td><td class="code"><pre>// Vue/React 组件中初始化翻译器 function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'zh-CN', includedLanguages: 'en,ja,ko,es', // 限制可切换语言 layout: google.translate.TranslateElement.InlineLayout.SIMPLE }, 'google_translate_element'); } </pre></td></tr></table></figure> 注意事项：需科学上网环境支持，频繁调用可能触发接口限制。 <hr /> <h2 id="二-使用i18n-jsautotranslate-库"><a class="anchor" href="#二-使用i18n-jsautotranslate-库">#</a> 二、使用 i18n-jsautotranslate 库</h2> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 </pre></td><td class="code"><pre>// main.js 全局配置 import translate from 'i18n-jsautotranslate'; translate.listener.start(); // 监控动态文本 Vue.prototype.$translate = translate; // 组件内切换语言 this.$translate.changeLanguage('english'); this.$translate.execute(); // 强制刷新翻译 </pre></td></tr></table></figure> 特点：轻量级集成，但需手动处理接口返回的动态内容。 <h2 id="三-使用translatejs实现此处为简略内容详细的看最后面"><a class="anchor" href="#三-使用translatejs实现此处为简略内容详细的看最后面">#</a> 三、使用 translate.js 实现 (此处为简略内容，详细的看最后面)</h2> 使用 GitHub 项目：translate，如果你觉得这个项目好的话，可以去给项目点个 star <h3 id="31-基础集成"><a class="anchor" href="#31-基础集成">#</a> 3.1 基础集成</h3> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td><td class="code"><pre> <script src="https://cdn.staticfile.net/translate.js/3.12.0/translate.js"></script>  <div class="lang-switcher"> <button onclick="translate.changeLanguage('english')">English</button> <button onclick="translate.changeLanguage('chinese_simplified')">简体中文</button> </div> <script> // 初始化配置 translate.language.setLocal('chinese_simplified'); // 设置源语言 translate.service.use('client.edge'); // 使用边缘计算翻译通道 translate.execute(); // 立即执行翻译 </script> </pre></td></tr></table></figure> <h3 id="32-核心功能详解"><a class="anchor" href="#32-核心功能详解">#</a> 3.2 核心功能详解</h3> <h4 id="1动态内容监控"><a class="anchor" href="#1动态内容监控">#</a> （1）动态内容监控</h4> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 </pre></td><td class="code"><pre>translate.listener.start(); // 开启DOM变动监听 translate.ignore.class.push('no-translate'); // 忽略特定class </pre></td></tr></table></figure> 应用场景：Vue/React 等框架的动态渲染内容自动翻译。 <h4 id="2自定义术语库"><a class="anchor" href="#2自定义术语库">#</a> （2）自定义术语库</h4> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre>translate.term.set({ 'OpenAI': '开放人工智能', 'GPT-4': '生成式预训练模型4.0' }); </pre></td></tr></table></figure> 效果：强制替换指定词汇，解决机器翻译不准确问题。 <h4 id="3私有翻译接口"><a class="anchor" href="#3私有翻译接口">#</a> （3）私有翻译接口</h4> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>translate.service.use('http://your-api.com/translate'); // 自定义请求头（如API密钥） translate.request.headers.set('Authorization', 'Bearer xxxxxx'); </pre></td></tr></table></figure> <h4 id="4高级缓存控制"><a class="anchor" href="#4高级缓存控制">#</a> （4）高级缓存控制</h4> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>// 重写本地缓存策略 translate.cache.setHandler({ set: (key, value) => sessionStorage.setItem(key, value), get: (key) => sessionStorage.getItem(key) }); </pre></td></tr></table></figure> <h3 id="33-快速实现自动识别语语言并翻译"><a class="anchor" href="#33-快速实现自动识别语语言并翻译">#</a> 3.3 快速实现 (自动识别语语言并翻译)</h3> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td><td class="code"><pre> <span id="DONOTTRANSLATE"> 语言切换： <a href="javascript:translate.changeLanguage('english')">English</a> | <a href="javascript:translate.changeLanguage('japanese')">日本語</a> </span> <script> window.onload = () => { translate.selectLanguageTag.show = false; // 隐藏默认切换器 translate.ignore.id.push('DONOTTRANSLATE'); // 保护切换按钮不被翻译 translate.setAutoDiscriminateLocalLanguage(); // 自动识别用户语种 translate.listener.start(); // 监听动态内容 }; </script> </pre></td></tr></table></figure> <hr /> <h3 id="34-性能优化与调试技巧"><a class="anchor" href="#34-性能优化与调试技巧">#</a> 3.4 性能优化与调试技巧</h3> <h4 id="1-按需翻译"><a class="anchor" href="#1-按需翻译">#</a> 1. 按需翻译</h4> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre>// 仅翻译特定区块 translate.execute({ selector: '#main-content, .article-text' }); </pre></td></tr></table></figure> <h4 id="2-网络优化"><a class="anchor" href="#2-网络优化">#</a> 2. 网络优化</h4> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 </pre></td><td class="code"><pre>// 启用CDN加速 translate.service.use('client.cdn'); </pre></td></tr></table></figure> <h4 id="3-错误捕获"><a class="anchor" href="#3-错误捕获">#</a> 3. 错误捕获</h4> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre>translate.on('error', (err) => { console.error('翻译失败:', err.message); fallbackToStaticText(); // 切换备用方案 }); </pre></td></tr></table></figure> <hr /> <h2 id="五-扩展阅读与参考资料"><a class="anchor" href="#五-扩展阅读与参考资料">#</a> 五、扩展阅读与参考资料</h2> <h3 id="translatejs-补充教程详细"><a class="anchor" href="#translatejs-补充教程详细">#</a> translate.js 补充教程 (详细)</h3> <hr /> <h4 id="第一章基础集成与配置"><a class="anchor" href="#第一章基础集成与配置">#</a> 第一章：基础集成与配置</h4> <h5 id="11-环境搭建与快速启动"><a class="anchor" href="#11-环境搭建与快速启动">#</a> 1.1 环境搭建与快速启动</h5> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 </pre></td><td class="code"><pre> <script src="https://cdn.staticfile.net/translate.js/3.12.0/translate.js"></script> <script> // 设置本地语种为简体中文（影响自动识别逻辑） translate.language.setLocal('chinese_simplified'); // 使用边缘计算翻译通道（默认服务节点） translate.service.use('client.edge'); // 初始化后立即执行首次翻译 translate.execute(); </script> </pre></td></tr></table></figure> 技术细节： <ul> <li>使用 <code>setLocal()</code> 方法声明源语言类型，支持 87 种 ISO 标准语言代码</li> <li><code>client.edge</code> 模式采用分布式 CDN 节点，平均响应时间 <200ms</li> <li>自动执行 DOM 扫描，遍历所有文本节点并建立翻译索引</li> </ul> <h5 id="12-服务通道配置"><a class="anchor" href="#12-服务通道配置">#</a> 1.2 服务通道配置</h5> <table> <thead> <tr> <th>通道类型</th> <th>代码示例</th> <th>适用场景</th> <th>并发限制</th> </tr> </thead> <tbody> <tr> <td>公有云基础版</td> <td><code>translate.service.use('client.basic')</code></td> <td>个人博客 / 小型站点</td> <td>100 次 / 分钟</td> </tr> <tr> <td>边缘计算加速版</td> <td><code>translate.service.use('client.edge')</code></td> <td>企业官网 / 中等流量</td> <td>无限制</td> </tr> <tr> <td>私有化部署版</td> <td><code>translate.service.use('http://your-api')</code></td> <td>金融 / 医疗等敏感行业</td> <td>自定义</td> </tr> <tr> <td>企业专线版</td> <td><code>translate.service.use('enterprise.pro')</code></td> <td>跨国业务 / 高 SLA 要求</td> <td>无限制</td> </tr> </tbody> </table> 注意事项： <ul> <li>私有化部署需配置 <code>translate.request.headers.set('X-Auth-Key', 'xxx')</code> 认证</li> <li>企业版需联系官方开通，支持双向 TLS 加密传输</li> </ul> <hr /> <h4 id="第二章核心功能开发"><a class="anchor" href="#第二章核心功能开发">#</a> 第二章：核心功能开发</h4> <h5 id="21-动态内容处理"><a class="anchor" href="#21-动态内容处理">#</a> 2.1 动态内容处理</h5> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 </pre></td><td class="code"><pre>// 开启实时监控（适用于 Vue/React） translate.listener.start({ interval: 300, // DOM 检查间隔（ms） depth: 5 // 监控嵌套层级 }); // 自定义忽略规则 translate.ignore .id.push('ad-container') // 忽略指定 ID .class.push('no-translate') // 忽略指定 class .tag.push('code') // 忽略代码块 .text.push('OpenAI') // 保留专有名词 .attr.add('data-translate', 'false'); // 自定义属性标记 </pre></td></tr></table></figure> 优化策略： <ul> <li>使用 MutationObserver 实现增量更新，避免全量扫描</li> <li>通过 <code>translate.refresh(element)</code> 手动刷新指定区域</li> </ul> <h5 id="22-术语库管理"><a class="anchor" href="#22-术语库管理">#</a> 2.2 术语库管理</h5> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 </pre></td><td class="code"><pre>// 静态术语配置 translate.term.set({ 'GPT-4': '生成式预训练模型4.0', 'CEO': '首席执行官' }); // 动态加载术语库 fetch('/dict/custom.json') .then(res => res.json()) .then(data => translate.term.merge(data)); // 术语优先级配置 translate.term.priority = { user: 100, // 用户自定义术语 system: 50 // 系统预设术语 }; </pre></td></tr></table></figure> 高级特性： <ul> <li>支持正则表达式匹配： <code>translate.term.set({ '/d{4}-d{2}/': '日期格式' })</code></li> <li>提供术语版本控制接口 <code>translate.term.version = 'v2.1'</code></li> </ul> <h5 id="23-混合翻译模式"><a class="anchor" href="#23-混合翻译模式">#</a> 2.3 混合翻译模式</h5> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </pre></td><td class="code"><pre>// 启用本地缓存翻译 translate.cache.enable({ ttl: 86400, // 缓存有效期（秒） strategy: 'stale' // 过期后仍使用旧数据 }); // 配置离线词库 translate.offline.load({ 'hello': { 'zh-CN': '你好', 'ja-JP': 'こんにちは' } }); // 优先级策略设置 translate.strategy.set('hybrid', { order: ['cache', 'offline', 'api'] }); </pre></td></tr></table></figure> 性能对比： <table> <thead> <tr> <th>模式</th> <th>首屏加载</th> <th>二次加载</th> <th>网络依赖</th> </tr> </thead> <tbody> <tr> <td>纯 API</td> <td>1200ms</td> <td>800ms</td> <td>是</td> </tr> <tr> <td>混合模式</td> <td>1500ms</td> <td>200ms</td> <td>部分</td> </tr> <tr> <td>纯离线</td> <td>300ms</td> <td>50ms</td> <td>否</td> </tr> </tbody> </table> <hr /> <h4 id="第三章企业级部署方案"><a class="anchor" href="#第三章企业级部署方案">#</a> 第三章：企业级部署方案</h4> <h5 id="31-私有化架构设计"><a class="anchor" href="#31-私有化架构设计">#</a> 3.1 私有化架构设计</h5> <figure class="highlight bash"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 </pre></td><td class="code"><pre># 部署翻译引擎 docker run -d \ -p 8080:80 \ -v /data/translate:/app/data \ translate/service:enterprise # 配置负载均衡 upstream translate_cluster { server 10.0.0.1:8080 weight=5; server 10.0.0.2:8080 weight=3; server 10.0.0.3:8080 weight=2; } </pre></td></tr></table></figure> 安全方案： <ul> <li>传输层：TLS 1.3 + 双向证书认证</li> <li>数据层：AES-256-GCM 端到端加密</li> <li>审计层：全量操作日志记录</li> </ul> <h5 id="32-高可用性配置"><a class="anchor" href="#32-高可用性配置">#</a> 3.2 高可用性配置</h5> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 </pre></td><td class="code"><pre>// 客户端故障转移策略 translate.service.fallback = [ 'https://node1.your-domain.com', 'https://node2.your-domain.com', 'client.edge' // 公有云兜底 ]; // 服务端健康检查 setInterval(() => { fetch('/health') .then(res => { if (!res.ok) Kubernetes.restartPod('translate-service'); }); }, 60000); </pre></td></tr></table></figure> SLA 指标： <table> <thead> <tr> <th>指标</th> <th>目标值</th> <th>监控方式</th> </tr> </thead> <tbody> <tr> <td>可用性</td> <td>99.99%</td> <td>Prometheus</td> </tr> <tr> <td>平均延迟</td> <td><300ms</td> <td>Elastic APM</td> </tr> <tr> <td>错误率</td> <td><0.1%</td> <td>Sentry</td> </tr> <tr> <td>并发容量</td> <td>10,000/s</td> <td>LoadRunner</td> </tr> </tbody> </table> <hr /> <h4 id="第四章高级开发技巧"><a class="anchor" href="#第四章高级开发技巧">#</a> 第四章：高级开发技巧</h4> <h5 id="41-自定义渲染引擎"><a class="anchor" href="#41-自定义渲染引擎">#</a> 4.1 自定义渲染引擎</h5> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 </pre></td><td class="code"><pre>class CustomRenderer extends translate.Renderer { onTextNode(node, translation) { if (node.parentNode.tagName === 'H1') { return `${translation}`; } return translation; } } translate.renderer.use(new CustomRenderer()); </pre></td></tr></table></figure> <h5 id="42-翻译流水线扩展"><a class="anchor" href="#42-翻译流水线扩展">#</a> 4.2 翻译流水线扩展</h5> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 </pre></td><td class="code"><pre>// 添加预处理插件 translate.pipeline.before('translate', (text, context) => { return text.replace(/\b\d{4}\b/g, '<year>'); }); // 添加后处理插件 translate.pipeline.after('translate', (text, context) => { return text.replace(/<year>/g, new Date().getFullYear()); }); </pre></td></tr></table></figure> <h5 id="43-多模态翻译"><a class="anchor" href="#43-多模态翻译">#</a> 4.3 多模态翻译</h5> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 </pre></td><td class="code"><pre>// 图片OCR翻译 translate.image.translator = async (imgElement) => { const text = await OCR.detect(imgElement.src); return translate.execute(text); }; // 视频字幕处理 translate.video.handle = (videoElement) => { const tracks = videoElement.textTracks; tracks.forEach(track => { translate.subtitle.process(track); }); }; </pre></td></tr></table></figure> <hr /> <h4 id="第五章调试与优化"><a class="anchor" href="#第五章调试与优化">#</a> 第五章：调试与优化</h4> <h5 id="51-性能分析工具"><a class="anchor" href="#51-性能分析工具">#</a> 5.1 性能分析工具</h5> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td class="code"><pre>// 开启性能监控 translate.monitor.enable({ metrics: ['dom-parse', 'network', 'render'], sampling: 0.1 // 10%采样率 }); // 自定义性能指标 translate.monitor.define('custom-metric', () => { return performance.now() - window.translateStart; }); </pre></td></tr></table></figure> <h5 id="52-内存优化方案"><a class="anchor" href="#52-内存优化方案">#</a> 5.2 内存优化方案</h5> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 </pre></td><td class="code"><pre>// 分块加载策略 translate.chunk.set({ size: 500, // 每块500字符 parallel: 3 // 最大并发数 }); // DOM 回收机制 translate.garbageCollector.run({ interval: 30000, policy: 'aggressive' }); </pre></td></tr></table></figure> <hr /> <h4 id="结语"><a class="anchor" href="#结语">#</a> 结语</h4> 您还可以可通过 官方演示站点 体验完整功能，更多企业级方案请参考 Gitee 仓库。 <h3 id="参考资料"><a class="anchor" href="#参考资料">#</a> 参考资料</h3> <ul> <li>translate.js 官方文档: http://translate.zvo.cn/43086.html</li> <li>谷歌翻译私有化部署指南: https://cloud.google.com/translate</li> <li>多语言 SEO 优化策略: https://developers.google.com/search/docs/advanced/crawling/managing-multi-regional-sites</li> </ul> <hr /> 提示：访问 <a href="https://jdjwzx233.cn">本站： jdjwzx233.cn</a> 点击页面底部语言切换按钮，可实时体验 translate.js 的实际效果。 <h2 id="结尾"><a class="anchor" href="#结尾">#</a> 结尾</h2> 非常感谢你能看到这里，如有什么问题欢迎在评论区中提出！如果可以的话，请订阅我的网站：<a href="https://jdjwzx233.cn/Subscribe">https://jdjwzx233.cn/Subscribe</a> 如果你觉得我的博客不错的话，可以赞助我 (・̀ ω・́)✧：<a href="https://jdjwzx233.cn/support">https://jdjwzx233.cn/support</a>。

2025/5/1

使用Netlify搭建反向代理

<div class="note warning"> 1. 免责声明 在撰写本文时，我旨在为技术爱好者提供有关如何使用 Netlify 搭建反向代理的技术指导和示例。请注意，本文中的信息和建议仅供参考，具体实施可能会因实际情况而有所不同。使用本文提供的方法和步骤时，请确保遵循当地法律法规，并充分考虑网络安全和数据保护的要求。 本文作者和发布平台对因使用本文内容而导致的任何直接或间接损失、损害或法律责任不承担任何责任。建议在实施任何技术方案之前，进行充分的测试和风险评估，并寻求专业意见，以确保符合适用的法律和行业标准。 2. 合法用途声明 请遵守相关法律法规，包括但不限于《中华人民共和国网络安全法》和《互联网信息服务管理办法》。请确保在使用 Netlify 或其他服务时： <ol> <li>合法合规：确保所搭建的反向代理不用于违反法律法规的活动，包括但不限于绕过审查、非法数据传输、或其他违法用途。</li> <li>尊重版权和隐私：遵守版权法律，确保所代理的内容不侵犯第三方的知识产权。同时，保障用户隐私，遵循数据保护的相关要求。</li> <li>网络安全：采取必要的安全措施，防止反向代理服务被用于恶意目的，保障系统和用户数据的安全。</li> <li>信息透明：确保提供的服务信息清晰透明，用户可以明确知晓反向代理的用途和可能的风险。</li> </ol> </div> <h2 id="前言摘要"><a class="anchor" href="#前言摘要">#</a> 前言 / 摘要</h2> 在当今互联网环境下，尤其是部分国外和国内网站常常由于 DNS 污染和其他原因而无法正常访问，这成为了许多用户的一大困扰。此外，有些网站虽然仅能通过 IP 地址进行访问，却无法绑定自定义域名，这同样限制了其灵活性和可用性。为了解决这些问题，搭建一个反向代理服务器成为了一个有效的解决方案。反向代理不仅可以帮助用户绕过 DNS 污染的问题，还能让我们以自定义的域名来访问那些仅能通过 IP 地址访问的网站。 在本篇文章中，我们将利用 Netlify 这一强大而易于使用的工具来搭建反向代理。Netlify 的强大之处在于其简洁的配置过程和强大的功能，使得即使是对技术不太熟悉的用户也能轻松上手。要完成这项任务，你只需具备两个基本条件：一个 Netlify 账号和一个 GitHub 账号。接下来，我们将详细介绍如何通过这两个账户配置反向代理。 <h2 id="正文"><a class="anchor" href="#正文">#</a> 正文</h2> <div class="note info"> 温馨提示 标题后面有 (选) 的为后台相关内容，如不需要可以跳过 </div> <h3 id="第一步-准备用于搭建反代的环境"><a class="anchor" href="#第一步-准备用于搭建反代的环境">#</a> 第一步准备用于搭建反代的环境</h3> <h4 id="1-创建储存库"><a class="anchor" href="#1-创建储存库">#</a> 1. 创建储存库</h4> 创建一个用于存放 Netlify 配置文件的 GitHub 储存库 如图: <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/1726582387299_23298110f4e294999cce8e5ddb9919ed.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/1726582387299_23298110f4e294999cce8e5ddb9919ed.png" /> <h4 id="2-创建配置文件"><a class="anchor" href="#2-创建配置文件">#</a> 2. 创建配置文件</h4> 新建名为 <code>netlify.toml</code> 的配置文件 如图: <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_b32990708afc79c8ac57533641e18942.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_b32990708afc79c8ac57533641e18942.png" /> 文件内容为： <figure class="highlight toml"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre>[[redirects]] from = "/*" to = "https://github.com/:splat" status = 200 </pre></td></tr></table></figure> <h4 id="选择性内容"><a class="anchor" href="#选择性内容">#</a> 选择性内容</h4> 再新建一个储存库，用于搭建管理后台 (选) 如图: <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/1726582387299_23298110f4e294999cce8e5ddb9919ed.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/1726582387299_23298110f4e294999cce8e5ddb9919ed.png" /> <h5 id="储存库中包含的文件选"><a class="anchor" href="#储存库中包含的文件选">#</a> 储存库中包含的文件 (选):</h5> <figure class="highlight plaintext"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 </pre></td><td class="code"><pre>│ index.html │ package.json │ README.md │ └─netlify 　　└─functions 　　　　auth-callback.js 　　　　check-auth.js 　　　　update-redirect.js </pre></td></tr></table></figure> <ol> <li>index.html：应用的主要前端页面，包含用户登录和配置反向代理的表单。(选)</li> </ol> <div class="note info"> 温馨提示 请在代码中的【这里填你的反代网站，不是后台】中填入你的反代网址 (就是用存放 Netlify 配置文件的 GitHub 储存库搭建的那个)【这里填你的 GitHub clientid】中填入你的 GitHub clientid，获取方法见下文 </div> <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 </pre></td><td class="code"><pre><!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>反代配置</title> <style> body { font-family: Arial, sans-serif; background: linear-gradient(to bottom, #87CEFA, #FFFFFF); margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; overflow-x: hidden; } .container { text-align: center; width: 90%; max-width: 500px; } h1 { color: #333; margin-bottom: 20px; font-size: 1.8em; } form { background: #f9f9f9; border-radius: 15px; padding: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease-in-out; } form:hover { transform: scale(1.02); } label { font-size: 1.2em; display: block; margin-bottom: 10px; color: #555; } input[type="url"] { width: calc(100% - 22px); padding: 10px; border-radius: 8px; border: 1px solid #ddd; margin-bottom: 20px; font-size: 1em; box-sizing: border-box; } button { background-color: #87CEFA; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 1.1em; transition: background-color 0.3s ease-in-out; } button:hover { background-color: #00BFFF; } #message { font-size: 1.2em; color: #333; margin-top: 20px; } .error-container, .success-container { display: none; background: #f0f8ff; border: 1px solid #d4edda; border-radius: 8px; padding: 20px; margin-top: 20px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; } .error-container { border-color: #f5c6cb; background: #f8d7da; color: #721c24; } .success-container { border-color: #c3e6cb; background: #d4edda; color: #155724; } .error-container p, .success-container p { margin: 0; } .success-container button { margin-top: 10px; background-color: #4CAF50; border: none; } .success-container button:hover { background-color: #45a049; } .tooltip { position: relative; display: inline-block; cursor: pointer; } .tooltip .tooltiptext { visibility: hidden; width: 200px; background-color: #333; color: #fff; text-align: center; border-radius: 6px; padding: 5px 10px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } #loginContainer { display: none; } </style> </head> <body> <div class="container"> <h1>反代配置器</h1> <div id="loginContainer"> <p>请登录以访问此页面。</p> <button id="loginButton">使用 GitHub 登录</button> </div> <form id="redirectForm" style="display: none;"> <div class="tooltip"> <label for="website">请输入要反代到的网址：</label> <span class="tooltiptext">请输入完整的 URL 地址，例如 https://example.com</span> </div> <input type="url" id="website" name="website" required> <button type="submit">提交</button> </form> <div id="errorMessage" class="error-container"> <p id="errorStatusMessage"></p> </div> <div id="successMessage" class="success-container"> <p id="successStatusMessage"></p> <button id="redirectButton" style="display: none;">前往反代网站</button> </div> </div> <script> async function checkAuthentication() { const response = await fetch('/.netlify/functions/check-auth'); const result = await response.json(); if (result.authenticated) { document.getElementById('loginContainer').style.display = 'none'; document.getElementById('redirectForm').style.display = 'block'; } else { document.getElementById('loginContainer').style.display = 'block'; document.getElementById('redirectForm').style.display = 'none'; } } document.getElementById('loginButton').addEventListener('click', () => { window.location.href = `https://github.com/login/oauth/authorize?client_id=【这里填你的GitHub clientid】&redirect_uri=${encodeURIComponent(window.location.origin + '/.netlify/functions/auth-callback')}`; }); document.getElementById('redirectForm').addEventListener('submit', async (event) => { event.preventDefault(); const website = document.getElementById('website').value; const urlPattern = /^https?:\/\/[^\/]+$/; const errorMessageElement = document.getElementById('errorStatusMessage'); const successMessageElement = document.getElementById('successStatusMessage'); const errorContainer = document.getElementById('errorMessage'); const successContainer = document.getElementById('successMessage'); const redirectButton = document.getElementById('redirectButton'); if (!urlPattern.test(website)) { const suggestion = website.replace(/\/+$/, ''); errorMessageElement.innerText = `输入的 URL 格式不正确。请确保网址以 'https://example.com' 形式输入。你可能的正确输入是：${suggestion}`; errorContainer.style.display = 'block'; successContainer.style.display = 'none'; return; } const response = await fetch('/.netlify/functions/update-redirect', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ website }) }); const result = await response.json(); if (result.message === 'Redirect updated successfully!') { successMessageElement.innerText = '反代配置成功！请等待服务器更新，预计1分钟。'; successContainer.style.display = 'block'; errorContainer.style.display = 'none'; redirectButton.style.display = 'inline-block'; redirectButton.addEventListener('click', () => { window.location.href = '【这里填你的反代网站，不是后台】'; }); } else { errorMessageElement.innerText = `配置失败：${result.message}`; errorContainer.style.display = 'block'; successContainer.style.display = 'none'; } }); // Initialize the authentication check checkAuthentication(); </script> </body> </html> </pre></td></tr></table></figure> <ol start="2"> <li>/netlify/functions/auth-callback.js：处理 GitHub OAuth 回调的函数，设置用户的登录状态。(选)</li> </ol> <figure class="highlight js"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 </pre></td><td class="code"><pre>exports.handler = async function(event, context) { const clientId = process.env.GITHUB_CLIENT_ID; const clientSecret = process.env.GITHUB_CLIENT_SECRET; const allowedUsers = process.env.ALLOWED_USERS.split(','); const jwtSecret = process.env.JWT_SECRET; const code = event.queryStringParameters.code; if (!code) { return { statusCode: 400, body: JSON.stringify({ message: 'Missing code parameter' }) }; } try { const fetch = (await import('node-fetch')).default; const jwt = (await import('jsonwebtoken')).default; const response = await fetch(`https://github.com/login/oauth/access_token`, { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify({ client_id: clientId, client_secret: clientSecret, code: code }) }); const data = await response.json(); if (data.error) { throw new Error(data.error_description); } const userResponse = await fetch('https://api.github.com/user', { headers: { Authorization: `token ${data.access_token}` } }); const userInfo = await userResponse.json(); if (allowedUsers.includes(userInfo.login)) { const token = jwt.sign({ username: userInfo.login }, jwtSecret, { expiresIn: '1h' }); return { statusCode: 302, headers: { 'Set-Cookie': `token=${token}; Path=/; HttpOnly`, 'Location': '/' }, body: '' }; } else { return { statusCode: 403, body: JSON.stringify({ message: 'Unauthorized' }) }; } } catch (error) { return { statusCode: 500, body: `Error: ${error.message}` }; } }; </pre></td></tr></table></figure> <ol start="3"> <li>/netlify/functions/check-auth.js：检查用户是否已登录的函数。(选)</li> </ol> <figure class="highlight js"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 </pre></td><td class="code"><pre>exports.handler = async function(event, context) { const jwtSecret = process.env.JWT_SECRET; const cookieHeader = event.headers.cookie || ''; const cookies = Object.fromEntries(cookieHeader.split('; ').map(cookie => cookie.split('='))); const token = cookies.token; try { const jwt = (await import('jsonwebtoken')).default; jwt.verify(token, jwtSecret); return { statusCode: 200, body: JSON.stringify({ authenticated: true }) }; } catch (err) { return { statusCode: 403, body: JSON.stringify({ authenticated: false }) }; } }; </pre></td></tr></table></figure> <ol start="4"> <li>/netlify/functions/update-redirect.js：处理反向代理配置的函数。(选)</li> </ol> <div class="note info"> 温馨提示 请在代码中的【这里填入你的 GitHub 用户名】【用于存放 Netlify 配置文件的 GitHub 储存库名称】中分别填入你的 GitHub 用户名和用于存放 Netlify 配置文件的 GitHub 储存库名称，获取方法见下文 </div> <figure class="highlight js"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 </pre></td><td class="code"><pre>exports.handler const jwtSecret = process.env.JWT_SECRET; const allowedUsers = process.env.ALLOWED_USERS.split(','); const cookieHeader = event.headers.cookie || ''; const cookies = Object.fromEntries(cookieHeader.split('; ').map(cookie => cookie.split('='))); const token = cookies.token; let decodedToken; try { const jwt = (await import('jsonwebtoken')).default; decodedToken = jwt.verify(token, jwtSecret); } catch (err) { return { statusCode: 403, body: JSON.stringify({ message: 'Unauthorized' }) }; } if (!allowedUsers.includes(decodedToken.username)) { return { statusCode: 403, body: JSON.stringify({ message: 'Unauthorized' }) }; } const { Octokit } = await import('@octokit/rest'); const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN }); const { website } = JSON.parse(event.body); if (!website) { return { statusCode: 400, body: JSON.stringify({ message: 'No website provided' }) }; } try { const fetch = (await import('node-fetch')).default; const { data: fileData } = await octokit.repos.getContent({ owner: '【这里填入你的GitHub用户名】', repo: '【用于存放Netlify配置文件的GitHub储存库名称】', path: 'netlify.toml' }); const content = Buffer.from(fileData.content, 'base64').toString(); const newContent = content.replace(/to\s*=\s*"[^"]+"/, `to = "${website}/:splat"`); await octokit.repos.createOrUpdateFileContents({ owner: '【这里填入你的GitHub用户名】', repo: '【用于存放Netlify配置文件的GitHub储存库名称】', path: 'netlify.toml', message: 'Update redirect URL', content: Buffer.from(newContent).toString('base64'), sha: fileData.sha }); return { statusCode: 200, body: JSON.stringify({ message: 'Redirect updated successfully!' }) }; } catch (error) { console.error(error); return { statusCode: 500, body: JSON.stringify({ message: 'Failed to update redirect' }) }; } }; </pre></td></tr></table></figure> <ol start="5"> <li>package.json：存放依赖的文件。(选) <figure class="highlight json"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </pre></td><td class="code"><pre>{ "name": "Rcs, "version": "1.0.0", "description": "A reverse proxy configurator with GitHub authentication deployed on Netlify.", "main": "index.js", "scripts": { "start": "netlify dev", "build": "netlify build" }, "dependencies": { "@octokit/rest": "^19.0.7", "jsonwebtoken": "^9.0.2", "node-fetch": "^3.3.2" }, "devDependencies": { "netlify-cli": "^15.0.0" }, "engines": { "node": ">=16.x" }, "author": "j23", "license": "MIT" } </pre></td></tr></table></figure></li> </ol> <h3 id="第二步-配置netlify"><a class="anchor" href="#第二步-配置netlify">#</a> 第二步配置 Netlify</h3> <h4 id="1-创建一个站点"><a class="anchor" href="#1-创建一个站点">#</a> 1. 创建一个站点</h4> 如图： <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_24ce560b9f2dc57d0d6f51bfebae6b71.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_24ce560b9f2dc57d0d6f51bfebae6b71.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_d0c9459ade47c217db7d74d4c0dc815f.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_d0c9459ade47c217db7d74d4c0dc815f.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_ee9fc4b5245b51661e8a91a2c509c959.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_ee9fc4b5245b51661e8a91a2c509c959.png" /> <ol start="4"> <li>选择你的用于存放 Netlify 配置文件的 GitHub 储存库</li> </ol> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_1f40a4eb848a567c69eee524172ba04a.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_1f40a4eb848a567c69eee524172ba04a.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE_17-9-2024_23297_app.netlify.com_9d63c0ed9504f5a945c156f026d8fc1f.jpeg" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/屏幕截图_17-9-2024_23297_app.netlify.com_9d63c0ed9504f5a945c156f026d8fc1f.jpeg" /> <h4 id="2配置自定义域名"><a class="anchor" href="#2配置自定义域名">#</a> 2. 配置自定义域名</h4> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_03b28a83de8ee0c91accd703fdca989d.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_03b28a83de8ee0c91accd703fdca989d.png" /> <div class="note info"> 自此所有基本操作已经完成，如果不需要配置后台，你只需要修改 Netlify 配置文件中的链接，就可以实现更换需要代理的网站。 </div> 修改内容如下 (注意！，网址格式必须为 https://example.com/，不能删去 https:// 也不能删去最后的 /)： <figure class="highlight toml"><table><tr><td class="gutter"><pre>1 2 3 4 </pre></td><td class="code"><pre>[[redirects]] from = "/*" to = "【修改这里】:splat" status = 200 </pre></td></tr></table></figure> <h3 id="选择性内容-2"><a class="anchor" href="#选择性内容-2">#</a> 选择性内容</h3> <h4 id="一github-登录"><a class="anchor" href="#一github-登录">#</a> 一.GitHub 登录</h4> 使用 GitHub 进行 OAuth 登录，确保只有授权用户可以访问配置功能。 <h5 id="第一步"><a class="anchor" href="#第一步">#</a> 第一步：</h5> 打开下面网址，并填好配置 https://github.com/settings/applications/new <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_08ba52609ba4bfe62f2563933cbba566.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_08ba52609ba4bfe62f2563933cbba566.png" /> <h5 id="第二步"><a class="anchor" href="#第二步">#</a> 第二步:</h5> 获取 Client ID，并生成 Client secrets，后面要用 <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_038e6d1208bd8e0990b3b595a40f256e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_038e6d1208bd8e0990b3b595a40f256e.png" /> 2. <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_0572103207489f7a3ae48fd3a3e2a2b6.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_0572103207489f7a3ae48fd3a3e2a2b6.png" /> <div class="note warning"> 警告！ 请妥善保管好你的 Client secrets！ </div> <h4 id="二配置用于修改储存库的密钥"><a class="anchor" href="#二配置用于修改储存库的密钥">#</a> 二。配置用于修改储存库的密钥</h4> <ol> <li> 打开下面的网址 https://github.com/settings/tokens <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_29ac6da4b073ffc18764a3748bcc885a.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_29ac6da4b073ffc18764a3748bcc885a.png" /> </li> <li> 填入相关内容，选择不过期，勾选储存库 </li> </ol> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_bdfead6a17b8cdf05219e9ae7e9bd799.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_bdfead6a17b8cdf05219e9ae7e9bd799.png" /> <ol start="3"> <li>获取到密钥</li> </ol> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_56563b4d40ebd00c25c2ddbc0aea9565.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_56563b4d40ebd00c25c2ddbc0aea9565.png" /> <div class="note warning"> 警告！ 请妥善保管好你的密钥 </div> <h4 id="三配置netlify"><a class="anchor" href="#三配置netlify">#</a> 三。配置 Netlify</h4> <h5 id="第一步创建站点"><a class="anchor" href="#第一步创建站点">#</a> 第一步：创建站点</h5> 如图： <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_24ce560b9f2dc57d0d6f51bfebae6b71.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_24ce560b9f2dc57d0d6f51bfebae6b71.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_d0c9459ade47c217db7d74d4c0dc815f.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_d0c9459ade47c217db7d74d4c0dc815f.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_ee9fc4b5245b51661e8a91a2c509c959.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_ee9fc4b5245b51661e8a91a2c509c959.png" /> <ol start="4"> <li>选择你的后台储存库</li> </ol> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_1f40a4eb848a567c69eee524172ba04a.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_1f40a4eb848a567c69eee524172ba04a.png" /> <ol start="5"> <li>填入环境变量 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre>1 2 3 4 5 </pre></td><td class="code"><pre>ALLOWED_USERS：你授权使用后台的GitHub用户名，用半角逗号隔开，如果只有一个用户，则无需逗号。如：用户名1,用户名2 GITHUB_CLIENT_ID：你的CLIENT_ID GITHUB_CLIENT_SECRET：你的CLIENT_SECRET GITHUB_TOKEN：你的GitHub账号密钥 JWT_SECRET：一个随机的不限位数的字符串，如wfhehfihwjdwefnabwaieu72dub3uigfvqty2UGQWADIWGADIY3UGF378 </pre></td></tr></table></figure></li> </ol> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_5bb90ceb6dd257c5c3e51cd20423f929.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_5bb90ceb6dd257c5c3e51cd20423f929.png" /> 如果这一步漏掉了，可以在下面页面找到并补充 <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_1184a04b95f68e809a5360a9e5925ecc.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/18/image_1184a04b95f68e809a5360a9e5925ecc.png" /> <h5 id="第二步配置自定义域名"><a class="anchor" href="#第二步配置自定义域名">#</a> 第二步。配置自定义域名</h5> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_03b28a83de8ee0c91accd703fdca989d.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/24/9/17/image_03b28a83de8ee0c91accd703fdca989d.png" /> <h2 id="结尾"><a class="anchor" href="#结尾">#</a> 结尾</h2> 非常感谢你能看到这里，如有什么问题欢迎在评论区中提出！如果可以的话，请订阅我的网站：<a href="https://jdjwzx233.cn/Subscribe">https://jdjwzx233.cn/Subscribe</a> 如果你觉得我的博客不错的话，可以赞助我 (・̀ ω・́)✧：<a href="https://jdjwzx233.cn/support">https://jdjwzx233.cn/support</a>。

2024/9/17

搭建jsdelivr镜像(又拍云/nginx/cfwokers/Deno)

<h2 id="前言"><a class="anchor" href="#前言">#</a> 前言</h2> jsDelivr —— 一个免费、快速、可靠的为 JS 和开源项目服务的 CDN。但是由于国内访问速度慢，加之 jsDelivr 备案被吊销和 DNS 污染常出现，国内使用了 jsDelivr 的站点常常出现访问速度慢的问题。 你可能会问，为什么不去使用别人的镜像站呢？俗话说 "自己动手，丰衣足食"，自建镜像站可以让你更好地掌握自己的数据和服务。使用第三方镜像站存在一些潜在的风险和不确定性。首先，你无法确定第三方镜像站的可靠性和稳定性，它们可能在任何时候关闭或遭遇故障。这将对你的站点造成严重影响，可能导致服务中断。其次，第三方镜像站可能无法及时更新和同步你的站点内容，导致访问者无法获取最新的信息。最后，自建镜像站可以让你更加灵活地定制和管理自己的站点，满足特定需求和提供更好的用户体验。因此，建议在可行的情况下，考虑自建镜像站来确保数据的安全和可靠性。 同时，本文也适用于其他网站的镜像搭建。 <h2 id="方法一使用又拍云搭建"><a class="anchor" href="#方法一使用又拍云搭建">#</a> 方法一：使用又拍云搭建</h2> <h3 id="优点"><a class="anchor" href="#优点">#</a> 优点：</h3> <ol> <li>又拍云是国内知名企业级云服务商，其服务极速、稳定、简单易用，用来搭建镜像站是十分合适的。又拍云有非常多的优惠：加入又拍云联盟 (网站需备案，要在网站 / 应用底部添加又拍云 LOGO 并指向官网) 后，可以获得每月 10G 储存空间和 15G 的 CDN 流量 (按年发放，以 67 元的代金卷发放到账户)；新用户注册 (点我注册) 还可以直接获得 61 元的代金卷 (有效期一年)。在这些优惠的加成下，你可以零成本搭建一个镜像站。</li> </ol> 2. 加速效果明显 (如图) 加速前： <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/blog_img_%E5%8A%A0%E9%80%9F%E5%89%8D_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/blog_img_加速前_d41d8cd98f00b204e9800998ecf8427e.png" title="加速前" /> 加速后： <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/blog_img_%E5%8A%A0%E9%80%9F%E5%90%8E_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/blog_img_加速后_d41d8cd98f00b204e9800998ecf8427e.png" title="加速后" /> <h3 id="缺点"><a class="anchor" href="#缺点">#</a> 缺点：</h3> 需要备案！！！ <h3 id="推荐指数"><a class="anchor" href="#推荐指数">#</a> 推荐指数:⭐⭐⭐⭐⭐</h3> <h3 id="搭建方法"><a class="anchor" href="#搭建方法">#</a> 搭建方法：</h3> <h4 id="第一步"><a class="anchor" href="#第一步">#</a> 第一步：</h4> 创建又拍云账户 (点我注册) <h4 id="第二步"><a class="anchor" href="#第二步">#</a> 第二步：</h4> 进入控制台的 CDN 管理界面 (https://console.upyun.com/services/cdn/), 并创建服务，然后配置服务 (具体参数如下)。 <ol> <li>服务名称：唯一标识服务，例如：image-upyun-com，一个服务下面可以绑定多个自有域名。</li> </ol> <div class="note info"> 注意事项 服务名称仅限 5～20 位；必须以小写英文字符开头，仅支持小写英文字符、数字、中划线组合。 </div> <ol start="2"> <li>加速域名：填写此次需要配置的加速域名。</li> </ol> <div class="note info"> 注意事项 加速域名必须已在工信部备案；待加速域名尚未在又拍云 CDN 平台配置。 </div> 加速域名需要进行域名所有权验证，验证通过后方能添加成功。 <ol start="3"> <li>应用场景：这里选择全站加速</li> <li>回源协议：选协议跟随。</li> <li>源站证书校验：切记！！不要打开 (实测开了以后不能用)！！！</li> <li>线路配置：源站地址填 <code>cdn.jsdelivr.net</code> , 端口号不要动。</li> </ol> <h4 id="第三步"><a class="anchor" href="#第三步">#</a> 第三步</h4> <ol> <li>服务创建成功后，操作界面会提示 CDN 加速服务创建成功，并会自动跳转到该服务的【功能配置】界面</li> <li>在功能配置界面，有域名管理、回源管理、缓存配置、性能优化、HTTPS、访问控制、图片处理等功能配置模块，在【域名管理】模块下，可以针对该服务绑定多个自有域名，请耐心等待域名配置（约 10 分钟），查看域名对应的状态是否为［正常］</li> <li>可查看 CDN 平台为您分配的 CNAME 地址，此时需要去域名 DNS 解析商处，为该域名添加一条 CNAME 记录，待 CNAME 配置生效之后，方可使用 CDN 服务。</li> </ol> <h4 id="第四步非必要但是可以提升体验"><a class="anchor" href="#第四步非必要但是可以提升体验">#</a> 第四步 (非必要，但是可以提升体验)</h4> <ol> <li> 配置 HTTPS: 点击 [HTTPS], 点击 "HTTPS 配置" 右边的管理 (如图)<img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/image_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/image_d41d8cd98f00b204e9800998ecf8427e.png" /> 然后你可以选择添加自有证书或直接使用又拍云注册证书 (点我前往证书管理)。添加完后，打开 [HTTPS 访问]，不建议勾选 [强制 HTTPS 访问]。 </li> <li> 建议打开智能压缩和页面压缩 (如图) <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703354977231_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703354977231_d41d8cd98f00b204e9800998ecf8427e.png" /> </li> <li> 建议配置缓存、浏览器缓存和分段缓存 (如图) <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355090340_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355090340_d41d8cd98f00b204e9800998ecf8427e.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355115278_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355115278_d41d8cd98f00b204e9800998ecf8427e.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355198422_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355198422_d41d8cd98f00b204e9800998ecf8427e.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355224230_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355224230_d41d8cd98f00b204e9800998ecf8427e.png" /> </li> <li> 在 [访问控制] 中，打开 Referer 防盗链、WAF 保护、HTTP 请求体大小限制、IP 访问限制 (如图) <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355343968_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355343968_d41d8cd98f00b204e9800998ecf8427e.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355382813_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355382813_d41d8cd98f00b204e9800998ecf8427e.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355473637_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355473637_d41d8cd98f00b204e9800998ecf8427e.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355505400_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703355505400_d41d8cd98f00b204e9800998ecf8427e.png" /> <div class="note info"> 此配置仅作参考，请根据实际情况进行配置！ </div> </li> <li> 你还可以配置 [边缘规则]，来实现一些特殊效果。(这里不做演示) </li> </ol> <h2 id="方法二使用cloudflare-workers搭建"><a class="anchor" href="#方法二使用cloudflare-workers搭建">#</a> 方法二：使用 Cloudflare workers 搭建</h2> <h3 id="优点-2"><a class="anchor" href="#优点-2">#</a> 优点：</h3> <ol> <li>简单，步骤少，加速范围广</li> <li>无需备案，加速效果较好 (如图) 加速前：<img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/blog_img_%E5%8A%A0%E9%80%9F%E5%89%8D_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/blog_img_加速前_d41d8cd98f00b204e9800998ecf8427e.png" title="加速前" /> 加速后：<img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/cfwokerjsd_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/cfwokerjsd_d41d8cd98f00b204e9800998ecf8427e.png" title="加速后" /></li> <li>无费用，每天有免费额度 (每天免费 100000 个请求)</li> </ol> <h3 id="缺点-2"><a class="anchor" href="#缺点-2">#</a> 缺点:</h3> <ol> <li>部分地区访问较慢</li> <li>免费额度较少，对于访问量大的站点可能不够</li> <li>需要有一个挂在 cloudflare 的域名</li> </ol> <h3 id="推荐指数-2"><a class="anchor" href="#推荐指数-2">#</a> 推荐指数:⭐⭐⭐⭐</h3> <h3 id="搭建方法-2"><a class="anchor" href="#搭建方法-2">#</a> 搭建方法</h3> <h4 id="第一步-2"><a class="anchor" href="#第一步-2">#</a> 第一步</h4> <ol> <li>在 Cloudflare 管理面板的 [Workers 和 Pages] 栏 ->[概述]->[创建应用程序]->[创建 Worker]（如图） <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703396996483_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703396996483_d41d8cd98f00b204e9800998ecf8427e.png" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703397051051_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703397051051_d41d8cd98f00b204e9800998ecf8427e.png" /></li> <li>随便填一个名称，点击 [部署]（如图）</li> </ol> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703397134262_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703397134262_d41d8cd98f00b204e9800998ecf8427e.png" /> <h4 id="第二步-2"><a class="anchor" href="#第二步-2">#</a> 第二步</h4> <ol> <li>在创建完成的页面点击 [编辑代码]（如图）<img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703397288998_d41d8cd98f00b204e9800998ecf8427e.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/23/12/24/1703397288998_d41d8cd98f00b204e9800998ecf8427e.png" /></li> <li>将以下代码直接粘贴进代码框：</li> </ol> <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 </pre></td><td class="code"><pre>'use strict' /** * static files (404.html, sw.js, conf.js) */ const ASSET_URL = 'https://cdn.jsdelivr.net' const JS_VER = 10 const MAX_RETRY = 1 /** @type {RequestInit} */ const PREFLIGHT_INIT = { status: 204, headers: new Headers({ 'access-control-allow-origin': '*', 'access-control-allow-methods': 'GET,POST,PUT,PATCH,TRACE,DELETE,HEAD,OPTIONS', 'access-control-max-age': '1728000', }), } /** * @param {any} body * @param {number} status * @param {Object<string, string>} headers */ function makeRes(body, status = 200, headers = {}) { headers['--ver'] = JS_VER headers['access-control-allow-origin'] = '*' return new Response(body, {status, headers}) } /** * @param {string} urlStr */ function newUrl(urlStr) { try { return new URL(urlStr) } catch (err) { return null } } addEventListener('fetch', e => { const ret = fetchHandler(e) .catch(err => makeRes('cfworker error:\n' + err.stack, 502)) e.respondWith(ret) }) /** * @param {FetchEvent} e */ async function fetchHandler(e) { const req = e.request const urlStr = req.url const urlObj = new URL(urlStr) const path = urlObj.href.substr(urlObj.origin.length) if (urlObj.protocol === 'http:') { urlObj.protocol = 'https:' return makeRes('', 301, { 'strict-transport-security': 'max-age=99999999; includeSubDomains; preload', 'location': urlObj.href, }) } if (path.startsWith('/http/')) { return httpHandler(req, path.substr(6)) } switch (path) { case '/http': return makeRes('请更新 cfworker 到最新版本!') case '/ws': return makeRes('not support', 400) case '/works': return makeRes('it works') default: // static files return fetch(ASSET_URL + path) } } /** * @param {Request} req * @param {string} pathname */ function httpHandler(req, pathname) { const reqHdrRaw = req.headers if (reqHdrRaw.has('x-jsproxy')) { return Response.error() } // preflight if (req.method === 'OPTIONS' && reqHdrRaw.has('access-control-request-headers') ) { return new Response(null, PREFLIGHT_INIT) } let acehOld = false let rawSvr = '' let rawLen = '' let rawEtag = '' const reqHdrNew = new Headers(reqHdrRaw) reqHdrNew.set('x-jsproxy', '1') // 此处逻辑和 http-dec-req-hdr.lua 大致相同 // https://github.com/EtherDream/jsproxy/blob/master/lua/http-dec-req-hdr.lua const refer = reqHdrNew.get('referer') const query = refer.substr(refer.indexOf('?') + 1) if (!query) { return makeRes('missing params', 403) } const param = new URLSearchParams(query) for (const [k, v] of Object.entries(param)) { if (k.substr(0, 2) === '--') { // 系统信息 switch (k.substr(2)) { case 'aceh': acehOld = true break case 'raw-info': [rawSvr, rawLen, rawEtag] = v.split('|') break } } else { // 还原 HTTP 请求头 if (v) { reqHdrNew.set(k, v) } else { reqHdrNew.delete(k) } } } if (!param.has('referer')) { reqHdrNew.delete('referer') } // cfworker 会把路径中的 `//` 合并成 `/` const urlStr = pathname.replace(/^(https?):\/+/, '$1://') const urlObj = newUrl(urlStr) if (!urlObj) { return makeRes('invalid proxy url: ' + urlStr, 403) } /** @type {RequestInit} */ const reqInit = { method: req.method, headers: reqHdrNew, redirect: 'manual', } if (req.method === 'POST') { reqInit.body = req.body } return proxy(urlObj, reqInit, acehOld, rawLen, 0) } /** * * @param {URL} urlObj * @param {RequestInit} reqInit * @param {number} retryTimes */ async function proxy(urlObj, reqInit, acehOld, rawLen, retryTimes) { const res = await fetch(urlObj.href, reqInit) const resHdrOld = res.headers const resHdrNew = new Headers(resHdrOld) let expose = '*' for (const [k, v] of resHdrOld.entries()) { if (k === 'access-control-allow-origin' || k === 'access-control-expose-headers' || k === 'location' || k === 'set-cookie' ) { const x = '--' + k resHdrNew.set(x, v) if (acehOld) { expose = expose + ',' + x } resHdrNew.delete(k) } else if (acehOld && k !== 'cache-control' && k !== 'content-language' && k !== 'content-type' && k !== 'expires' && k !== 'last-modified' && k !== 'pragma' ) { expose = expose + ',' + k } } if (acehOld) { expose = expose + ',--s' resHdrNew.set('--t', '1') } // verify if (rawLen) { const newLen = resHdrOld.get('content-length') || '' const badLen = (rawLen !== newLen) if (badLen) { if (retryTimes < MAX_RETRY) { urlObj = await parseYtVideoRedir(urlObj, newLen, res) if (urlObj) { return proxy(urlObj, reqInit, acehOld, rawLen, retryTimes + 1) } } return makeRes(res.body, 400, { '--error': `bad len: ${newLen}, except: ${rawLen}`, 'access-control-expose-headers': '--error', }) } if (retryTimes > 1) { resHdrNew.set('--retry', retryTimes) } } let status = res.status resHdrNew.set('access-control-expose-headers', expose) resHdrNew.set('access-control-allow-origin', '*') resHdrNew.set('--s', status) resHdrNew.set('--ver', JS_VER) resHdrNew.delete('content-security-policy') resHdrNew.delete('content-security-policy-report-only') resHdrNew.delete('clear-site-data') if (status === 301 || status === 302 || status === 303 || status === 307 || status === 308 ) { status = status + 10 } return new Response(res.body, { status, headers: resHdrNew, }) } /** * @param {URL} urlObj */ function isYtUrl(urlObj) { return ( urlObj.host.endsWith('.googlevideo.com') && urlObj.pathname.startsWith('/videoplayback') ) } /** * @param {URL} urlObj * @param {number} newLen * @param {Response} res */ async function parseYtVideoRedir(urlObj, newLen, res) { if (newLen > 2000) { return null } if (!isYtUrl(urlObj)) { return null } try { const data = await res.text() urlObj = new URL(data) } catch (err) { return null } if (!isYtUrl(urlObj)) { return null } return urlObj } </pre></td></tr></table></figure> 3. 点击 [保存并部署]。 <h4 id="第三步-2"><a class="anchor" href="#第三步-2">#</a> 第三步</h4> 回到 [概述]，点击你刚才创建的项目，点击 [触发器]，点击 [添加自定义域]，填入一个你账户中的域名或其子域名，点击 [添加自定义域]，完成搭建。 <h2 id="方法三使用deno-playground搭建"><a class="anchor" href="#方法三使用deno-playground搭建">#</a> 方法三：使用 Deno Playground 搭建</h2> <h3 id="优点-3"><a class="anchor" href="#优点-3">#</a> 优点：</h3> <ol> <li>配置十分简单，加速范围广</li> <li>无需备案，加速效果较好 (如图) 加速前： <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_ee2ba28d08999e625e9e68716f43db68.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_ee2ba28d08999e625e9e68716f43db68.png" /> 加速后： <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_dc2d54ac2088cec188556bc6e5582c9a.png" alt="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_dc2d54ac2088cec188556bc6e5582c9a.png" title="加速后" /></li> <li>免费额度多，每月 1000000 次请求，100G 流量</li> <li>只要 DNS 解析就行，不用像 Cloudflare 一样需要修改域名 NS</li> </ol> <h3 id="缺点-3"><a class="anchor" href="#缺点-3">#</a> 缺点:</h3> <ol> <li>部分地区访问较慢</li> <li>没有攻击防护和其他安全功能，存在被攻击或刷流量的风险</li> <li>官方自带的域名被墙，需要自备域名</li> </ol> <h3 id="推荐指数-3"><a class="anchor" href="#推荐指数-3">#</a> 推荐指数:⭐⭐⭐⭐⭐</h3> <h3 id="搭建方法-3"><a class="anchor" href="#搭建方法-3">#</a> 搭建方法</h3> <h4 id="第一步-3"><a class="anchor" href="#第一步-3">#</a> 第一步</h4> <ol> <li> 登录后，在主页右上角点击 [New Playground] <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_df83a1d70d519c100210e71c5aec864d.png" alt="" /> </li> <li> 进入代码编辑页面： <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_6b286fe6d87f51dc041d9bf86b27acd7.png" alt="" /> 如果你没有进入此页面，也可以在主页找到你创建的项目，点击 [Playground] 进入编辑 <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_d8d0b8aecb44e3d7631f209870cf5a88.png" alt="" /> </li> </ol> <h4 id="第二步-3"><a class="anchor" href="#第二步-3">#</a> 第二步</h4> 将以下代码直接粘贴进代码框： <figure class="highlight javascript"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 </pre></td><td class="code"><pre>const HOST = "fastly.jsdelivr.net"; Deno.serve(async (request) => { const url = new URL(request.url); url.host = HOST; const newRequest = new Request(url.toString(), { headers: request.headers, method: request.method, body: request.body, redirect: "follow", }); return await fetch(newRequest); }); </pre></td></tr></table></figure> 3. 点击 [Save & Deploy]。 <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_413cb7fc502499db25d9dcdbbfc72fc8.png" alt="" /> <h4 id="第三步-3"><a class="anchor" href="#第三步-3">#</a> 第三步</h4> 回到你的项目管理页面，点击 [Settings]，点击 [Domains]，再点击 [Add Domain]，填入一个你的域名或其子域名，点击 [Setup], 按照指示完成 DNS 解析后，点击 [Validate], 并点击自动配置证书，完成搭建。(下方有示例图) <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_ebbd1ba342ad1fff1c83ec3404755559.png" alt="" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_d9c4095ac6c21865fc773e2bcca5e5f6.png" alt="" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_9fda6e5f7ae41060e59b3cc092bc552d.png" alt="" /> <img data-src="https://upcdn.jdjwzx233.cn/upload/Qexo/25/5/4/image_80297be1451d4fb7c0e47e581267e4f0.png" alt="" /> <h2 id="方法四使用nginx"><a class="anchor" href="#方法四使用nginx">#</a> 方法四：使用 nginx</h2> <h3 id="优点简单"><a class="anchor" href="#优点简单">#</a> 优点：简单</h3> <h3 id="缺点-4"><a class="anchor" href="#缺点-4">#</a> 缺点:</h3> 加速范围不广，速度受到服务器性能和速度限制。 <h3 id="推荐指数-4"><a class="anchor" href="#推荐指数-4">#</a> 推荐指数:⭐⭐⭐</h3> 新建一个网站，然后把下面内容覆盖到 nginx 配置文件 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 </pre></td><td class="code"><pre>server { listen 80; listen 443 ssl http2; # 请更改为你的证书路径 ssl_certificate fullchain.pem; ssl_certificate_key privkey.pem; # 请更改为你的镜像域名 server_name jsd.ucbk.cn; location / { proxy_pass https://cdn.jsdelivr.net; proxy_set_header Host $proxy_host; proxy_set_header Accept-Encoding ''; proxy_ssl_server_name on; proxy_ssl_name $proxy_host; proxy_redirect / /; # Proxy Cache proxy_cache jsdelivr; proxy_cache_lock on; proxy_cache_lock_timeout 15s; proxy_cache_use_stale updating; proxy_cache_background_update on; proxy_cache_key $host$request_uri; proxy_cache_valid 200 301 302 30d; proxy_cache_valid 500 501 502 503 15s; proxy_cache_valid any 5m; # Replace Domain sub_filter_once off; sub_filter_types application/javascript application/json text/xml text/css; sub_filter '$proxy_host' '$host'; } } # 缓存路径请根据需要更改 proxy_cache_path /var/tmp/nginx/jsdelivr levels=1:2 use_temp_path=off keys_zone=jsdelivr:300m inactive=30d max_size=30g; </pre></td></tr></table></figure> 之后直接把网站涉及到 <code>cdn.jsdelivr.net</code> 都改成你自己的就可以了，如果不想改的话直接在你网站 nginx 配置中加以下内容就可以了 <figure class="highlight plaintext"><table><tr><td class="gutter"><pre>1 2 3 </pre></td><td class="code"><pre>sub_filter_once off; sub_filter_types application/javascript application/json text/xml text/css; sub_filter 'cdn.jsdelivr.net' 'jsd.ucbk.cn'; </pre></td></tr></table></figure> <h2 id="结尾"><a class="anchor" href="#结尾">#</a> 结尾</h2> 除了上述的服务之外，还有其他同样优秀的云服务商可以用于搭建镜像，如腾讯云、阿里云等等，但都存在一个致命的问题：需要备案。希望本文提供的方法可以帮到你，你同样也可以将这个方法用在其他网站的镜像上 (只需要修改一下代码就行) 博主已经搭建了一个镜像站: mysticglow.dpdns.org 这个镜像站目前还没被墙，如有需要的，可以拿去使用，这个镜像站每个月只有 100 万次请求数和 100G 的流量，如果可以的话请自行搭建，不会或懒得搭建的可以使用本站的 (๑・ᴗ・๑)♡ 非常感谢你能看到这里，如有什么问题欢迎在评论区中提出！ 如果你觉得我的博客不错的话，可以赞助我 (・̀ ω・́)✧： <a href="https://jdjwzx233.cn/support" title="赞助我吧，要饿死了QWQ">https://jdjwzx233.cn/support</a>。

2023/12/23

Edge在保留数据的情况下退出微软账户登录

现在，越来越多的人使用 Edge 浏览器来进行网络浏览，但有时候您可能需要退出微软账户登录。问题是，当您退出时，您是否会失去本地存储设备上的数据？本文将解答您的疑惑，告诉您如何在退出微软账户前保留本地数据。 <h2 id="正文"><a class="anchor" href="#正文">#</a> 正文</h2> 当我们无法登录账户时，如果要在 Edge 中退出微软账户登录，可能需要进入该账户的主页才能退出，否则只能使用删除该用户配置才可退出，但这会导致数据丢失，并使一些平台需要重新登录，非常的不方便。 但是，我们可以使用一些其他的方法保留数据退出登录。 在 Windows 的资源管理器中，找到你的用户数据文件夹 (正常情况都在这里)。 <code>C:\Users\用户名\AppData\Local\Microsoft\Edge\User Data</code> 一般来说，你的数据都存储在 Default 文件夹中，如图： <img data-src="https://images.jdjwzx233.cn/upload/Qexo/2023/6/26/image_901d395526eefaf6e30a26fdc9a90d16.png" alt="https://images.jdjwzx233.cn/upload/Qexo/2023/6/26/image_901d395526eefaf6e30a26fdc9a90d16.png" /> 但是有时候你使用了其他用户配置，那么你的数据可能在 <code>Profile+数字</code> 文件夹中，这个要根据你的实际情况进行选择。 <div class="note danger"> 注意！以下操作可能会导致数据丢失，请提前备份好相关数据，再进行操作！ </div> 当你找到自己的数据文件夹后，你需要关闭 Edge 浏览器，注意！要到 <code>任务管理器</code> 中关闭，直接关闭是无效的。 关闭后，你需要备份这个文件夹，完成后，你就可以开始进行退出登录的操作了。 在你的文件夹中，找到这几个文件，如图： <img data-src="https://images.jdjwzx233.cn/upload/Qexo/2023/6/25/image_4a0ce70e5fa19687d509e4752fdb97af.png" alt="https://image.jdjwzx233.cn/upload/Qexo/2023/6/25/image_4a0ce70e5fa19687d509e4752fdb97af.png" /> <div class="note warning"> 以下操作可能会使你保存的密码全部丢失，请提前到设置中导出密码，再进行本操作，导入导出密码的教程放在文章结尾。 </div> 然后删除 <code>Preferences</code> ， <code>Login Data-journal</code> ， <code>Login Data</code> 这三个文件。回到浏览器后，你会发现，你的数据还在，但你的账户被退出了。 在登录你的微软账号后，你就可以导入原来的密码，完成这步后，那么恭喜你，你已经成功完成了退出微软账户保留本地数据的操作！ <h2 id="转移数据"><a class="anchor" href="#转移数据">#</a> 转移数据</h2> 本方法同样适用于转移数据，你只需要将需要转移的用户文件夹中的内容，复制替换掉新的用户文件夹中的内容即可，在此操作之前，你需要备份被替换的用户文件夹中 <code>Preferences</code> ， <code>Login Data-journal</code> ， <code>Login Data</code> 这三个文件，在完成数据转移后，再移动回来，这样，你就完成了数据转移。 <h3 id="导出或导入密码"><a class="anchor" href="#导出或导入密码">#</a> 导出或导入密码</h3> 首先，打开 <code>Edge://settings/passwords</code> 或者你可以打开 <code>设置</code> -> <code>个人资料</code> -> <code>密码</code> 。 然后，在这个地方点击右边的三个点，如图： <img data-src="https://images.jdjwzx233.cn/upload/Qexo/2023/6/26/image_1c76ad526b021903d93f8f1a5a944e60.png" alt="https://images.jdjwzx233.cn/upload/Qexo/2023/6/26/image_1c76ad526b021903d93f8f1a5a944e60.png" /> 选择 <code>导出密码</code> ，在进行这一步时，你可能需要验证你的身份，按照步骤来就行。 最后，将你的密码保存到一个安全的地方，后面导入密码时，同样也是在此地方进行。 如果你觉得我的博客不错的话，可以赞助我 (・̀ ω・́)✧：<a href="https://jdjwzx233.cn/support">https://jdjwzx233.cn/support</a>。

2023/6/25

优秀作文分享——人间烟雨，感谢有你

烟雨迷蒙，如同人生。回首往事，最难忘却的莫过于与你相遇时的情景了吧！—— 题记 烟雨中的你是否还记得那一抹清丽的身影？这个女孩子很特别，她不像其他小姑娘一样喜欢花裙子和洋娃娃，而更爱穿着布鞋踏遍青石板路上的每一处角落。 只因为从前年幼无知的我们都曾经问过彼此：“妈妈说下雨天地面湿滑会摔跤，可以光脚走吗？” 看到大家齐刷刷摇头后便兴高采烈地脱掉了凉鞋，赤足跑进水坑或泥泞里玩耍去了…… 渐渐长大后才明白当初母亲微笑背后的苦涩心酸，也终于理解了你对我们所谓 “放养式教育” 的坚持。 多么希望能够再次见到你啊！但愿岁月静好，现世安稳。在我眼里，你就是仙女姐姐般美好纯洁的存在，你总是用温柔细腻的手抚摸着我们受伤的心灵，告诉我们要勇敢、乐观地活出精彩。 即使偶尔发脾气，嘴巴也依旧甜甜软软的。我想你应该永远是那副没什么烦恼的模样吧，虽然我们之间隔着千山万水，但我始终觉得你离我并不遥远。尽管我们素未谋面，甚至连声音都听不真切，但仿佛冥冥之中早已注定，我们将会成为最熟悉的陌生人。 直到今日我仍深信缘分二字，命运让我们相识又让我们重逢，这种感觉实在太奇妙了。 “有朋自远方来，不亦乐乎”。古人诚不欺我，每当收到你寄来的贺卡，打开它时内心的欣喜溢于言表；翻阅它时脑海中浮现的画面似电影般闪过；合起它时鼻尖萦绕的香味久久挥散不去… 待我读懂了你的文字，品尝了你送给我的巧克力糖果，体验了你讲述的动人故事，享受了你赠予我的珍贵礼物，聆听了你传授的宝贵经验，我恍然顿悟原来我们的相遇竟是命中注定。如若不是在茫茫人海中邂逅，怎会碰撞出绚烂火花？倘若不是被你治愈了伤痛，怎会触及到柔软的内心？谢谢你，带给我的点滴暖意；谢谢你，陪伴我度过的漫长旅程；谢谢你，让我学会了坦然释怀；谢谢你，令我变得越来越优秀。 烟雨朦胧，梦境斑驳，轻捻指尖，满目芬芳。烟雨中的你，是否还记得我呢？我期盼着，下一场烟雨，我们能再次相约。

2023/1/28

优秀作文分享——从未走远

我们从未走远，只是你没发现而已。—— 题记 一个人的心中有多少秘密？谁也无法知道，就像这世界上永远都会存在着许多令人费解之谜一样，它总是让那些充满智慧与灵感的人去猜测、探索和研究。但他们却始终得不到真正的答案。或许，每当夜深人静时，思绪便开始飞扬了吧！ 于是，所谓的诗情画意，便油然而生；所谓的浪漫气息，亦由此而来…… 于是乎，古往今来，凡大家名流，皆如痴似醉地沉浸其间。对于爱情，更是乐此不疲，因为美丽的故事总能打动人心，给予读者以无限遐想空间。 “最好不相见，免得我牵念”，唐朝才子元稹写下了千古绝唱《离思》。王维用笔墨将红豆寄托出相思之苦，李商隐则借芭蕉抒怀别恨。屈原哀叹自己遭谗被疏，伍子胥含泪鞭尸，苏轼愁断肝肠，陆游悲痛欲绝。 明月照亮了黑暗，星光点缀了寂寞，文字带来了希望，纸张承载了梦想。文学作品里蕴藏着太多的内涵，需要细细揣摩，慢慢体味。 尽管岁月悠长，风尘渐起，惟愿历史的车轮碾过后，还留下几颗闪烁的珍珠供后人欣赏玩味。蓦然回首，青春年华早已逝去，伴随成长的足迹踏遍万水千山。可惜韶华易老，昔日容颜不再。曾经沧海难为水，除却巫山不是云。纵使身处闹市，又怎敌得过高山流水遇知音的旷达胸襟呢？ 虽说花开堪折直须折，莫待无花空折枝。然而人非草木孰能无情？面对眼前的诱惑，恐怕很难把持住自己，甚至迷失方向。尤其是看惯了灯红酒绿的繁华景象，听够了莺歌燕舞的靡靡之音，享受惯了富贵荣华的锦衣玉食，接触多了形形色色的社会百态，岂能不贪恋权势金钱？试问：哪位君主甘愿做平民百姓？即使退一步讲，倘若抛弃了功名利禄，选择归隐田园，那么就必定淡泊名利吗？显然并非如此。 陶渊明辞官归隐，采菊东篱下，悠然见南山，依旧钟情于 “结庐在人境，而无车马喧” 的闲适恬淡。周敦颐厌恶官场，宁愿隐居西湖孤山，仍保持清白廉洁的节操。欧阳修贬谪滁州，饱尝艰辛困顿，仍坚守信念，矢志不渝，毫不改变初衷。… 数不胜数，比比皆是。

2023/1/28

优秀作文分享——我，在浙里

<h2 id="第一篇"><a class="anchor" href="#第一篇">#</a> 第一篇:</h2> 浙江，是一片神奇美丽的土地；浙江，孕育了中华民族灿烂悠久的文明；浙江，承载着数以亿计的浙商走向世界！ “三十功名尘与土，八千里路云和月”。一首《满江红》道出了岳飞壮志难酬、报国无门的悲愤心情。但他没有被挫折所压倒，反而更加坚定自己的信念 —— 收复失地，还于旧都。在历史上留下了浓墨重彩的一笔。 “位卑未敢忘忧国”。身为汉臣却始终忠心耿耿，宁死也要捍卫祖国领土完整。我想到了周恩来总理。他曾说过：“为中华崛起而读书！” 就是凭借这种强烈的爱国精神，才使得那么多仁人志士投入革命洪流，推翻黑暗统治，建立新中国！ “先天下之忧而忧，后天下之乐而乐”。范仲淹从小便怀抱远大理想，立志成为像孔子一般博学多识、胸怀天下苍生的圣贤。正因此，他能够舍弃高官厚禄，毅然决然地辞职回乡，开启了著名的 “庆历新政”。虽然最终因保守势力太强而失败，但其忧国忧民的思想却永垂青史。 “居庙堂之高则忧其君，处江湖之远则忧其民”。范仲淹两度遭贬，依然关注百姓疾苦，体恤黎民百姓。在他看来，只有让老百姓安居乐业，社会才能稳定发展。 古人云：“读万卷书不如行千里路。” 不错，纸上谈兵并非真英雄。真正的勇者应当深入实践，躬亲实干。“宝剑锋从磨砺出，梅花香自苦寒来”。鲁迅先生把握住了知识分子的特点，用手中的笔作武器，唤醒麻木的国民。他写杂文，抨击封建制度的弊端，揭露军阀混战的罪恶；他写小说，描绘人民群众受压迫、受剥削的惨状，表现对劳动人民的同情和热爱。鲁迅先生用自己犀利的笔尖戳破假面具，撕去画皮，将丑陋的灵魂暴露给世人。他的每篇杂文犹如匕首，刺痛敌人的心脏。鲁迅先生毫不畏惧，奋斗一生，为后人树立了榜样。 我们生活在这样一个伟大的时代，感谢科技进步带来的方便快捷。我们拥有丰富的物质财富，可以享受电影院、健身房等娱乐设施。但是，别忘记，今日的幸福生活离不开前辈们披荆斩棘的努力拼搏。我相信，在党的领导下，我们必将创造属于我们的辉煌！ <h2 id="第二篇"><a class="anchor" href="#第二篇">#</a> 第二篇:</h2> 浙里，我在这里。我来自浙南的温州，因为那儿有最美丽的海滨城市 —— 厦门；也许你会问：“怎么没有听说过‘东方夏威夷’呢？” 不错，它就是福建省第二大岛 —— 平潭县。而我们今天要去游览的则是被称之为 “小上海” 的浙江省会 --- 杭州。 浙江是一个人杰地灵的好地方，孕育了无数名扬四海的文化巨匠和商业奇才，还造就了灿若星辰的艺术瑰宝！古代中国有四大发明，其中三项便产生于此，可见她对世界所做出的贡献之伟大啊！ 如果说北京是帝王将相聚集的地方，那么杭州绝对是富家子弟云集的场所。想当年，乾隆皇帝下江南时曾到过此处，并留下了千古佳句：“江南忆，最忆是杭州”。由此可以看出，杭州是多么令人向往与憧憬呀！ “日出江花红胜火，春来江水绿如蓝”，从诗中描绘的情境可知，春季的杭州正值桃李芬芳，鸟语花香的好时节。但作者却只用了两句话概括了整个杭州的特点，让读者更加感受到了杭州的魅力与神韵。或许，每个人都有属于他（她）心目中的杭州吧！ 杭州西湖景色秀丽、山清水秀，素有 “人间天堂” 的美誉。尤其是湖中央的三座小岛 - - 小瀛洲、湖心亭和阮公墩，各具风姿。 小瀛洲面积较大，岛上遍植花木，环境幽静。湖心亭是西湖中赏荷观鱼的最佳处，岛上建筑精巧别致，有水中仙子的雅号。阮公墩虽然面积比前两个小岛略小些，但却十分别致，登高远眺，西湖全景尽收眼底…… 傍晚，夕阳斜照在西湖上，映着波光粼粼的湖面，闪烁着金光，仿佛给湖面铺上了一层碎金似的，煞是耀眼夺目。微风吹拂着柳树，使它轻轻摇摆起来，像是姑娘们甩动长发跳舞一般，婀娜多姿，楚楚动人。夜幕降临后，月亮升空，皎洁的月光倾泻而下，洒落在湖面上，泛起阵阵银白色的涟漪，宛如仙女散花，又犹如牛郎织女隔河相望，真是妙趣横生！倘若遇到皓月当空，繁星满天的夜晚，坐在船头仰望苍穹，定能领悟到苏轼《水调歌头》中所写道的 “欲把西湖比西子，淡妆浓抹总相宜” 的意蕴吧！

2023/1/26

将ChatGPT部署到网站上

ChatGPT 是一个用于自然语言对话的预训练语言模型。要将 ChatGPT 部署到网站上，你需要执行以下步骤： <ol> <li>下载 ChatGPT 模型：你可以从 Hugging Face 的 Transformers 库中下载 ChatGPT 模型。</li> <li>使用 Python 的 Flask 库创建一个 Web 应用程序。Flask 是一种轻量级的 Web 应用框架，可以让你快速构建 Web 应用程序。</li> <li>在 Web 应用中加载 ChatGPT 模型：在 Web 应用程序中，你可以使用 Transformers 库中的 <code>AutoModelWithLMHead</code> 类加载 ChatGPT 模型。</li> <li>创建一个 HTML 表单，允许用户输入对话文本。</li> <li>使用 ChatGPT 模型对用户输入的文本进行响应：当用户提交表单时，你可以使用 ChatGPT 模型的 <code>generate</code> 方法生成响应文本。</li> </ol> 以下是一个简单的例子，展示了如何使用 Flask 和 ChatGPT 构建一个简单的 Web 应用程序： <figure class="highlight python"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 </pre></td><td class="code"><pre>from flask import Flask, render_template, request from transformers import AutoModelWithLMHead, AutoTokenizer app = Flask(__name__) # 加载ChatGPT模型 model = AutoModelWithLMHead.from_pretrained("microsoft/DialoGPT-small") tokenizer = AutoTokenizer.from_pretrained("microsoft/DialoGPT-small") @app.route("/", methods=["GET", "POST"]) def index(): if request.method == "POST": # 获取用户输入的文本 input_text = request.form["input_text"] # 使用ChatGPT模型生成响应文本 prompt = (input_text, "") response = model.generate(prompt, max_length=1024, do_sample=True, temperature=0.7) response_text = tokenizer.decode(response[0], skip_special_tokens=True) return render_template("index.html", response_text=response_text) else: return render_template("index.html") if __name__ == "__main__": app.run() </pre></td></tr></table></figure> 在这段代码中，我们使用了 Flask 的 <code>render_template</code> 函数来渲染一个 HTML 模板，并将响应文本传递给模板。我们还使用了 Transformers 库中的 <code>AutoTokenizer</code> 类来将响应文本解码为可读的文本。 下面是一个简单的 HTML 模板，你可以使用它来显示用户输入和 ChatGPT 响应： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </pre></td><td class="code"><pre><html> <head> <title>ChatGPT Demo</title> </head> <body> <form method="POST"> <label>输入文本：</label> <input type="text" name="input_text" placeholder="输入文本" /> <button type="submit">发送</button> </form> {% if response_text %} <p>响应文本：{{ response_text }}</p> {% endif %} </body> </html> </pre></td></tr></table></figure> 在这个 HTML 模板中，我们创建了一个表单，允许用户输入对话文本。当用户提交表单时，Web 应用程序会使用 ChatGPT 模型生成响应文本，并使用 Flask 的 <code>render_template</code> 函数将响应文本传递给 HTML 模板。 要运行这个 Web 应用程序，你需要安装 Flask 和 Transformers 库，然后运行代码： <figure class="highlight powershell"><table><tr><td class="gutter"><pre>1 2 </pre></td><td class="code"><pre>pip install flask transformers python app.py </pre></td></tr></table></figure> 然后，你就可以在浏览器中访问 http://localhost:5000/ 来使用这个 Web 应用程序了。 要在上述代码的基础上创建一个更美观的界面，你可以使用 HTML、CSS 和 JavaScript 来设计界面，并使用 AJAX 技术在用户输入文本后异步获取 ChatGPT 响应。 下面是一个示例代码，展示了如何使用这些技术创建一个类似聊天系统的界面： <figure class="highlight html"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 </pre></td><td class="code"><pre><html> <head> <title>ChatGPT Demo</title>  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> </head> <body>  <div class="container mt-5"> <div class="card"> <div class="card-header"> 聊天窗口 </div> <div class="card-body p-0" id="messages">  <div class="row mb-2"> <div class="col-md-2"></div> <div class="col-md-10 text-right"> 你好，我是ChatGPT，有什么想聊的？ </div> </div> </div>  <div class="card-footer"> <form> <div class="form-group"> <input type="text" class="form-control" id="input_text" placeholder="输入文本"> </div> <button type="submit" class="btn btn-primary" id="send_button">发送</button> </form> </div> </div> </div>  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>  <script> $(function() { $("form").submit(function(event) { event.preventDefault(); // 获取用户输入的文本 var input_text = $("#input_text").val(); // 将文本添加到聊天记录中 $("#messages").append( '<div class="row mb-2"><div class="col-md-2"></div><div class="col-md-10">' + input_text + '</div></div>' ); // 发送AJAX请求 $.ajax({ type: "POST", url: "/chat", data: { "input_text": input_text }, success: function(response) { // 将GPT的回复添加到聊天记录中 $("#messages").append( '<div class="row mb-2"><div class="col-md-10 text-left">' + response + '</div><div class="col-md-2"></div></div>' ); } }); }); }); </script> </body> </html> </pre></td></tr></table></figure> 上面的代码是一个基于 HTML 和 jQuery 的聊天系统模板，使用了 Bootstrap 框架进行布局。 <ul> <li> HTML 部分： <ul> <li>页面中包含一个聊天窗口，其中有一个卡片（card），卡片中包含聊天记录（card-body）和输入框（card-footer）。</li> <li>聊天记录中默认显示一条消息：“你好，我是 ChatGPT，有什么想聊的？”</li> <li>输入框中包含一个文本输入框（input）和一个发送按钮（button）。</li> </ul> </li> <li> jQuery 部分： <ul> <li>页面加载完成后，通过 jQuery 监听表单提交事件（submit）。当表单提交时，jQuery 会触发一个回调函数，这个回调函数中的代码会被执行。</li> <li>当用户在输入框中输入文本并点击发送按钮时，表单提交事件（submit）被触发。</li> <li>在表单提交事件的回调函数中，首先使用 <code>event.preventDefault()</code> 阻止默认的表单提交行为。</li> <li>然后使用 <code>$("#input_text").val()</code> 获取用户输入的文本。</li> <li>接着使用 <code>$("#messages").append()</code> 将文本添加到聊天记录中。</li> <li>最后，使用 jQuery 的 AJAX 功能发送一个 POST 请求到服务器，将用户输入的文本作为请求参数。</li> <li>当服务器返回响应时，将服务器返回的内容添加到聊天记录中。</li> <li>最后，清空文本输入框，准备下一次聊天。</li> </ul> </li> <li> 整个流程如下： <ol> <li>用户在文本输入框中输入文本，点击发送按钮。</li> <li>jQuery 监听到表单提交事件，阻止默认的表单提交行为。</li> <li>获取用户输入的文本。</li> <li>将文本添加到聊天记录中。</li> <li>发送 AJAX 请求，将用户输入的文本作为请求参数。</li> <li>服务器返回响应，将响应的内容添加到聊天记录中。</li> <li>清空文本输入框，准备下一次聊天。</li> </ol> 这个 HTML 模板只是个简单的框架，具体的逻辑实现还需要你在服务器端进行开发。 感谢您阅读这篇文章，希望能帮助到您。在这篇文章中，我们介绍了如何将 ChatGPT 部署到网站上，并使用 jQuery 和 Bootstrap 构建聊天系统的界面。如果您有任何疑问或建议，欢迎在评论区留言。最后，如果这篇文章对您有所帮助，希望能给个打赏鼓励一下作者。 如果你觉得我的博客不错的话，可以赞助我 (・̀ ω・́)✧：<a href="https://jdjwzx233.cn/support">https://jdjwzx233.cn/support</a>。 </li> </ul>

2022/12/24

远程桌面控制器-用c++实现

写一个远程桌面控制器是一个非常复杂的任务，需要熟悉许多网络协议、图像处理技术以及用户界面设计等知识。这里给出的是一个基本的框架，你可以在此基础上进行扩展和完善。 首先，我们需要用到一些库来帮助我们实现远程桌面控制器。在这里，我们假设你使用的是 Windows 系统，并使用了以下几个库： <ul> <li>WinSock：用于实现网络通信。</li> <li>GDI+：用于处理图像。</li> <li>MFC：用于创建图形用户界面。</li> </ul> 下面是使用这些库编写远程桌面控制器的基本步骤： <ol> <li>创建一个 MFC 应用程序。</li> <li>使用 WinSock 库创建一个网络连接。</li> <li>使用 GDI+ 库获取远程桌面的屏幕截图。</li> <li>将屏幕截图显示在 MFC 窗口中。</li> <li>为用户提供一组控制命令，例如鼠标移动、鼠标单击、键盘输入等。</li> <li>使用 WinSock 库将用户的控制命令发送到远程桌面。</li> </ol> 下面是使用这些库编写远程桌面控制器的示例代码： <figure class="highlight cpp"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 </pre></td><td class="code"><pre>#include <winsock2.h> #include <gdiplus.h> #include <afxwin.h> // 包含 MFC 的头文件 using namespace Gdiplus; // 定义一个 Socket 类，用于封装网络通信相关的操作 class Socket { private: WSADATA m_wsaData; SOCKET m_sock; sockaddr_in m_serverAddr; public: Socket() : m_sock(INVALID_SOCKET) {} // 初始化 WinSock 库 bool Init() { if (WSAStartup(MAKEWORD(2, 2), &m_wsaData) != 0) { return false; } return true; } // 创建套接字 bool Create(int af, int type, int protocol) { m_sock = socket(af, type, protocol); if (m_sock == INVALID_SOCKET) { return false; } return true; } // 连接到服务器 bool Connect(const char* ip, unsigned short port) { m_serverAddr.sin_family = AF_INET; m_serverAddr.sin_port = htons(port); m_serverAddr.sin_addr.S_un.S_addr = inet_addr(ip); if (connect(m_sock, (sockaddr*)&m_serverAddr, sizeof(m_serverAddr)) == SOCKET_ERROR) { return false; } return true; } // 发送数据 int Send(const char* buf, int len) { return send(m_sock, buf, len, 0); } // 接收数据 int Receive(char* buf, int len) { return recv(m_sock, buf, len, 0); } // 关闭套接字 void Close() { closesocket(m_sock); m_sock = INVALID_SOCKET; } // 清理 WinSock 库 void Cleanup() { WSACleanup(); } }; // 定义一个 RemoteDesktop 类，用于控制远程桌面 class RemoteDesktop { private: Socket m_socket; // 用于网络通信的套接字 Image* m_image; // 当前屏幕截图 public: RemoteDesktop() : m_image(NULL) {} // 连接到远续桌面服务器 bool Connect(const char* ip, unsigned short port) { if (!m_socket.Init()) { return false; } if (!m_socket.Create(AF_INET, SOCK_STREAM, IPPROTO_TCP)) { return false; } if (!m_socket.Connect(ip, port)) { return false; } return true; } // 断开与远程桌面服务器的连接 void Disconnect() { m_socket.Close(); m_socket.Cleanup(); delete m_image; m_image = NULL; } // 获取远程桌面的屏幕截图 bool GetScreenshot() { // 先发送获取屏幕截图的命令 const char* cmd = "screenshot"; m_socket.Send(cmd, strlen(cmd)); // 接收屏幕截图的大小 int size; m_socket.Receive((char*)&size, sizeof(size)); // 分配内存空间，准备接收屏幕截图的数据 char* data = new char[size]; // 接收屏幕截图的数据 int bytesReceived = 0; while (bytesReceived < size) { int count = m_socket.Receive(data + bytesReceived, size - bytesReceived); if (count <= 0) { delete[] data; return false; } bytesReceived += count; } // 将接收到的数据转换为 GDI+ 图像 delete m_image; m_image = new Image(data, size); delete[] data; return true; } // 获取当前屏幕截图 Image* GetImage() const { return m_image; } // 发送鼠标移动命令 void MoveMouse(int x, int y) { // 封装命令格式，发送命令 const char* cmd = "mouse move"; m_socket.Send(cmd, strlen(cmd)); m_socket.Send((char*)&x, sizeof(x)); m_socket.Send((char*)&y, sizeof(y)); } // 发送鼠标单击命令 void ClickMouse(int x, int y) { // 封装命令格式，发送命令 const char* cmd = "mouse click"; m_socket.Send(cmd, strlen(cmd)); m_socket.Send((char*)&x, sizeof(x)); m_socket.Send((char*)&y, sizeof(y)); } // 发送键盘输入命令 void InputKey(int keyCode) { // 封装命令格式，发送命令 const char* cmd = "key input"; m_socket.Send(cmd, strlen(cmd)); m_socket.Send((char*)&keyCode, sizeof(keyCode)); } }; // 定义一个 RemoteDesktopDialog 类，用于显示远程桌面的界面 class RemoteDesktopDialog : public CDialog { private: RemoteDesktop m_rd; // 用于控制远程桌面的对象 public: // 使用 MFC 对话框的基本操作 RemoteDesktopDialog() : CDialog(IDD_DIALOG1) {} protected: virtual void DoDataExchange(CDataExchange* pDX) { CDialog::DoDataExchange(pDX); } public: // 连接到远程桌面服务器 bool Connect(const char* ip, unsigned short port) { return m_rd.Connect(ip, port); } // 断开与远程桌面服务器的连接 void Disconnect() { m_rd.Disconnect(); } protected: // 绘制远程桌面的界面 afx_msg void OnPaint() { CPaintDC dc(this); // 用于绘制的设备上下文 CRect rect; GetClientRect(&rect); // 获取对话框的客户区域 // 获取屏幕截图，并绘制到界面上 Image* image = m_rd.GetImage(); if (image != NULL) { Graphics graphics(dc); graphics.DrawImage(image, rect); } } // 处理鼠标移动事件 afx_msg void OnMouseMove(UINT nFlags, CPoint point) { m_rd.MoveMouse(point.x, point.y); } // 处理鼠标单击事件 afx_msg void OnLButtonDown(UINT nFlags, CPoint point) { m_rd.ClickMouse(point.x, point.y); } // 处理键盘输入事件 afx_msg void OnKeyDown(UINT nChar, UINT nRepCnt, UINT nFlags) { m_rd.InputKey(nChar); } DECLARE_MESSAGE_MAP() }; BEGIN_MESSAGE_MAP(RemoteDesktopDialog, CDialog) ON_WM_PAINT() ON_WM_MOUSEMOVE() ON_WM_LBUTTONDOWN() ON_WM_KEYDOWN() END_MESSAGE_MAP() int main() { // 初始化 GDI+ GdiplusStartupInput gdiplusStartupInput; ULONG_PTR gdiplusToken; GdiplusStartup(&gdiplusToken, &gdiplusStartupInput, NULL); // 创建对话框并运行 RemoteDesktopDialog dlg; dlg.DoModal(); // 清理 GDI+ GdiplusShutdown(gdiplusToken); return 0; } </pre></td></tr></table></figure> 在这段代码中，我们定义了三个类：Socket、RemoteDesktop 和 RemoteDesktopDialog。Socket 类封装了网络通信的相关操作，RemoteDesktop 类用于控制远程桌面，RemoteDesktopDialog 类用于显示远程桌面的界面。 使用这个远程桌面控制器的流程如下： <ol> <li>调用 Socket 类的 Init 函数初始化 WinSock 库。</li> <li>调用 Socket 类的 Create 函数创建一个套接字。</li> <li>调用 Socket 类的 Connect 函数连接到远程桌面服务器。</li> <li>调用 RemoteDesktop 类的 GetScreenshot 函数获取远程桌面的屏幕截图。</li> <li>调用 RemoteDesktop 类的 MoveMouse、ClickMouse 或 InputKey 函数发送控制命令。</li> <li>重复步骤 4 和 5，实时更新远程桌面的屏幕截图并发送控制命令。</li> <li>当远程桌面控制结束时，调用 RemoteDesktop 类的 Disconnect 函数断开与远程桌面服务器的连接，并调用 Socket 类的 Cleanup 函数清理 WinSock 库。</li> </ol> 需要注意的是，这段代码使用了 MFC 库来绘制界面，因此需要在 Visual Studio 中创建一个 MFC 应用程序，并在对话框资源中添加一个对话框。然后将上面的代码放入主窗口类的 .cpp 文件中，并在 .h 文件中声明相应的消息映射函数。 以下是服务端代码： <figure class="highlight cpp"><table><tr><td class="gutter"><pre>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 </pre></td><td class="code"><pre>#include <Windows.h> #include <GdiPlus.h> #include <winsock2.h> #include<iostream> #pragma comment(lib, "gdiplus.lib") #pragma comment(lib, "ws2_32.lib") using namespace std; using namespace Gdiplus; // 定义一个 Socket 类，用于封装网络通信相关的操作 class Socket { private: WSADATA m_wsaData; SOCKET m_sock; sockaddr_in m_serverAddr; sockaddr_in m_clientAddr; public: Socket() : m_sock(INVALID_SOCKET) {} // 初始化 WinSock 库 bool Init() { if (WSAStartup(MAKEWORD(2, 2), &m_wsaData) != 0) { return false; } return true; } // 创建套接字 bool Create(int af, int type, int protocol) { m_sock = socket(af, type, protocol); if (m_sock == INVALID_SOCKET) { return false; } return true; } // 绑定套接字到本地地址和端口 bool Bind(unsigned short port) { memset(&m_serverAddr, 0, sizeof(m_serverAddr)); m_serverAddr.sin_family = AF_INET; m_serverAddr.sin_addr.s_addr = htonl(INADDR_ANY); m_serverAddr.sin_port = htons(port); if (bind(m_sock, (sockaddr*)&m_serverAddr, sizeof(m_serverAddr)) == SOCKET_ERROR) { return false; } return true; } // 监听套接字 bool Listen(int backlog) { if (listen(m_sock, backlog) == SOCKET_ERROR) { return false; } return true; } // 接受客户端的连接 bool Accept(Socket& client) { int addrLen = sizeof(m_clientAddr); client.m_sock = accept(m_sock, (sockaddr*)&m_clientAddr, &addrLen); if (client.m_sock == INVALID_SOCKET) { return false; } return true; } // 接收数据 int Receive(char* buffer, int len) { return recv(m_sock, buffer, len, 0); } // 发送数据 int Send(const char* buffer, int len) { return send(m_sock, buffer, len, 0); } // 关闭套接字 void Close() { closesocket(m_sock); m_sock = INVALID_SOCKET; } // 清理 WinSock 库 void Cleanup() { WSACleanup(); } }; // 定义一个 RemoteDesktopServer 类，用于提供远程桌面服务 class RemoteDesktopServer { private: Socket m_socket; // 用于网络通信的套接字 public: // 初始化远程桌面服务器 bool Init(unsigned short port) { if (!m_socket.Init()) { return false; } if (!m_socket.Create(AF_INET, SOCK_STREAM, IPPROTO_TCP)) { return false; } if (!m_socket.Bind(port)) { return false; } if (!m_socket.Listen(10)) { return false; } return true; } // 运行远程桌面服务器 void Run() { // 不断循环，接受客户端的连接 while (true) { Socket client; if (!m_socket.Accept(client)) { continue; } // 为客户端创建一个线程，用于处理客户端的请求 HANDLE hThread = CreateThread(NULL, 0, ClientThreadProc, &client, 0, NULL); if (hThread == NULL) { client.Close(); continue; } CloseHandle(hThread); } } private: // 客户端线程的回调函数，用于处理客户端的请求 static DWORD WINAPI ClientThreadProc(LPVOID lpParam) { Socket* pClient = (Socket*)lpParam; // 不断循环，处理客户端的请求 while (true) { // 接收客户端的命令 char cmd[256]; int len = pClient->Receive(cmd, sizeof(cmd)); if (len <= 0) { break; } // 根据命令类型执行相应的操作 if (strcmp(cmd, "screenshot") == 0) { // 处理屏幕截图请求 HandleScreenshotRequest(*pClient); } else if (strcmp(cmd, "mouse move") == 0) { // 处理鼠标移动请求 int x, y; pClient->Receive((char*)&x, sizeof(x)); pClient->Receive((char*)&y, sizeof(y)); HandleMouseMoveRequest(x, y); } else if (strcmp(cmd, "mouse click") == 0) { // 处理鼠标单击请求 int x, y; pClient->Receive((char*)&x, sizeof(x)); pClient->Receive((char*)&y, sizeof(y)); HandleMouseClickRequest(x, y); } else if (strcmp(cmd, "key input") == 0) { // 处理键盘输入请求 char key; pClient->Receive(&key, sizeof(key)); HandleKeyInputRequest(key); } else { break; } } // 关闭客户端的套接字 pClient->Close(); delete pClient; return 0; } // 处理屏幕截图请求 static void HandleScreenshotRequest(Socket& client) { // 获取屏幕的宽高 int width = GetSystemMetrics(SM_CXSCREEN); int height = GetSystemMetrics(SM_CYSCREEN); // 创建内存 DC HDC hdcMem = CreateCompatibleDC(NULL); if (hdcMem == NULL) { return; } // 创建位图 HBITMAP hbm = CreateCompatibleBitmap(GetDC(NULL), width, height); if (hbm == NULL) { DeleteDC(hdcMem); return; } // 将位图选入内存 DC HBITMAP hbmOld = (HBITMAP)SelectObject(hdcMem, hbm); if (hbmOld == NULL) { DeleteObject(hbm); DeleteDC(hdcMem); return; } // 将屏幕拷贝到内存 DC if (!BitBlt(hdcMem, 0, 0, width, height, GetDC(NULL), 0, 0, SRCCOPY)) { SelectObject(hdcMem, hbmOld); DeleteObject(hbm); DeleteDC(hdcMem); return; } // 将内存 DC 的图像保存到缓冲区 BITMAPINFOHEADER bih; memset(&bih, 0, sizeof(bih)); bih.biSize = sizeof(bih); bih.biWidth = width; bih.biHeight = -height; bih.biPlanes = 1; bih.biBitCount = 24; bih.biCompression = BI_RGB; BYTE* pBuf = NULL; HBITMAP hbmDib = CreateDIBSection(hdcMem, (BITMAPINFO*)&bih, DIB_RGB_COLORS, (void**)&pBuf, NULL, 0); if (hbmDib == NULL) { SelectObject(hdcMem, hbmOld); DeleteObject(hbm); DeleteDC(hdcMem); return; } // 将内存 DC 的图像复制到位图中 if (!SelectObject(hdcMem, hbmDib)) { DeleteObject(hbmDib); SelectObject(hdcMem, hbmOld); DeleteObject(hbm); DeleteDC(hdcMem); return; } // 将位图的图像转换为 JPEG 格式并发送到客户端 if (!SendScreenshot(client, pBuf, width, height)) { DeleteObject(hbmDib); SelectObject(hdcMem, hbmOld); DeleteObject(hbm); DeleteDC(hdcMem); return; } // 清理资源 DeleteObject(hbmDib); SelectObject(hdcMem, hbmOld); DeleteObject(hbm); DeleteDC(hdcMem); } // 将位图的图像转换为 JPEG 格式并发送到客户端 static bool SendScreenshot(Socket& client, BYTE* pBuf, int width, int height) { // 初始化 GDI+ GdiplusStartupInput gdiplusStartupInput; ULONG_PTR gdiplusToken; GdiplusStartup(&gdiplusToken, &gdiplusStartupInput, NULL); // 将位图的图像转换为 JPEG 格式 Bitmap bmp(width, height, width * 3, PixelFormat24bppRGB, pBuf); CLSID clsid; GetEncoderClsid(L"image/jpeg", &clsid); IStream* pStream = NULL; bmp.Save(L"screenshot.jpg", &clsid, NULL); if (CreateStreamOnHGlobal(NULL, TRUE, &pStream) != S_OK) { GdiplusShutdown(gdiplusToken); return false; } bmp.Save(pStream, &clsid, NULL); HGLOBAL hGlobal = NULL; // 修改为 HGLOBAL 类型 if (GetHGlobalFromStream(pStream, &hGlobal) != S_OK) // 修改为 HGLOBAL 类型 { pStream->Release(); GdiplusShutdown(gdiplusToken); return false; } ULONG cbSize = GlobalSize(hGlobal); // 修改为 HGLOBAL 类型 BYTE* pJpegBuf = (BYTE*)GlobalLock(hGlobal); // 修改为 HGLOBAL 类型 if (pJpegBuf == NULL) { pStream->Release(); GdiplusShutdown(gdiplusToken); return false; } LARGE_INTEGER li; li.QuadPart = 0; if (pStream->Seek(li, STREAM_SEEK_SET, NULL) != S_OK) { GlobalFree(pJpegBuf); pStream->Release(); GdiplusShutdown(gdiplusToken); return false; } if (pStream->Read(pJpegBuf, cbSize, NULL) != S_OK) { GlobalFree(pJpegBuf); pStream->Release(); GdiplusShutdown(gdiplusToken); return false; } pStream->Release(); GdiplusShutdown(gdiplusToken); // 将 JPEG 数据的长度发送到客户端 if (client.Send((char*)&cbSize, sizeof(cbSize)) <= 0) { GlobalFree(pJpegBuf); return false; } // 将 JPEG 数据发送到客户端 if (client.Send((char*)pJpegBuf, cbSize) <= 0) { GlobalFree(pJpegBuf); return false; } // 清理资源 GlobalFree(pJpegBuf); return true; } // 获取图像编码器的 CLSID static void GetEncoderClsid(const WCHAR* format, CLSID* pClsid) { UINT num = 0, size = 0; GetImageEncodersSize(&num, &size); if (size == 0) { return; } ImageCodecInfo* pImageCodecInfo = (ImageCodecInfo*)malloc(size); if (pImageCodecInfo == NULL) { return; } GetImageEncoders(num, size, pImageCodecInfo); for (UINT i = 0; i < num; ++i) { if (wcscmp(pImageCodecInfo[i].MimeType, format) == 0) { *pClsid = pImageCodecInfo[i].Clsid; free(pImageCodecInfo); return; } } free(pImageCodecInfo); } // 处理鼠标移动请求 static void HandleMouseMoveRequest(int x, int y) { // 获取屏幕的宽高 int width = GetSystemMetrics(SM_CXSCREEN); int height = GetSystemMetrics(SM_CYSCREEN); // 计算相对于屏幕的坐标 double fx = (double)x / 65535.0; // 移动鼠标 SetCursorPos(x, y); } // 处理鼠标单击请求 static void HandleMouseClickRequest(int x, int y) { // 获取屏幕的宽高 int width = GetSystemMetrics(SM_CXSCREEN); int height = GetSystemMetrics(SM_CYSCREEN); // 计算相对于屏幕的坐标 double fx = (double)x / 65535.0; double fy = (double)y / 65535.0; int cx = (int)(fx * width); int cy = (int)(fy * height); // 移动鼠标 SetCursorPos(cx, cy); // 发送鼠标左键单击消息 INPUT input; memset(&input, 0, sizeof(input)); input.type = INPUT_MOUSE; input.mi.dwFlags = MOUSEEVENTF_LEFTDOWN | MOUSEEVENTF_LEFTUP; SendInput(1, &input, sizeof(input)); } // 处理键盘输入请求 static void HandleKeyInputRequest(char key) { // 获取键盘的输入模式 HKL layout = GetKeyboardLayout(0); UINT vk = MapVirtualKeyExA(VkKeyScanExA(key, layout), 0, layout); // 发送键盘输入消息 INPUT input; memset(&input, 0, sizeof(input)); input.type = INPUT_KEYBOARD; input.ki.wVk = vk; SendInput(1, &input, sizeof(input)); } private: Socket m_socket; // 监听套接字 }; int main() { RemoteDesktopServer server; if (!server.Init(5555)) { cout<<"启动服务器失败！"<<endl; return 1; } server.Run(); return 0; } </pre></td></tr></table></figure> 希望这些代码能帮到你！

2022/12/23

jdjwzx233的博客