基于JavaScript实现的TCP通信仿真课件设计.zip

# TCP 通信仿真课件设计 ## 设计要求 设计一个课件程序，采用图形化设计，主要功能： 能够读取 wireshark 或者 sniffer 工具所捕获的数据文件 能够以直观形式表达 TCP 连接的建立、释放过程 能够以直观形式表达报文序号变化、应答机制 能以直观形式仿真报文的丢失重传 开发环境与工具 开发环境：Chrome 开发工具：VScode 开发语言：  ## 设计原理 Internet 参考模型 Internet 的设计原则 TCP 格式、连接管理、可靠传输 IPV4 分组格式 MAC 帧格式、传输规则 系统功能描述及软件模块划分 主要功能： 读取 wireshark 所捕获的 tcp/http 连接流的 txt 文件 将 16 进制编码的数据解析为 Unicode 编码的字符 根据 Internet 参考模型，图形化展示每个报文每一层的含义及具体数据 可视化展示了 TCP 三次握手、四次挥手的过程与报文序号变化、应答机制 实现了与远程服务端 TCP 连接，并部署到互联网可直接访问程序 软件模块划分：   其中 front 文件夹为主要程序模块，其细分如下： DataAnalysis.js：数据分析模块 DataShow.js：主要动画脚本模块 File Reader：文件读取模块 Index.css：主页样式模块 Index.html：主页框架内容模块 设计步骤  关键问题及其解决方法 难点一、 报文各层数据结构分析 使用 wireshark 所抓的包都来自本机 WLAN 的数据链路层的 MAC 帧，根据 OSI 模型我们知道 MAC 帧的内部实际上包含了 IP 帧，然后 IP 帧的内部才是我们分析 TCP 连接所需要的 TCP 报文内容。 如图所示，这是 MAC 帧的 16 进制形式，十分不直观，因此需要一层一层分析：  经过查阅相关资料，我详细了解了各层报文的格式，归纳如下（以下所有位均为 16 进制）： | 12 位 DstMac | 12 位 SrcMac | 4 位 Type | | ------------ | ------------ | --------- | | | | | DstMac：目的 MAC 号 SrcMac：源 MAC 号 Type：表明下一层的协议类型 | 1 位 Vision | 1 位 HeaderLen | 2 位 DSF | 2 位 DSF | 4 位 totalLen | 4 位 identification | | ----------- | -------------- | --------------- | --------------- | ------------- | ------------------- | | 2 位 Flags | 2 位 offset | 2 位 Timetolive | 2 位 Timetolive | 2 位 protocal | 4 位 headerCheck | | 8 位 SrcIp | 8 位 SrcIp | 8 位 SrcIp | 8 位 DstIp | 8 位 DstIp | 8 位 DstIp | Vision：所用 IP 协议版本 HeaderLen：头部长度 DSF：用于表示差异服务域 totalLen：总长度 identification：认证标识 Flags：标志位 Offset：偏移量 Timetolive：生存时间 Protocal：下层协议类型 headerCheck：头部确认号 SrcIp：源 IP 地址 DstIp：目的 IP 地址 | 4 位 SrcPort | 4 位 DstPort | 8 位 seq number | | ---------------- | ---------------- | ------------------ | | 8 位 ack number | 1 位 headerLen | 3 位 Flags | | 4 位 windows | 4 位 checksum | 4 位 urgentPointer | | 24 位 TCP option | 24 位 TCP option | 24 位 TCP option | SrcPort：源端口号 DstPort：目的端口号 Seq number：序列号 Ack number：确认号 headerLen：头部长度 Flags：标志位 Windows：窗口大小 Checksum：校验和 urgentPointer：紧急指针 TCP option：TCP 选项 在清楚地知道每个 16 进制数字所代表的含义后，便可以开始编写分析函数了。 因为我选择使用了 TXT 格式保存了数据，所有可以兼容大多数编程语言，这里为了之后图形化展示和上线方便，选择使用了 JavaScript 来是实现。  观察数据文件，不难发现 wireshark 将每个数据包使用特殊的符号间隔开并添加了具体时间，同时 16 进制数据每两位使用“|”分割，所以第一步是处理这些分隔符与时间。 ```c++ functionhandleInfo(info) { //处理文件内容，分割成独立的数据包，返回每个包的具体内容 letarrayOfStrings=info.split("\r\n"); lettcpArray=newArray(); for(leti=0;i<arrayOfStrings.length;i++){ if(arrayOfStrings[i].length>50){//去除时间以及报头数据 tcpArray.push(arrayOfStrings[i]); } } varpackArray=newArray();//包含每个数据包对象的数组 for(leti=0;i<tcpArray.length;i++){ packArray[i]=JSON.parse(JSON.stringify(handleDataPack(tcpArray[i]))); } returnpackArray; } ``` 这段代码实现了分割独立数据包的功能，随后编写处理具体数据的核心代码： ```c++ function handleDataPack(arr) { //解析每个数据包的具体内容 let temp = arr.slice(2); arrayOfInfo = temp.split("|"); let tempDstMac = ""; let tempSrcMac = ""; for (let i = 1; i < 7; i++) { if (i < 6) { tempDstMac += arrayOfInfo[i] + ":"; } else { tempDstMac += arrayOfInfo[i]; } } dataPack.DstMac = tempDstMac; for (let i = 7; i < 13; i++) { if (i < 12) { tempSrcMac += arrayOfInfo[i] + ":"; } else { tempSrcMac += arrayOfInfo[i]; } } dataPack.SrcMac = tempSrcMac; let IntType = arrayOfInfo[13] + arrayOfInfo[14]; //网络层协议 switch (IntType) { case "0800": dataPack.IpType = "ipv4"; break; case "0806": dataPack.IpType = "arp"; break; case "86DD": dataPack.IpType = "ipv6"; break; } dataPack.Ipv = arrayOfInfo[15].charAt(0); dataPack.IpHeaderLen = arrayOfInfo[15].charAt(1); dataPack.DSF = arrayOfInfo[16]; let totalLen = arrayOfInfo[17] + arrayOfInfo[18]; let DecTotalLen = parseInt(totalLen, 16); dataPack.totalLen = DecTotalLen; let id = arrayOfInfo[19] + arrayOfInfo[20]; let DecId = parseInt(id, 16); dataPack.Id = DecId; dataPack.LiveTime = parseInt(arrayOfInfo[23], 16); let protocol = arrayOfInfo[24]; if (protocol == "17") { //区分TCP与UDP dataPack.protocol = "UDP"; } dataPack.HeaderCheck = arrayOfInfo[25] + arrayOfInfo[26]; dataPack.SrcIp = parseInt(arrayOfInfo[27], 16) + "." + parseInt(arrayOfInfo[28], 16) + "." + parseInt(arrayOfInfo[29], 16) + "." + parseInt(arrayOfInfo[30], 16); dataPack.DstIp = parseInt(arrayOfInfo[31], 16) + "." + parseInt(arrayOfInfo[32], 16) + "." + parseInt(arrayOfInfo[33], 16) + "." + parseInt(arrayOfInfo[34], 16); dataPack.SrcPort = parseInt(arrayOfInfo[35] + arrayOfInfo[36], 16); dataPack.DstPort = parseInt(arrayOfInfo[37] + arrayOfInfo[38], 16); dataPack.SeqNum = arrayOfInfo[39] + arrayOfInfo[40] + arrayOfInfo[41] + arrayOfInfo[42]; dataPack.AckNum = arrayOfInfo[43] + arrayOfInfo[44] + arrayOfInfo[45] + arrayOfInfo[46]; dataPack.TcpHeaderLen = parseInt(arrayOfInfo[47].charAt(0), 16) * 4; let HexFlags = Number(arrayOfInfo[47].charAt(1) + arrayOfInfo[48]); dataPack.Flags = HexFlags; let windowSize = arrayOfInfo[49] + arrayOfInfo[50]; dataPack.WindowSize = parseInt(windowSize, 16); dataPack.CheckSum = arrayOfInfo[51] + arrayOfInfo[52]; dataPack.UrgentPointer = par