PixiJS源码分析系列：第四章 响应 Pointer 交互事件(上篇)

news/2025/1/18 12:54:38/文章来源:https://www.cnblogs.com/willian/p/18338694

响应 Pointer 交互事件(上篇)

上一章我们分析了 sprite 在 canvasRenderer 上的渲染，那么接下来得看看交互上最重要的事件系统了

image

最简单的 demo

还是用一个最简单的 demo 演示 example/sprite-pointerdown.html

为 sprite 添加一个 pointerdown 事件，即点击事件，移动设备上就是 touch 事件， desktop 设备上即 click 事件

const app = new PIXI.Application({ width: 800, height: 600, autoStart: false });  
document.body.appendChild(app.view);  const sprite = PIXI.Sprite.from('logo.png');sprite.on('pointerdown', ()=> {console.log('clicked')
})app.stage.addChild(sprite);  
app.start()

试着用鼠标点击 sprite ，会发现控制台并未输出期望的 'clicked'

奇奇怪怪... 看下官网的例子，需要为 sprite 添加 sprite.eventMode = 'static';;

再运行，就可以看到控制台正常输出 'clicked' 了

显示对象没有自己的事件

Canvas 本身不像 DOM 那样每个元素都有自带的事件的系统用于响应事件

需要自己实现事件系统，可交互的元素都应该是 DisplayObject 及继承自它的子类元素

/packages/display/src/DisplayObject.ts 第 210 行

export abstract class DisplayObject extends utils.EventEmitter<DisplayObjectEvents>

说明，DisplayObject 继承了 EventEmitter 类，因此就有了自定义的事件系统，所有对应的 API

eventemitter3: https://github.com/primus/eventemitter3

eventemitter3 的 REAMDME 过于简单

得看它的 测试用例 https://github.com/primus/eventemitter3/blob/master/test/test.js

可以发现 监听事件可以用 on, 触发事件可以用 emit

所以 PixiJS 中的 DisplayObject 类实例对象就可以用 on 监听事件，用 emit 触发事件，即有了自定义事件的能力

当显示对象有了自定义事件能力后，需要一个事件管理系统来管理显示对象的事件触发、监听、移除

来看看 EventSystem 类

/packages/events/src/EventSystem.ts 204 -238 行

constructor(renderer: IRenderer){this.renderer = renderer;this.rootBoundary = new EventBoundary(null);EventsTicker.init(this);this.autoPreventDefault = true;this.eventsAdded = false;this.rootPointerEvent = new FederatedPointerEvent(null);this.rootWheelEvent = new FederatedWheelEvent(null);this.cursorStyles = {default: 'inherit',pointer: 'pointer',};this.features = new Proxy({ ...EventSystem.defaultEventFeatures }, {set: (target, key, value) =>{if (key === 'globalMove'){this.rootBoundary.enableGlobalMoveEvents = value;}target[key as keyof EventSystemFeatures] = value;return true;}});this.onPointerDown = this.onPointerDown.bind(this);this.onPointerMove = this.onPointerMove.bind(this);this.onPointerUp = this.onPointerUp.bind(this);this.onPointerOverOut = this.onPointerOverOut.bind(this);this.onWheel = this.onWheel.bind(this);}

EventSystem.ts 的最后一行 extensions.add(EventSystem); 会将它以扩展插件的方式集成到 pixiJS 内

可以看到构造函数内很简单，

  1. 传入了渲染器实例

  2. rootBoudary “根边界” 这个对象很重要，后面会具体介绍

  3. 单独创建一个 ticker 用于管理事件，确保运行状态下显示对象的碰撞检测事件

  4. 实例化了两个事件对象，用于触发时传递，事件对象内的数据结构

  5. onPointerDown/onPointerMove/onPointerUp/onPointerOverOut/onWheel 等绑定到当前 this 上

当 EventSystem 加入 PixiJS 管理后，会被触发 'init' 这个 Runner ， 可理解这个 init 生命周期函数被触发

在 EventSystem.ts 第 245 - 254 行：

