# HTML RDP
**Repository Path**: scicat/html-rdp
## Basic Information
- **Project Name**: HTML RDP
- **Description**: 一个使用宝塔面板部署基于Node.js、WebSocket和 node-rdpjs 的网页RDP客户端
- **Primary Language**: Unknown
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-03-01
- **Last Updated**: 2025-03-05
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
一个使用宝塔面板部署基于Node.js、WebSocket和`node-rdpjs`的RDP客户端。
项目名：`HTML5 RDP 客户端`或`HTML RDP`
此项目面向所有需要的人群
请先从HTML5 RDP下载必要的`server.js`、`index.html`、`client.js`文件等。
`package.json`不能安装所有依赖，需手动
此项目HTML5 RDP将涵盖从安装宝塔面板到部署和配置服务的全过程。
---
超详细教程：宝塔面板部署HTML5 RDP客户端
一、准备工作
在开始部署前，先确保你手头有这些东西：
服务器信息：弄清楚你的服务器用的是什么操作系统（CentOS、Ubuntu还是Debian ），它的IP地址是多少，以及登录用的用户名和密码。这些信息就像是你进入服务器房间的钥匙，非常重要。
SSH工具：
- Windows系统：下载PuTTY。下载完成后打开PuTTY，在“Host Name(or IP address)”处输入服务器IP地址，“Port”保持默认的22 ，然后点击“Open”。首次连接时可能会弹出安全警告，选择“是”继续。之后输入服务器的用户名和密码进行登录。
- macOS系统：直接使用自带的Terminal应用程序。打开Terminal后，输入 ssh 用户名@服务器IP地址 ，例如 `ssh root@192.168.1.100` ，然后输入密码登录。如果是首次连接，系统会提示是否继续连接，输入 yes 并回车。
- Linux系统：同样使用Terminal，操作方式与macOS类似，通过` ssh 用户名@服务器IP地址` 的命令进行连接并登录。这个工具能帮你和服务器“对话”，发送各种命令。
二、更新系统源（安装宝塔面板前的关键一步）
这一步就像是给你的服务器“更新地图”，让它知道最新的软件都在哪里。
CentOS系统
登录服务器：使用上述对应的SSH工具，输入服务器的IP地址、用户名和密码，成功登录进去。这就好比你找到了服务器的大门并且成功打开了它。
运行更新命令：在登录后的界面里，输入下面这条命令：
`yum update`
输入之后，系统可能会让你确认一些操作，你只要输入` y `，然后按回车键就行。这个过程可能需要一点时间，就像下载一个大文件一样，耐心等等。
Ubuntu/Debian系统
登录服务器：同样用SSH工具，输入正确的信息登录。
执行更新命令：在登录后的窗口里，输入这条命令：
`sudo apt update`
系统会自动开始下载并更新软件包列表，等它完成就好。
三、安装宝塔面板
宝塔面板就像是服务器的智能管家，能帮你轻松管理各种软件和网站。
连接到你的服务器
用之前准备好的SSH工具，再次输入服务器IP、用户名和密码，成功连接。
安装宝塔面板
CentOS系统安装命令：
`yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh`
在安装过程中，系统会提示你安装一些相关的依赖包，就像安装游戏时可能需要先安装一些运行库一样。这时候，按照提示输入 y 确认安装就行。
Ubuntu/Debian系统安装命令：
`wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh`
安装时，也会有一些操作需要你确认，按照提示输入相应的指令就可以继续。
访问宝塔面板
获取访问信息：宝塔面板安装完成后，你在SSH的界面里会看到它给你显示的访问地址，一般是 `http://服务器IP:8888` ，还有默认的用户名和密码。把这些信息记好，别弄丢了。
打开浏览器访问：
- Windows系统：可以使用Chrome、Firefox或Edge等浏览器，在地址栏输入获取到的访问地址，然后输入默认用户名和密码登录。
- macOS系统：推荐使用Safari浏览器，同样在地址栏输入地址和登录信息进行登录。
验证宝塔面板安装
功能检查：成功登录后，看看面板左侧的菜单栏，像“软件商店”“文件”“网站”“数据库”这些常用的功能模块是不是都能正常显示。如果都能看到，就说明面板安装得挺顺利。
简单操作测试：你可以试着点进“软件商店”，看看里面的软件能不能正常浏览。要是这些操作都没问题，那就恭喜你，宝塔面板安装成功啦！
四、安装Node.js
Node.js是运行咱们这个RDP客户端的重要基础，就像房子的地基一样。
登录宝塔面板
打开浏览器，输入宝塔面板的访问地址，用之前设置或者默认的用户名和密码登录进去。
进入软件商店
在宝塔面板左边的菜单栏里，找到并点击“软件商店”，这里面有各种各样的软件，咱们要找的Node.js就在这里。
安装Node.js
查找Node.js：在软件商店里，找到“运行环境”这个分类，然后在里面找到“Node.js”。
选择版本并安装：一般推荐选择最新的稳定版，找到这个版本后，点击“安装”按钮，然后就等着安装完成。安装的时候，宝塔面板会自动帮我们处理好相关的依赖和配置，不用我们操心。
验证Node.js安装
使用SSH连接服务器：再次打开对应的SSH工具，连接到服务器。
检查版本号：在SSH的窗口里输入命令 `node -v `，如果显示出了版本号，比如` v18.16.0 `，那就说明Node.js安装成功啦！
五、创建项目目录并上传代码
现在我们要给项目找个“家”，并且把它的“行李”（代码）放进去。
创建项目目录
进入文件管理：在宝塔面板里，点击左侧菜单栏的“文件”，进入文件管理的界面，这里就像是你的服务器的文件仓库。
选择目录并创建：比如，我们选择` /www `这个目录，然后点击“新建目录”按钮，给新目录起个名字，就叫` rdp-client `，然后点击“提交”。这样，我们就给项目建好了一个专属的“家”。
上传项目代码
打包项目代码：
- Windows系统：可以使用WinRAR、7-Zip等压缩软件，选中项目代码文件，右键选择“添加到压缩文件”，将其打包成` rdp-client.zip` 。
- macOS系统：选中项目代码文件，右键点击“压缩”，即可生成` rdp-client.zip `压缩文件。
上传压缩文件：回到宝塔面板的文件管理页面，进入刚才创建的` /www/rdp-client `目录，点击“上传”按钮，然后选择你在电脑上打包好的` rdp-client.zip` 文件进行上传。
解压文件：上传完成后，选中刚刚上传的压缩文件，点击“解压”按钮，选择解压到当前目录。这样，项目的所有文件就都成功放到服务器的` /www/rdp-client `目录下啦。
六、安装项目依赖
项目就像一个小机器，需要各种零件（依赖）才能正常运转。我们提供两种安装依赖的方式，一种是通过 `package.json` 自动安装，另一种是手动安装，以应对可能出现的安装问题。
方式一：通过`package.json`自动安装
项目根目录下已经存在一个 package.json 文件，其内容如下：
`{
"name": "html5-rdp",
"version": "1.0.1",
"description": "HTML5 RDP project",
"main": "server.js",
"scripts": {
"start": "node server.js"
},
"keywords": [
"HTML5",
"RDP"
],
"author": "scicat",
"license": "MIT",
"dependencies": {
"express": "latest",
"node-rdpjs": "latest",
"ws": "latest",
"winston": "latest",
"bcryptjs": "latest",
"uuid": "latest"
"geoip-lite": "latest"
}
}`
之后在宝塔软件商店中搜索并依次安装 Nginx（或 Apache）、MySQL、PHP、phpMyAdmin。
安装完成后，进入 PHP 的扩展管理界面，安装 GD 库和 mysqli 扩展等必要扩展。
通过SSH连接到服务器：使用之前的SSH工具，输入服务器的相关信息，连接到服务器。
进入项目目录：在SSH的窗口里输入命令` cd /www/rdp-client `，进入我们刚刚创建的项目目录。
安装依赖：在项目目录下运行命令 npm install ，npm会读取 package.json 文件中的 dependencies 字段，自动下载并安装指定版本的所有依赖包到项目的 `node_modules` 目录中。
方式二：手动安装（以防自动安装不了的情况）
通过SSH连接到服务器：还是用之前的SSH工具，输入服务器的相关信息，连接到服务器。
进入项目目录：在SSH的窗口里输入下面这条命令，进入我们刚刚创建的项目目录：
`cd /www/rdp-client`
安装依赖：因为项目依赖主要包括 express 、 node-rdpjs 、 ws 、 winston 等，我们可以手动安装这些依赖。
- 项目主要依赖 node-rdpjs ，那就输入下面这条命令进行安装：
`npm install node-rdpjs`
- 安装 express ：
`npm install express`
- 安装 ws ：
`npm install ws`
- 安装 winston ：
`npm install winston`
安装 bcryptjs ：
` npm install bcryptjs`
安装 uuid ：
` npm install uuid `
- 安装 geoip-lite ：
`npm install geoip-lite `
- 要是还有其他依赖，就按照 npm install 依赖名@版本号 （如果不指定版本号，默认安装最新版本）的方式，一个一个地安装。
之后在宝塔软件商店中搜索并依次安装 Nginx（或 Apache）、MySQL、PHP、phpMyAdmin。
安装完成后，进入 PHP 的扩展管理界面，安装 GD 库和 mysqli 扩展等必要扩展。
七、配置并启动Node.js服务
现在要让项目“动起来”，开始工作。
进入PM2管理器
在宝塔面板的左侧菜单栏中，点击“PM2管理器”，这里是管理我们项目运行的地方。
添加Node.js项目
点击添加项目按钮：在PM2管理器的页面里，找到并点击“添加项目”按钮。
配置项目信息：
- 项目目录：选择我们之前创建的` /www/rdp-client` 目录。
- 启动文件：输入 server.js （这个要根据你实际项目的启动文件来填写哦）。
- 项目名称：自己给项目起个名字，比如` rdp-client` 。
点击添加：把上面这些信息都填好之后，点击“添加”按钮，PM2就会自动帮我们启动项目服务，这个服务默认会监听在8081端口。
验证Node.js服务启动
查看PM2状态：回到PM2管理器的页面，看看刚才添加的项目，要是它的状态显示为“online”，那就说明服务已经成功启动啦。
浏览器访问测试：打开浏览器，在地址栏输入 `http://127.0.0.1:8081` ，如果能看到项目的页面正常显示，那就也能证明服务启动成功啦。
八、配置Nginx反向代理
为了能通过域名访问我们的RDP客户端，我们要给它找个“引路人”，也就是Nginx反向代理。
添加站点
进入网站管理：在宝塔面板里，点击左侧菜单栏的“网站”，进入网站管理页面。
添加新站点：点击“添加站点”按钮，然后填写下面这些信息：
- 域名：输入你自己的域名，比如` your - domain.com `。
- 站点根目录：选择我们之前创建的` /www/rdp-client `目录。
提交设置：把这些信息都填好之后，点击“提交”按钮，这样就成功添加了一个站点。
配置反向代理
进入站点设置：在网站管理页面，找到刚才添加的站点，点击站点的名称，进入站点的设置页面。
添加反向代理：在站点设置页面里，找到“反向代理”这个选项，然后点击“添加代理”。
配置代理参数：
- 目标URL：填写 `http://127.0.0.1:8081 `。
- 勾选WebSocket支持：一定要确保把“WebSocket支持”这个选项勾选上，这样才能支持WebSocket通信。
保存并重启Nginx：把上面这些配置都设置好之后，点击“保存”按钮，然后在弹出的提示框里点击“确定”，这样Nginx服务就会重启，让我们的配置生效。
验证Nginx反向代理配置
打开浏览器，输入你的域名 `http://your - domain.com `，要是能正常访问到RDP客户端的页面，那就说明反向代理配置成功啦！
九、配置SSL（可选，但很重要哦）
为了让数据传输更安全，就像给快递加上了一把锁，我们可以配置SSL证书。
申请SSL证书
进入SSL管理：在宝塔面板里，点击左侧菜单栏的“SSL”选项，进入SSL证书管理页面。
选择站点域名：在SSL证书管理页面，找到你想要配置证书的站点域名，然后点击它右侧的“申请”按钮。
申请Let's Encrypt证书：在弹出的申请页面里，选择“`Let's Encrypt`”这种证书类型，然后按照提示填写你的邮箱等信息，填好之后点击“提交”按钮，接着就等着证书申请完成。
绑定SSL证书
等证书申请成功后，宝塔面板会自动把证书绑定到对应的站点上。这时候，你就可以通过 `https://your - domain.com `来访问你的RDP客户端啦。
验证SSL证书配置
打开浏览器，输入` https://your - domain.com` ，要是浏览器地址栏左侧出现了一个安全锁的标志，而且能正常访问页面，那就说明SSL证书配置成功啦！
十、测试部署
现在一切准备就绪，来看看我们的RDP客户端是不是真的能正常工作。
访问你的域名
打开浏览器，输入` https://your - domain.com `，然后全面测试RDP客户端的各种功能，比如连接RDP服务器、输入用户名密码、进行远程操作等等，确保客户端能正常工作。
检查日志
进入PM2管理器查看日志：要是在测试过程中遇到了问题，别着急。回到宝塔面板的“PM2管理器”，找到你的项目，然后点击右侧的“日志”按钮。
查看日志信息：在弹出的日志窗口里，你能看到详细的日志信息。通过这些信息，你可以分析可能出现的错误原因，比如端口被占用、依赖包缺失、代码错误等等，然后根据错误提示来进行相应的调试和解决。要是提示端口8081和3000被占用，那就得检查一下是哪个程序占用了这个端口，然后处理一下。
十一、注意事项
安全性
密码安全传输：当RDP客户端连接RDP服务器的时候，一定要保证用户名和密码是通过安全的方式传输的，千万不能在网络中明文传输，不然就像把家门钥匙随便扔在大街上一样危险。
使用加密协议：用 wss:// （WebSocket Secure）协议来代替 ws:// ，这样可以加密WebSocket的数据传输，防止数据被别人窃取或者篡改。
防火墙设置：合理设置服务器的防火墙，只让你信任的IP地址来访问RDP服务，限制非法访问。比如，在宝塔面板的安全设置里，你可以设置IP白名单，同时一定要确保放行8081端口。
备份数据
在安装宝塔面板或者部署项目之前，一定要把服务器上的重要数据备份好。就像出门前要把重要的东西都放好一样，防止因为安装或者部署过程中出现问题，导致数据丢失。你可以使用云备份服务，或者外部存储设备来进行数据备份。
端口冲突
在启动Node.js服务和admin的时候，要确保使用的8081和3000端口没有被其他程序占用。要是端口被占用了，你可以在项目的配置文件里修改端口号，或者把占用端口的程序停止。在宝塔面板的“软件管理”-“已安装软件”里，你可以查看哪些程序占用了端口。要是你修改了项目端口，那在Node.js项目配置以及Nginx反向代理配置里都要进行相应的调整。
防火墙设置
要是服务器启用了防火墙，一定要确保相关的端口（比如80、443用于HTTP和HTTPS访问，8081用于Node.js服务，3000用于admin）都已经开放。在宝塔面板的“安全”设置里，你可以添加端口放行规则。
十二、常见问题及解决方法
宝塔面板安装失败
问题描述：执行宝塔面板安装命令后，出现报错信息，安装中断了。
解决方法：先检查一下服务器的网络连接是不是正常，是不是有足够的权限来执行安装命令。要是网络有问题，你可以试试换个网络，或者检查一下防火墙的设置；要是权限不够，那就确保用root用户或者有sudo权限的用户来执行安装命令。
Node.js安装失败
问题描述：在宝塔面板软件商店安装Node.js的时候，提示安装失败，或者安装后没办法通过 `node - v` 命令查看版本号。
解决方法：去查看一下宝塔面板软件商店的安装日志，看看具体是什么错误原因。有可能是依赖包缺失，或者系统环境有问题
---
十三、参考资源
• [宝塔面板官网](https://www.bt.cn/new/index.html)
• [Node.js官网](https://nodejs.org/)
• [PM2官网](https://pm2.io/)
• [Nginx官网](https://nginx.org/)
---
通过HTML5 RDP，你可以轻松地将基于Node.js、WebSocket和`node-rdpjs`的RDP客户端部署到宝塔面板中。
HTML5 RDP客户端一个具有在界面美观度、功能完整性、代码健壮性和可维护性等方面优势的网页远程端。
如果遇到任何问题，可以参考宝塔面板的官方文档或社区寻求帮助或联系此项目开发者。