UE4下基于V8实现的代码热刷新
如果能做到进程运行着就能刷新代码，这对游戏这类重状态业务的开发效率提升是很有帮助的，设想我们经过一系列的登录，进副本，甚至战斗到一定时间才出现的bug，没这功能我们改完代码还需要重操作一次，如果没改对，还得继续重来。。。
Puerts结合V8提供的一些能力和自身的特点，做了一套较为完善的代码热刷新支持，我们先看看效果，然后看看是怎么实现的。
疗效篇
先甩个helloworld级别的演示：
https://video.zhihu.com/video/1365325088653529088?itemId=364505146&itemType=article&player=%7B%22shouldShowPageFullScreenButton%22%3Atrue%7D
虽说演示的代码十分简单，但也涵括了一个实用的代码热刷新的几个要点：
- 最基本运行时代码刷新
- 状态保持，例子中类成员，脚本变量的值热更前后是保持的
- 匿名函数的更新，这在UI、网络等事件中可能十分常用
可能有人说这例子太简单了，会不会复杂点就hold不住了了，好，再来个花里胡哨点的演示：
https://video.zhihu.com/video/1365325837688946688?itemId=364505146&itemType=article&player=%7B%22shouldShowPageFullScreenButton%22%3Atrue%7D
疗程篇
其实我希望做一堆底层分析，写一堆高深莫测的代码来实现这功能。可惜V8没有给我这个装B的机会，它已经内置了刷代码的功能：Inspector的“Debugger.setScriptSource”命令。我们只要监听文件的变化，用url和新代码即可刷新指定代码。
虽说提供了这么个功能，但用起来其实也并不简单，因为“Debugger.setScriptSource”并不是一个C++函数，而是一个RPC消息，而且调用这个RPC之前，还要做一些交互，我下来分享下找到这方法到实现这功能的一个完整思考。
线索
一次偶然且惊喜的发现Chrome Dev Tools链接到Puerts，在上面修改代码然后“Ctrl+S”竟然能热刷新代码。这也能实现我们部分需求了，但还有两个问题：
- 如果只能通过Dev Tools去修改代码，还是有点割裂，最好能够修改TypeScript后，一条龙的完成蓝图以及JS的刷新
- 有些场景需求监听“热刷新”事件，以做一些特殊的处理，比如UI界面的重刷。
分析
抓包发现Chrome Dev Tools是通过inspector协议的“Debugger.setScriptSource”命令去更新代码。
第一个想到的是分析“Debugger.setScriptSource”的实现，如果它是调用V8某个API实现的，那么我们直接调用那接口好了。
但遗憾的是，“Debugger.setScriptSource”调用的相关V8接口，都是private的。这功能他仅仅以inspector的方式开放。
方案确定
Dev Tools和Puerts是用WebSocket来交互，而我们是同进程就完全没必要，只要直接发消息给inspector即可。另外，由于inspector协议是JSON消息，我把和inspector交互的逻辑放到js里头，由于js支持await，还可以很方便的实现twoway rpc等待。
RPC封装关键代码：
function messageHandler(str) {
let msg = JSON.parse(str);
if (msg.method === "Debugger.scriptParsed") {
parsedScript.set(msg.params.scriptId, msg.params.url);
parsedScript.set(msg.params.url, msg.params.scriptId);
} else if (typeof msg.id === "number") {
if (msg.result && pendingCommnand.has(msg.id)) {
const resolve = pendingCommnand.get(msg.id);
pendingCommnand.delete(msg.id);
resolve(msg.result);
} else {
console.error("unexpect inspector message:" + str);
}
}
};
let commandId = 0;
function sendCommand(method, params) {
return new Promise((resolve, reject) => {
commandId++;
pendingCommnand.set(commandId, resolve); dispatchProtocolMessage(JSON.stringify({"id":commandId,"method":method,"params":params}));
});
}代码说明：
- inspector封装为一个发消息的接口dispatchProtocolMessage，和一个接消息的回调
- twoway消息封装成一个异步rpc：sendCommand
- 接消息的回调，如果是reply消息，则唤醒异步rpc函数
- 接消息的回调还处理一个很重要的V8 oneway消息：Debugger.scriptParsed，V8在加载完脚本，会为脚本分配一个ID，然后通过Debugger.scriptParsed把脚本url和id的映射关系通知给inspector客户端。我们收到这个消息就记录下映射关系。
封装好RPC交互，交互逻辑就十分简单了。
初始化关键代码，其实就是发了两个命令过去：
async function enableDebugger() {
//...
await sendCommand("Runtime.enable", {});
await sendCommand("Debugger.enable", {"maxScriptsCacheSize":10000000});
}代码热更新关键逻辑：
async function reload(moduleName, url, source) {
//找url对应的id
if (scriptId) {
if (typeof source === "string") {
let orgSourceInfo = await sendCommand("Debugger.getScriptSource", {scriptId:"" + scriptId});
source = ("(function (exports, require, module, __filename, __dirname) { " + source + "\n});");
if (orgSourceInfo.scriptSource == source) {
return;
}
await sendCommand("Debugger.setScriptSource", {scriptId:"" + scriptId,scriptSource:source});
}
}
};代码解释：
- * 先获取虚拟机内的老代码，如果老代码和新代码一样，就不更新
- * 调用Debugger.setScriptSource更新代码
搞定啦！就那么简单