init(options: EventSystemOptions): void
{const { view, resolution } = this.renderer;this.setTargetElement(view as HTMLCanvasElement);this.resolution = resolution;EventSystem._defaultEventMode = options.eventMode ?? 'auto';Object.assign(this.features, options.eventFeatures ?? {});this.rootBoundary.enableGlobalMoveEvents = this.features.globalMove;
}

可以看到，setTargetElement 用于设置事件目标元素，就是 渲染器对应的 view， 可以认为这个 view 就是 canvas 本身，它是可以响应浏览器的 DOM 事件的, 当然包括，鼠标的点击，移动 等。

setTargetElement 函数 最终会调到 addEvents()

在 EventSystem.ts 第 483 - 546 行：

private addEvents(): void{... 省略部分源码if (this.supportsPointerEvents){globalThis.document.addEventListener('pointermove', this.onPointerMove, true);this.domElement.addEventListener('pointerdown', this.onPointerDown, true);... 省略部分源码globalThis.addEventListener('pointerup', this.onPointerUp, true);}else{globalThis.document.addEventListener('mousemove', this.onPointerMove, true);this.domElement.addEventListener('mousedown', this.onPointerDown, true);... 省略部分源码if (this.supportsTouchEvents){this.domElement.addEventListener('touchstart', this.onPointerDown, true);... 省略部分源码}}this.domElement.addEventListener('wheel', this.onWheel, {passive: true,capture: true,});this.eventsAdded = true;}

此函数是真正为根元素（或者说是整个 canvas 内自定义事件发起事件的元素）添加事件监听器的地方。

如果支持 pointer 事件则使用 pointer 事件，

如果不支持 pointer 事件则使用 mouse 事件。

如果支持 touch 事件则也要添加上 touch 事件

注意 move 相关的事件是添加在 document 元素上的

至此，当用户点击 canvas 元素时，就相关的回调函数就会执行，如注册的 this.onPointerDown、this.onPointerUp 等

触发的回调函数内会去触发 eventemitter3 的自定义事件。

还是以我们在 sprite-pointer.html 中的例子为例，我们注册了 sprite-pointer.html 中 sprite.on('pointerdown', function() {})，那么当用户点击 canvas 元素时，就会触发这个回调函数。

在 onPointerDown

在 EventSystem.ts 第 343 - 377 行：

private onPointerDown(nativeEvent: MouseEvent | PointerEvent | TouchEvent): void
{
... 省略部分源码
this.rootBoundary.rootTarget = this.renderer.lastObjectRendered as DisplayObject;

const events = this.normalizeToPointerData(nativeEvent);
... 省略部分源码for (let i = 0, j = events.length; i < j; i++)
{const nativeEvent = events[i];const federatedEvent = this.bootstrapEvent(this.rootPointerEvent, nativeEvent);this.rootBoundary.mapEvent(federatedEvent);
}... 省略部分

}

  1. 先指定当前 rootBoundary.rootTarget = this.renderer.lastObjectRendered 即响应事件的目标对象"为渲染器最上层的一个显示对象"

  2. 适配浏览器原生事件 nativeEvent 后，调用 this.rootBoundary.mapEvent(federatedEvent)， federatedEvent 即标准化为 PixiJS 自定义事件

事件边界 EventBoundary

canvas 内绘制的元素要准确的响应用户点击的操作，必须先确定用户点击的范围在哪里，然后将范围内的 DisplayObject 显示元素触发对应用户绑定的点击事件回调

/packages/events/src/EventBoundary.ts

EventBoundary.ts 构造函数 149 - 172 行 ：

