英雄传奇网页版技术拆解与H5三端互通架设实操

英雄传奇网页版不是单一一个游戏，而是传奇类内容在浏览器里的多种载体：真 H5 重制、微端网页入口、云游戏投射。玩家想要的是打开网址就能进，不用下几个G客户端；技术侧要解决的则是资源加载、协议转换、三端数据同步。

一、网页版三种形态先分清

真 H5 重制
前端用 HTML5+Canvas/WebGL，后端 Node.js 或 Java 跑游戏逻辑，WebSocket 做实时通信。资源走 CDN 按需加载，首屏只拉核心 JS 和登录界面，进图再拉地图贴图、技能特效。战法道、攻沙、爆装逻辑全保留，但特效表现比端游弱一档。适合单职业、中变、挂机服。

微端网页入口
服务端还是传统 GOM/GEE/BLUE 那套，网页只放一个登录器页面（index.html + serverlist.json），玩家点进去后浏览器拉一个 10-30MB 的微端壳，后续资源从微端服务器流式下载。本质还是微端，只是入口在浏览器。适合复古 1.76/1.80，资源量小，加载快。

云游戏投射
服务端跑完整 PC 客户端，画面通过视频流推到浏览器，操作反向传回服务端。Node.js + WebSocket 转发鼠标键盘事件。优点是什么端都不用改，缺点是延迟敏感，按小时计费，千人级成本爆炸。只适合短期演示或小圈子。

自建优先选第一种，第二种是过渡方案，第三种别碰商业。

二、技术栈和目录结构

真 H5 端常见结构：

服务端根目录
├─ WebServer.exe（或 node app.js）
├─ www/（前端资源）
│ ├─ index.html
│ ├─ game.js
│ ├─ css/
│ └─ assets/（图片、音频、配置）
├─ GameServer/（游戏逻辑，C++/Go/Node）
├─ DBServer/（数据库服务）
├─ LoginGate/（登录网关）
├─ RunGate/（游戏网关）
└─ config.json（IP、端口、区名）

前端技术：HTML5 + ES6 + Canvas2D/WebGL，UI 用 DOM 层画按钮对话框，战斗场景用 Canvas 渲染。通信 WebSocket 长连接，登录和领奖走 HTTP POST。

后端技术：Node.js + Express/Koa 处理 HTTP，Socket.IO 处理实时消息；数据库 MySQL 或 MongoDB，角色数据按 user_id + platform_id 建联合索引，保证 PC/安卓/H5 同账号读同一份存档。

传统端游改造的 H5 端，老架构还依赖 DBC2000 建 HeroDB，新 H5 端一般直接走 MySQL/SQLite，按包内说明来。

三、服务端准备与配置

云服务器用 Windows Server 2019/2022，4核8G 起步，SSD 必选。带宽独享 10M 起步，百人在线建议 30-50M，攻沙场景直接 100M 起。

解压服务端到 D:\MirServer，路径纯英文无空格无中文。

数据库：

DBC 系：BDE Administrator 建 HeroDB，PATH 指向 D:\MirServer\Mud2\DB
MySQL 系：起 MySQL 服务，导库，账号给全权限，确认角色表、物品表、爆率表都在

改 IP 是第一步，也是最容易漏的。批量替换下面文件里的 127.0.0.1 为公网 IP 或域名：

Mir200\!Setup.txt
DBServer 配置
LoginGate.ini
RunGate 配置
www/config.json（H5 前端配置，server_ip、ws_port 必须改）
serverlist.json（区名、IP、端口）

H5 端额外要配 WebServer 端口，一般 80 或 8080，外网要在安全组放行。

四、启动顺序

DBServer / MySQL
LoginSrv
LoginGate（7000）
SelGate（7100）
RunGate（7200）
WebServer（80/8080，起 www 目录）
M2Server / GameServer

M2 黑窗无红字，WebServer 能访问 http://IP:8080/index.html 看到登录框，就算立住了。

WebSocket 端口单独配，别和 7000-7200 混用。前端 game.js 里 ws 地址写全，比如 ws://IP:9000/ws，只改列表不改 ws 地址，表现就是能看登录框但点开始没反应。

五、资源加载与黑屏排查

H5 不是完全无端，是微端+流加载。首屏加载 1-10MB 的 WebGL 壳，后续地图、怪物、技能特效按需从 CDN 拉。

黑屏常见原因：

