在H5 worker 系列三 webworkify处理音视频解码中提到了 flv.js使用webworkify进行音视频解码，那么在解码的worker线程中，如果想使用公共的Log模块，想把log日志集成到主线程中，要怎么做呢？
一、worker线程和主线程关于log的数据
//logger.js
Log.GLOBAL_TAG = 'flv.js';
Log.FORCE_GLOBAL_TAG = false;
Log.ENABLE_ERROR = true;
Log.ENABLE_INFO = true;
Log.ENABLE_WARN = true;
Log.ENABLE_DEBUG = true;
Log.ENABLE_VERBOSE = true;
Log.ENABLE_CALLBACK = false;
Log.emitter = new EventEmitter();
log.js里有很多开关，当改变这些开关值时，需要使用logging_control.js中的一些get/set方法，比如：
//logging-control.js
static get enableWarn() {
return Log.ENABLE_WARN;
}
static set enableWarn(enable) {
Log.ENABLE_WARN = enable;
LoggingControl._notifyChange();
}
static _notifyChange() {
let emitter = LoggingControl.emitter;
if (emitter.listenerCount('change') > 0) {
let config = LoggingControl.getConfig();
emitter.emit('change', config);
}
}
static registerListener(listener) {
LoggingControl.emitter.addListener('change', listener);
}
static removeListener(listener) {
LoggingControl.emitter.removeListener('change', listener);
}
这里使用了EventEmitter抛出change事件，来通知一下registerListener中注册的handler。关于EventEmitter基础知识，可以参考Node.js EventEmitter
搜索了下，使用registerListener注册的，也只有transmuxer.js使用webworker的时候。关于webworker基础知识，参考H5 worker 系列三 webworkify处理音视频解码
this.e = {
onLoggingConfigChanged: this._onLoggingConfigChanged.bind(this)
};
LoggingControl.registerListener(this.e.onLoggingConfigChanged);
_onLoggingConfigChanged(config) {
if (this._worker) {
this._worker.postMessage({cmd: 'logging_config', param: config});
}
}
然后看看worker里怎么处理的：
case 'logging_config': {
let config = e.data.param;
LoggingControl.applyConfig(config);
if (config.enableCallback === true) {
LoggingControl.addLogListener(logcatListener);
} else {
LoggingControl.removeLogListener(logcatListener);
}
break;
applyConfig是啥
static getConfig() {
return {
globalTag: Log.GLOBAL_TAG,
forceGlobalTag: Log.FORCE_GLOBAL_TAG,
enableVerbose: Log.ENABLE_VERBOSE,
enableDebug: Log.ENABLE_DEBUG,
enableInfo: Log.ENABLE_INFO,
enableWarn: Log.ENABLE_WARN,
enableError: Log.ENABLE_ERROR,
enableCallback: Log.ENABLE_CALLBACK
};
}
static applyConfig(config) {
Log.GLOBAL_TAG = config.globalTag;
Log.FORCE_GLOBAL_TAG = config.forceGlobalTag;
Log.ENABLE_VERBOSE = config.enableVerbose;
Log.ENABLE_DEBUG = config.enableDebug;
Log.ENABLE_INFO = config.enableInfo;
Log.ENABLE_WARN = config.enableWarn;
Log.ENABLE_ERROR = config.enableError;
Log.ENABLE_CALLBACK = config.enableCallback;
}
这里就让人费解了，在_notifyChange中抛出的getConfig，绕到worker里，又把配置用applyConfig写回去了，莫非worker这个线程里，和主线程读取的不是一份数据？必须通过postMessage这种方式同步么？？
二、测试一下，确实不是一份数据
1.先改一下transmuxing-worker.js侦听message方法，无论收到啥消息，在最后console一下
self.addEventListener('message', function (e) {
switch (e.data.cmd) {
...
}
console.log('test' + Log.FORCE_GLOBAL_TAG + ',event:' + e.data.cmd);
这样运行一下，forceGlobalTag默认值是false，没问题
2.在transmuxer.js添加一个test方法
test() {
Log.FORCE_GLOBAL_TAG = true;
// LoggingControl.forceGlobalTag = true;
console.log('Log.FORCE_GLOBAL_TAG' + Log.FORCE_GLOBAL_TAG);
this._worker.postMessage({cmd: 'test'});
}
3.在flv-player.js中添加一个test方法
test() {
this._transmuxer.test();
}
4.在index.html中，改一下暂停按钮的操作
function flv_pause() {
player.test();
}
5.现在结论出来了，直接改Log.FORCE_GLOBAL_TAG之后，在worker中读取这个值，还是原先的值。而使用LoggingControl.forceGlobalTag触发_notifyChange这种方式就可以。把LoggingControl.applyConfig(config);注释掉，也可以证实这一点。
三、ENABLE_CALLBACK属性
1.普通模式
从logger.js中可以看出，ENABLE_CALLBACK默认值为false，如果为true的时候，在调用logger的几个输出方法时，会抛通知出来，比如
static v(tag, msg) {
if (!tag || Log.FORCE_GLOBAL_TAG)
tag = Log.GLOBAL_TAG;
let str = `[${tag}] > ${msg}`;
if (Log.ENABLE_CALLBACK) {
Log.emitter.emit('log', 'verbose', str);
}
...
这个事件在logging-control.js中有处理
static addLogListener(listener) {
Log.emitter.addListener('log', listener);
if (Log.emitter.listenerCount('log') > 0) {
Log.ENABLE_CALLBACK = true;
LoggingControl._notifyChange();
}
}
static removeLogListener(listener) {
Log.emitter.removeListener('log', listener);
if (Log.emitter.listenerCount('log') === 0) {
Log.ENABLE_CALLBACK = false;
LoggingControl._notifyChange();
}
}
使用addLogListener可以添加一个handler，这样在Log.v等方法调用时，就会执行这个handler了。可以测试一下：
//transmuxer.js
addOneLogListener() {
LoggingControl.addLogListener(function (type, str) {
console.log('type:' + type + ',str:' + str);
});
}
mainThreadLogV() {
Log.v('mainThreadLogV', 'msg:');
}
先在html页面上点击按钮触发addOneLogListener，然后点击按钮触发mainThreadLogV。一切工作正常！
2.worker模式
当我们执行addLogListener时，还会触发_notifyChange，根据上面的分析，会触发worker里的逻辑：
case 'logging_config': {
let config = e.data.param;
LoggingControl.applyConfig(config);
if (config.enableCallback === true) {
LoggingControl.addLogListener(logcatListener);
} else {
LoggingControl.removeLogListener(logcatListener);
}
break;
这里在worker里，又来了一遍addLogListener或removeLogListener，难道与applyConfig一样，worker中不但数据不同步。刚才添加的logHandler(其实就是console.log('type:' + type + ',str:' + str);这个function)也不同步么？做个试验，先把LoggingControl.addLogListener(logcatListener);注释掉，然后在worker中添加一个message的响应：
//transmuxing-worker.js
case 'wokerLogV':
Log.v('wokerLogV', 'msg:');
break;
然后在主线程中，去让worker执行Log.v
//transmuxer.js
wokerLogV() {
this._worker.postMessage({cmd: 'wokerLogV'});
}
再在html页面上点击触发wokerLogV，果然不出所料，自己添加的logHandler没有执行。所以logcatListener怎么处理的呢？参考上面的config处理，是用logging_config把数据发射出去，然后在worker线程中用applyConfig这种方式重写了一遍新数据。但是logHandler就不方便发射了，只能用worker线程把这两个参数转发回去。也就是说，不管在main线程上使用addLogListener添加了多少个logHandler，在worker线程中始终只添加了一个logcatListener，这个线程就是负责转发参数的，发回到main线程中，才是真实的logHandler去响应。
let logcatListener = onLogcatCallback.bind(this);
function onLogcatCallback(type, str) {
self.postMessage({
msg: 'logcat_callback',
data: {
type: type,
logcat: str
}
});
}
主线程：
case 'logcat_callback':
Log.emitter.emit('log', data.type, data.logcat);
break;
四、总结
可能我一开始就忽略了一些事情，在this._worker = work(TransmuxingWorker);时，生成的transmuxing-worker.js就完全import了另外的副本:
import Log from '../utils/logger.js';
import LoggingControl from '../utils/logging-control.js';
import Polyfill from '../utils/polyfill.js';
import TransmuxingController from './transmuxing-controller.js';
import TransmuxingEvents from './transmuxing-events.js';
/* post message to worker:
data: {
cmd: string
param: any
}
receive message from worker:
data: {
msg: string,
data: any
}
*/
let TransmuxingWorker = function (self) {
...
虽然transmuxer.js中import的是同样的logger.js，并且里面有logger.js很多static公共常量
import EventEmitter from 'events';
import Log from '../utils/logger.js';
import LoggingControl from '../utils/logging-control.js';
import TransmuxingController from './transmuxing-controller.js';
import TransmuxingEvents from './transmuxing-events.js';
import TransmuxingWorker from './transmuxing-worker.js';
import MediaInfo from './media-info.js';
class Transmuxer {
...
说得有点啰嗦，但也印证了，两个线程无法共享数据，必须通过postMessage来交互，并且交互传递的只是字符串化的副本，也就是传统上讲的深复制。
网友评论