constructor(rootTarget?: DisplayObject){this.rootTarget = rootTarget;this.hitPruneFn = this.hitPruneFn.bind(this);this.hitTestFn = this.hitTestFn.bind(this);this.mapPointerDown = this.mapPointerDown.bind(this);this.mapPointerMove = this.mapPointerMove.bind(this);this.mapPointerOut = this.mapPointerOut.bind(this);this.mapPointerOver = this.mapPointerOver.bind(this);this.mapPointerUp = this.mapPointerUp.bind(this);this.mapPointerUpOutside = this.mapPointerUpOutside.bind(this);this.mapWheel = this.mapWheel.bind(this);this.mappingTable = {};this.addEventMapping('pointerdown', this.mapPointerDown);this.addEventMapping('pointermove', this.mapPointerMove);this.addEventMapping('pointerout', this.mapPointerOut);this.addEventMapping('pointerleave', this.mapPointerOut);this.addEventMapping('pointerover', this.mapPointerOver);this.addEventMapping('pointerup', this.mapPointerUp);this.addEventMapping('pointerupoutside', this.mapPointerUpOutside);this.addEventMapping('wheel', this.mapWheel);}

构造函数内表明实例化后， 由 addEventMapping 方法 将pointerdown，pointermove， pointerout .... 等 8 类事件的回调映射函数保存在了 mappingTable 对象内

后续使用过程中用户添加到显示对象上的交互事件，都会被存储到对应的这 8 类事件列表中

当鼠标点击例子中的 sprite 显示对象时，这个 mapPointerDown 会被触发

EventBoundary.ts 构造函数 672 - 701 行 ：

protected mapPointerDown(from: FederatedEvent): void
{if (!(from instanceof FederatedPointerEvent)){console.warn('EventBoundary cannot map a non-pointer event as a pointer event');return;}const e = this.createPointerEvent(from);console.log(e.target)this.dispatchEvent(e, 'pointerdown');if (e.pointerType === 'touch'){this.dispatchEvent(e, 'touchstart');}else if (e.pointerType === 'mouse' || e.pointerType === 'pen'){const isRightButton = e.button === 2;this.dispatchEvent(e, isRightButton ? 'rightdown' : 'mousedown');}const trackingData = this.trackingData(from.pointerId);trackingData.pressTargetsByButton[from.button] = e.composedPath();this.freeEvent(e);
}

当 view 被点击后，先创建事件对象，然后向目标对象发送事件，接下来就是找到那个目标对象了

找到目标对象即点击的对象

把 mapPointerDown 函数的 const e = this.createPointerEvent(from); 的事件对象打出来看看

image

图 4-1

果然 e.target 把当前点击的就是 sprite，显然在这一步确定了 当前点击的对象 this.createPointerEvent(from); 方法调用非常重要

createPointerEvent 该当在 EventBoundary.ts 文件的 1181 - 1205 行 ：

protected createPointerEvent(from: FederatedPointerEvent,type?: string,target?: FederatedEventTarget
): FederatedPointerEvent
{const event = this.allocateEvent(FederatedPointerEvent);this.copyPointerData(from, event);this.copyMouseData(from, event);this.copyData(from, event);event.nativeEvent = from.nativeEvent;event.originalEvent = from;event.target = target?? this.hitTest(event.global.x, event.global.y) as FederatedEventTarget?? this._hitElements[0];if (typeof type === 'string'){event.type = type;}return event;
}

可以看到正是在这个 createPointerEvent 方法内调用 hitTest 或 _hitElements

注意 mapPointerDown 方法内调用 const e = this.createPointerEvent(from); 时只传了一个参数 from

所以此处 target 的确定就是由 this.hitTest(event.global.x, event.global.y) as FederatedEventTarget 来决定的

向 hitTest 方法 传入了当前事件的全局的 x, y 坐标

在 EventBoundary.ts 文件的 247 - 265 行 ：

public hitTest(x: number,y: number,
): DisplayObject
{EventsTicker.pauseUpdate = true;// if we are using global move events, we need to hit test the whole scene graphconst useMove = this._isPointerMoveEvent && this.enableGlobalMoveEvents;const fn = useMove ? 'hitTestMoveRecursive' : 'hitTestRecursive';console.log(this.rootTarget)const invertedPath = this[fn](this.rootTarget,this.rootTarget.eventMode,tempHitLocation.set(x, y),this.hitTestFn,this.hitPruneFn,);return invertedPath && invertedPath[0];
}