PAK 密码不对：服务端和前端 pak 密钥不一致，微端拉下来的资源解不开，直接黑屏。回登录器配置器看哪行红。
Resources 目录名对不上：前端 config 里写的资源目录名必须和服务端微端配置一字不差。
CDN 资源 404：新地图、新装备贴图没传上 CDN，进图黑块。
浏览器缓存：旧资源命中缓存，清 Cache 和 MicroCache 再进。
WebSocket 没连上：能看登录框但不能进游戏，查 ws 端口和防火墙。
手机端高清预加载炸了：关掉高清预加载，用流畅模式先进土城，加载完再切回去。

微端网关 UpdateServer + UpdateGate 要起，端口 8000，PAK 密码全绿，三个分组（默认/电信/网通）建齐。资源版本号每次更新递增，强制玩家重新拉。

六、三端数据同步

PC、安卓、H5 共用中心数据库。关键设计：

角色表用 user_id + platform 联合主键
移动、战斗、背包、交易所有写操作都走服务端校验，前端只发指令不存逻辑
WebSocket 连接池复用，按聊天/战斗/移动/交易分通道，避免队头阻塞
移动速度、技能 CD 由服务端计时，前端只做显示，防加速挂

合击版要额外开英雄同步开关，英雄的等级、装备、技能独立存表，主号下线时英雄状态回写。

七、前端适配要点

PC 浏览器：完整技能栏、小地图、任务追踪全显示。
手机浏览器：技能栏压缩到 8 个以内，虚拟摇杆+自动拾取，按钮位置用媒体查询重排。
微信小游戏：额外包一层小游戏框架，触控事件映射到原有键鼠逻辑。

UI 资源按 512x512 切片，图片转 png 序列帧，地图切 512x512 区块，WebGL 开纹理压缩（Basis Universal），首屏资源能从 40MB 压到 7MB 左右，4G 网下加载从 20 秒缩到 3 秒。

八、自己搭的最小路径

先本机跑通：WebServer 起在 127.0.0.1:8080，浏览器开 index.html，能注册能进图。
再租云服务器：4核8G 10M 独享，公网 IP 重配一遍所有配置文件。
先出自建 H5 页：朋友用浏览器打开网址就能进，不用传客户端。
稳定之后再扩安卓 APK 和 iOS 签名包，三端同账号验证数据同步。
资源走 CDN，别让玩家全从源站拉，晚高峰会炸。

九、成本账本

自娱自乐（10人内）
低配云主机 2核4G 10M：150-300/月
免费 H5 端：0 元
合计首月 200-500 元

小圈子开区（50-200人）
4核8G 或 8核16G，20-50M 独享，基础高防：800-1500/月
商业 H5 端授权：3000-8000 一次性
正版登录器：几百到一千/年
首年 2-4 万

商业运营（500人+）
16核32G 高防 BGP，100M 独享：3000-6000/月
深度定制版本：2-5 万一次性
运维+客服：1-2 万/月
首月推广：3-10 万
首年 15-30 万起

带宽比机器贵。传奇单玩家占用 3-8KB/s，500 人在线理论 20M，实际要留 50% 余量，攻沙瞬间翻倍。独享带宽必须买，共享带宽晚高峰直接掉速。

高防是隐形大头。新服容易被扫、被 CC、被 DDoS，基础防御不够用，50G 防御 600-1200/月，100G 以上 1500-4000/月。别只看“多少 G”宣传，问清洗阈值和是否封 UDP。

十、常见坑

只改了服务端 IP 没改前端 config.json，表现就是网页能开但连不上游戏。
WebSocket 端口没进安全组，浏览器控制台报连接失败。
PAK 密码前端后端不一致，黑屏没商量。
微端没起，进图一直转圈加载。
手机端用 PC 补丁，必黑屏，必须下专属移动端包。
缓存不清，改了资源玩家端没变化，资源版本号必须递增。
用共享带宽跑攻沙，晚 8 点开始全员漂移回拉。
免费破解 H5 端有后门，回档偷库，开几天数据全没。

十一、排错固定顺序

WebServer 能开 index.html
config.json 里 IP、ws 地址、端口全对
M2 无红字，三个网关都监听
微端起，PAK 密码全绿
CDN 资源能直链访问，无 404
浏览器清缓存重进
手机端关高清预加载先跑流畅模式
同账号 PC 登录后手机登录，数据一致

网页版的核心不是“把端游搬进浏览器”，是把资源加载、协议、数据同步重做一遍。端游那套直接套 H5 外壳必黑屏必卡顿。先按真 H5 架构搭，资源走 CDN，通信走 WebSocket，数据走中心库，三端自然就通了。

版本内容（爆率、装备、NPC、活动）和端游共用一套脚本逻辑，改 Mir200\Envir 下文件，H5 前端自动读。前期别在画面效果上死磕，先把“能进、能打、不黑屏、数据不丢”四条跑稳，再谈光柱和特效。