前言

这两天在做软件安全实验，实验要求写一个嗅探器+arp欺骗的工具。老师要求是用winpcap来实现。偷懒的我决定用python3的scapy模块来实现相关的功能。介于老师有要求写出漂亮的界面，所以最后决定使用flask+semantic-ui+socketio+react来实现套件功能。

踩坑实况

背景描述

由于后台使用了scapy进行抓包，使用prn参数的回调功能结合socketio来实现包的广播（这里有另外一个坑），但是如果短时间内抓到大量的包的话，会导致前端频繁的进行刷新，进而导致页面假死，用户使用体验极差。（CPU占用长时间100%）

解决方案

考虑到之前不知道在哪看到的 this.setState() 函数会使得页面进行一次刷新。而直接通过this.state.xxx.push() 不会使得页面刷新，所以这里就将socketio接收到消息的事件通过函数将内容push到数组里面。

然后设定一个计时器，定时使用this.setState()更新一个为用到的数据，来实现页面的刷新。这样能同时兼顾用户可用性和数据包接收。（CPU占用稳定在40%左右，不得不承认，基于web的抓包展示工具还是有些瓶颈在其中）。

后来发现单个页面过长也会导致性能下降（一次在一个页面内渲染好几万个包），所以又引入了分页机制。最后整体来看总算稳定了。