由于对 move 事件需要特殊处理，所以需要判断 在 hitTest 函数内调用了 hitTestMoveRecursive || hitTestRecursive

我们当前 demo 中用的是点击事件，所以调用的会是 hitTestRecursive

把 this.rootTarget 打印出来看看

image

图 4-2

可以看到图 4-2 当前 rootTarget 是一个 container 对象

当点击事件发生时，需要判断的不止是当前对象，而是当前 container 下的所有子对象，所以才需要用到 hitTestRecursive 即是递归判断

递归遍历

hitTestRecursive 函数的最生两个参数分别是用于具体碰撞检测的 hitTestFn 函数 和 用于判断是否可剔除用于碰撞判断的 hitPruneFn 函数

在 EventBoundary.ts 文件的 407 - 539 行 ：

protected hitTestRecursive(currentTarget: DisplayObject,eventMode: EventMode,location: Point,testFn: (object: DisplayObject, pt: Point) => boolean,pruneFn?: (object: DisplayObject, pt: Point) => boolean
): DisplayObject[]
{// Attempt to prune this DisplayObject and its subtree as an optimization.if (this._interactivePrune(currentTarget) || pruneFn(currentTarget, location)){return null;}if (currentTarget.eventMode === 'dynamic' || eventMode === 'dynamic'){EventsTicker.pauseUpdate = false;}// Find a child that passes the hit testing and return one, if any.if (currentTarget.interactiveChildren && currentTarget.children){const children = currentTarget.children;for (let i = children.length - 1; i >= 0; i--){const child = children[i] as DisplayObject;const nestedHit = this.hitTestRecursive(child,this._isInteractive(eventMode) ? eventMode : child.eventMode,location,testFn,pruneFn);if (nestedHit){// Its a good idea to check if a child has lost its parent.// this means it has been removed whilst looping so its bestif (nestedHit.length > 0 && !nestedHit[nestedHit.length - 1].parent){continue;}// Only add the current hit-test target to the hit-test chain if the chain// has already started (i.e. the event target has been found) or if the current// target is interactive (i.e. it becomes the event target).const isInteractive = currentTarget.isInteractive();if (nestedHit.length > 0 || isInteractive) nestedHit.push(currentTarget);return nestedHit;}}}const isInteractiveMode = this._isInteractive(eventMode);const isInteractiveTarget = currentTarget.isInteractive();// Finally, hit test this DisplayObject itself.if (isInteractiveMode && testFn(currentTarget, location)){// The current hit-test target is the event's target only if it is interactive. Otherwise,// the first interactive ancestor will be the event's target.return isInteractiveTarget ? [currentTarget] : [];}return null;
}

函数大致流程

  1. 进来先判断是否需要进行碰撞检测 if (this._interactivePrune(currentTarget) || pruneFn(currentTarget, location))

    剔除需要进行碰撞检测的对象，比如遮罩、不可见、不可交互、无需渲染等对象

  2. 如果有子显示对象，则需要循环所有子显示对象，并递归检测子显示对象

  3. 如果碰撞检测成功（点击位置有子显示对象）则在返回的 nextedHit 数组内把 currentTarget 添加进队尾, 并返回 nestedHit 数组

    if (nestedHit.length > 0 || isInteractive) nestedHit.push(currentTarget);
return nestedHit;

  4. 最后 如果是 isInteractiveMode 并且 testFn 碰撞检测成功，则把当前碰撞对象放到数组内返回

注意在这个函数内的这一行 const isInteractiveMode = this._isInteractive(eventMode);

在 EventBoundary.ts 文件的 541 -544 行 ：

private _isInteractive(int: EventMode): int is 'static' | 'dynamic'
{return int === 'static' || int === 'dynamic';
}

到这里终于知道我们 demo 中当没有指定 eventMode 为 static 或 dynamic 时，没有响应点击事件的原因了

这是检测 rootTarget 父级对象的, 如果父级对象比如 container 都不支持交互了，就不必再对其子显示对象进行碰撞检测了

还有 const isInteractiveTarget = currentTarget.isInteractive(); 这一行，判断元素本身是否可交互 也是判断 eventMode 这是检测当前 target 的

在/packages/events/src/FederatedEventTarget.ts 事件定义内 657 - 660 行：

isInteractive()
{return this.eventMode === 'static' || this.eventMode === 'dynamic';
},

接下来就要用碰撞检测来检测是否是点击对象了

找到碰撞检测函数

注意看最后的 testFn 即传入来的 hitTestFn 碰撞检测函数

在 EventBoundary.ts 文件的 615 - 637 行 ：

protected hitTestFn(displayObject: DisplayObject, location: Point): boolean
{// If the displayObject is passive then it cannot be hit directly.if (displayObject.eventMode === 'passive'){return false;}// If the display object failed pruning with a hitArea, then it must pass it.if (displayObject.hitArea){return true;}if ((displayObject as any).containsPoint){return (displayObject as any).containsPoint(location) as boolean;}// TODO: Should we hit test based on bounds?return false;
}

主要进行了三个判断

  1. eventMode === 'passive' 直接不进行碰撞检测，用于优化性能，比如在滚动区域内滚动时可以设置内部的元素为 passive

  2. displayObject.hitArea 判断 主要作用

    • 自定义交互区域：你可以定义一个特定的区域来响应用户交互，而不是使用显示对象的整个边界框。这在某些情况下非常有用，例如当你有一个复杂形状的对象，但只希望某个部分响应交互。
    • 提高性能：通过定义较小的交互区域，可以减少不必要的命中测试，从而提高性能。
    • 精确控制：你可以精确控制哪些区域应该响应用户交互，这在游戏开发和复杂的用户界面中非常有用。

  3. displayObject.containsPoint 检测，可以看到，containsPoint 是由显示对象各自自己实现的方法

注意： GraphicsGeometry.containsPoint 方法，内可知，如果你绘制的是直线、贝塞尔曲线等线条添加鼠标事件是不会起作用的，因为这些只是路径，并不是形状，你需要为这些添加 hitArea 后才交互事件才会起作用

以 sprite 类实现的 containsPoint 举例

/packages/sprite/src/Sprite.ts 第 439 - 459 行：

public containsPoint(point: IPointData): boolean
{this.worldTransform.applyInverse(point, tempPoint);const width = this._texture.orig.width;const height = this._texture.orig.height;const x1 = -width * this.anchor.x;let y1 = 0;if (tempPoint.x >= x1 && tempPoint.x < x1 + width){y1 = -height * this.anchor.y;if (tempPoint.y >= y1 && tempPoint.y < y1 + height){return true;}}return false;
}

sprite 的 containsPoint 判断坐标点是否在显示对象的矩形内比较简单，就是将全局坐标点转换为 sprite 的本地坐标点，然后判断是否在矩形内

this.worldTransform.applyInverse 方法，传入一个坐标点，返回一个由世界坐标转换成本地坐标的新坐标点，这个新坐标点就是 sprite 本地坐标点

如何处理 sprite 叠加时的碰撞检测

如果只是简单的点与形状的碰撞检测，那么如果两个显示对象叠加在一起时，点击上层的显示对像，如果不加处理，叠在下面的对象也会响应点击事件

新建个 demo 演示 example/two-sprite-pointerdown.html

const app = new PIXI.Application({ width: 800, height: 600, autoStart: false });  
document.body.appendChild(app.view);  const sprite = PIXI.Sprite.from('logo.png');  
sprite.eventMode = 'static';
sprite._Name = 'sprite1';
sprite.on('pointerdown', ()=> {console.log('clicked')
})const sprite2 = PIXI.Sprite.from('logo.png');
sprite2.tint = 'red';
sprite2.eventMode = 'static';
sprite2._Name = 'sprite2';
sprite2.x = 100
sprite2.on('pointerdown', ()=> {console.log('clicked2')
})app.stage.addChild(sprite);  
app.stage.addChild(sprite2);  
app.start()

  1. 其它代码与 sprite-pointerdown.html 几乎一样，就是添加了两个 sprite 且有一部分重叠在一起

  2. 分别给这两个 sprite 分别添加了 _Name 属性，方便调试 sprite1 和 sprite2

  3. sprite2 的 tint 属性设置为红色

  4. 修改了 sprite2 的x 值，使得 sprite2 只覆盖一部分 sprite1

如图：4-3

image

图 4-3

在 hitTestRecursive 函数内把 for 循环内的 nestedHit 打印出来

在 EventBoundary.ts 文件的 407 - 539 行 ：

protected hitTestRecursive(currentTarget: DisplayObject,eventMode: EventMode,location: Point,testFn: (object: DisplayObject, pt: Point) => boolean,pruneFn?: (object: DisplayObject, pt: Point) => boolean
): DisplayObject[]
{...省略部分代码if (currentTarget.interactiveChildren && currentTarget.children){const children = currentTarget.children;for (let i = children.length - 1; i >= 0; i--){const child = children[i] as DisplayObject;const nestedHit = this.hitTestRecursive(child,this._isInteractive(eventMode) ? eventMode : child.eventMode,location,testFn,pruneFn);console.log(nestedHit)...省略部分代码}}...省略部分代码
}

测试，点击与左侧logo重叠的位置右侧红色的 pixijs logo

image

图 4-4

输出结果确实是正确的，并没有把 sprite1 输出，仔细看 for 循环可以发现它是倒序遍历的，也就是添加在最后的显示对象，先响应碰撞

因为后面添加的对象理论上是覆盖在上层，所以应该先响应碰撞

如果把 for 循环的遍历顺序改成正序，那么就会输出 sprite1

...省略部分代码
for (let i = 0; i < children.length; i++)
{const child = children[i] as DisplayObject;const nestedHit = this.hitTestRecursive(child,this._isInteractive(eventMode) ? eventMode : child.eventMode,location,testFn,pruneFn);console.log(nestedHit)...省略部分代码
}

image

图 4-5

可以看到，通过 for 循环的倒序遍历就实现了盖在上层的显示对象优先响应的功能

本章小节

碰撞检测的粗略流程：

EventSystem.ts 的 init -> pointerdown -> onPointerDown -> mapPointerDown -> createPointerEvent -> hitTest -> hitTestRecursive -> hitTestFn -> containsPoint

事件的检测为什么不是像素级:

与 EaselJS 库的像素级碰撞检测不同， PixiJS 采用的是点与形状的碰撞检测

https://github.com/pixijs/pixijs/wiki/v5-Hacks#pixel-perfect-interaction

绕了一圈函数调用，才成功实现碰撞检测，下一篇再关注一下，碰撞检测成功后，派发事件

注：转载请注明出处博客园：王二狗Sheldon池中物 (willian12345@126.com)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/776604.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

最新SEO自动外链蜘蛛池工具促进百度快速收录使用方法介绍

最新SEO自动外链蜘蛛池工具促进百度快速收录使用方法介绍

此工具集成市面上所有自动外链网站的资源链接，经过合并、去重、筛选、验证 总结出最终的外链资源 ，软件实时更新本软件将您繁杂的外链推广转为自动化进行，并且加入站群的支持，您只需要将你的站群域名粘贴到软件里，点击开始按钮就可以了软件会自动轮刷您的每一个网站软件效…
阅读更多...
Markdown入门指南

Markdown入门指南

Markdown入门指南HelyaHsiung2021.9.27SRE IN UESTC1.The Title of Markdown (1) Denote title using = or - First title ===========Second title -----------(2) Denote title using # # First title ## Second title ### Third title #### Fourth title ##### Fifth titl…
阅读更多...
BGP属性 ASPath

BGP属性 ASPath

BGP属性 ASPath AS_PATH 属性 BGP路由的必遵属性； AS间防环属性； 用于BGP路由的路径选择,当经过多条路径到达莫网络的情况，会选择经过ASpath 较少的作为最优； 顺序的记录了某条BGP路由所经过的AS信息，每经过一个AS会在ASPath 属性的最左边…
阅读更多...
功能强大的电路设计与仿真软件Multisim 14.3安装教程

功能强大的电路设计与仿真软件Multisim 14.3安装教程

一款功能强大的电路设计与仿真软件Multisim是一款强大的电子电路仿真软件，广泛应用于电子工程和教育领域。本教程全面细致地解析了原理图设计、电路仿真以及虚拟仪器测试等核心功能，通过友好易学的界面设计，为用户打造了一款高效便捷的电路设计和分析工具，助您轻松掌握电路…
阅读更多...
图书《数据资产管理核心技术与应用》分享

图书《数据资产管理核心技术与应用》分享

《数据资产管理核心技术与应用》是由清华大学出版社出版的一本图书，该图书主要特点如下： 1、依托于大数据技术，独家加密数据血缘的底层技术实现 2、详解数据资产管理的知识体系和核心技术 3、应用元数据管理和数据建模技术，充分发挥出数据资产的更大潜力和价值。 4、全书从…
阅读更多...
山东省威海市台依村，杨文召——老赖！！！

山东省威海市台依村，杨文召——老赖！！！

山东省威海市台依村，杨文召——老赖！！！认识下老赖的家人！！！
阅读更多...
MQ高级

MQ高级

消息的可靠性：一个消息发送出去以后至少被消费一次 丢失场景：消息发送时候丢失，mq崩了消息丢失，消费者把消息搞丢了（交易服务） 解决方法针对以上三个场景和兜底方案 1、发送者可靠性 消息从生产者到消费者的每一步都可能导致消息丢失： - 发送消息时丢失： - 生产者发送…
阅读更多...
VitePress安装总结

VitePress安装总结

1、安装node.js 2、安装vscode，并在扩展中安装markdown插件 3、在vscode的终端中修改淘宝镜像源：1npm config set registry https://registry.npmmirror.com4、在终端中输入1npm add -D vitepress5、在D盘创建文件夹，右键用vscode打开，或在vscode中打开文件夹 6、在终端中执…
阅读更多...
哪位大佬知道为啥最后计数是0吗？ 实际是有数据的

哪位大佬知道为啥最后计数是0吗？ 实际是有数据的

大家好，我是Python进阶者。 一、前言 前几天在Python白银交流群【Jethro Shen】问了一个Python数据处理的问题，问题如下：哪位大佬知道为啥最后计数是0吗？实际是有数据的二、实现过程 这里【瑜亮老师】给了一个指导，如下所示：这不是发生错误了么？你设置的发生错误return …
阅读更多...
JDK、JRE和JVM简述

JDK、JRE和JVM简述

JDK（Java Development Kit） JDK是Java开发环境的核心组件，包括：Java编译器、JRE（Java运行环境）JavaDoc文档生成器和其他一些工具。 JDK是Java程序员开发Java应用程序所必需的软件包。 JRE（Java Runtime Environment） 也称为Java运行环境，它是Java应用程序运行的基础。…
阅读更多...
PGjdbc源码试读（二）

PGjdbc源码试读（二）

本期目标 追踪Connection.createStatement() Statement.executeUpdate(String sql)追踪 Connection.createStatement() 在PgConnection中找到createStatement()方法：该方法调用了同名方法，并传递了两个参数，查询两个常量的注释：TYPE_FORWARD_ONLY 表示返回的集合ResultSet只…
阅读更多...
四川省职工职业技能大赛网络安全决赛WP

四川省职工职业技能大赛网络安全决赛WP

上午CTF部分 web simplelogin yakit爆破出密码，记得应该是a123456： ppopp index.php有一个任意文件读取： <?php //upload.php error_reporting(0); highlight_file(__FILE__); class A {public $a;public function __destruct(){$s=$this->$a;$s();} } class B{publi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023