实习日志11

news2024/11/20 6:32:01

1.文件上传报错

1.1.报错信息Invalid typed array length: -2

1.2.查看源码找出错误

定位到检查代码上传是否成功的代码出错,rDataArr[3] == 0x03

var pData = new Uint8Array(pDataLen);的pDataLen=4

说明rDataArr只有0-3,其他数据都没有上传上来

说明 WebSocket的onmessage接收与send发送的数据不符

 WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
     WebSocket是一个通信的协议,分为服务器和客户端。服务器放在后台,保持与客户端的长连接,完成双方通信的任务。客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接。
     客户端的代码就不说了,websocket的API还是很简单的,就通过onmessage、onopen、onclose,以及send方法就可以实现了。websocket api通过onmessage、onopen、onclose以及send方法实现客户端的代码。具体详情就不多说了。主要说服务端的代码。
     首先是协议的升级,这个比较简单,就简述一下:当在客户端执行new Websocket(“ws://XXX.com/”)的时候,客户端就会发起请求报文进行握手申请,报文中有个很重要的key就是Sec-WebSocket-Key,服务端获取到key,然后将这个key与字符串258EAFA5-E914-47DA-95CA-C5AB0DC85B11相连,对新的字符串通过sha1安全散列算法计算出结果后,再进行base64编码,并且将结果放在请求头的”Sec-WebSocket-Accept”中返回即可完成握手。

// 检查响应是否表示成功上传
                    if (rDataArr[2] == 0x90) {
                        var flag;
                        console.log("rDataArr[3]:" + rDataArr[3])
                        // 根据rDataArr[3]的值确定标志
                        if (rDataArr[3] == 0x01) {
                            flag = 0;
                        } else if (rDataArr[3] == 0x02) {
                            flag = 2; //表示上传失败
                        } else if (rDataArr[3] == 0x03) {
                            flag = 3; // 表示上传失败
                        }

                        console.log(flag);

                        // 计算pData的长度
                        var pDataLen = rDataArr.length - 6;
                        console.log("pDataLen:", pDataLen);

                        // 如果pDataLen小于等于0,则调用HttpResultCB并传递标志和ResultStr
                        if (pDataLen <= 0) {
                            HttpResultCB(flag, ResultStr);
                        }

                        // 从响应中提取pData
                        var pData = new Uint8Array(pDataLen);
                        for (var i = 0; i < pDataLen; i++) {
                            pData[i] = rDataArr[6 + i];
                        }

                        // 将pData转换为字符串
                        var str = byteToString(pData);
                        console.log(str);

                        // 解码字符串并将其存储在ResultStr中
                        var ResultStr = decodeURIComponent(str);
                        console.log(ResultStr);

                        // 调用HttpResultCB并传递标志和ResultStr
                        HttpResultCB(flag, ResultStr);
                    }

感觉他给的文件上传接口用不了一点 

1.3.原理剖析

一般不能直接上传本地文件夹的文件,一个就是这个原因,所以应该是有安全组件把我上传文件的buffer全都给吞掉了qwq。

1.4.发现自己的服务器可以传上去图片到minio,我tm蚌埠住了

活字格的请求比起我写的多了一个参数 uploadLimitId

2.实在找不出为什么有问题,去看了一下WebSocket的教程

WebSocket 知多少?_哔哩哔哩_bilibili

探索

案例:服务器无法直接向浏览器发送http请求

使用WebSocket可以解决这个问题,建立全双工通信协议

1.浏览器发起http请求,请求建立WebSocket连接

 2.服务器响应同意协议更改

3.相互发送数据

绿色为浏览器向服务器发送的消息,这里是请求拍照

服务器返回拍照响应和传回图片地址及base64编码

每6秒向服务端发送一次请求,检查连接心跳

通信流程 

底层原理

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DoubleEnsemble:基于样本重加权和特征选择的金融数据分析方法

现代机器学习模型&#xff08;如深度神经网络和梯度提升决策树&#xff09;由于其提取复杂非线性模式的优越能力&#xff0c;在金融市场预测中越来越受欢迎。然而&#xff0c;由于金融数据集的信噪比非常低&#xff0c;并且是非平稳的&#xff0c;复杂的模型往往很容易过拟合。…

leetcode189.轮转数组|超简单易于理解方法

题目 https://leetcode.cn/problems/rotate-array/description/https://leetcode.cn/problems/rotate-array/description/ 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输…

基于uniapp+vue酒店宾馆客房民宿管理系统设计 微信小程序_54ybz

APP性能需求 &#xff08;1&#xff09;顾客在安卓APP页面各种操作可及时得到反馈。 &#xff08;2&#xff09;该平台是提供给多个用户使用的平台&#xff0c;用户使用之前需要注册登录。登录验证后&#xff0c;用户才可进行各种操作[10]。 &#xff08;3&#xff09;管理员、…

Java 集合 04 综合练习-查找用户是否存在

练习、 代码&#xff1a; public class User{private String id;private String username;private int password;public User() {}public User(String id, String username, int password) {this.id id;this.username username;this.password password;}public String getI…

舟山长寿医学中心:引领生命科技前沿

在浩瀚的东海之滨&#xff0c;舟山群岛如一颗璀璨的明珠&#xff0c;镶嵌在碧波荡漾的大海之中。这里不仅拥有得天独厚的自然美景&#xff0c;更是一块充满生机与活力的健康宝地。舟山长寿医学中心&#xff0c;正是这片神奇的土地上的一颗璀璨明珠&#xff0c;致力于为全球人士…

Linux权限【上篇】

&#x1f4d9; 作者简介 &#xff1a;RO-BERRY &#x1f4d7; 学习方向&#xff1a;致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f4d2; 日后方向 : 偏向于CPP开发以及大数据方向&#xff0c;欢迎各位关注&#xff0c;谢谢各位的支持 目录 扩展知识&#xff1a…

react 之 UseReducer

UseReducer作用: 让 React 管理多个相对关联的状态数据 import { useReducer } from react// 1. 定义reducer函数&#xff0c;根据不同的action返回不同的新状态 function reducer(state, action) {switch (action.type) {case INC:return state 1case DEC:return state - 1de…

系统移植--无法启动Linux内核--报错VFS--挂载nfs失败

问题 找信息&#xff1a;VFS 可能的原因 1、开发板上内核启动参数中的虚拟机ubuntu IP和真实的 虚拟机的IP不一致 2、开发板上内核启动参数中虚拟机的共享目录和虚拟机 ubuntu上配置的nfs服务器上的共享目录不一致 3、nfs配置文件(/etc/exports)路径错误 与自己的共享文件…

Galah:一款功能强大的LLM驱动型OpenAI Web蜜罐系统

关于Galah Galah是一款功能强大的Web蜜罐&#xff0c;该工具由LLM大语言模型驱动&#xff0c;基于OpenAI API实现其功能。 很多传统的蜜罐系统会模拟一种包含了大量网络应用程序的网络系统&#xff0c;但这种方法非常繁琐&#xff0c;而且有其固有的局限性。Galah则不同&…

Transformer 自然语言处理(四)

原文&#xff1a;Natural Language Processing with Transformers 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 第十章&#xff1a;从头开始训练变换器 在本书的开头段落中&#xff0c;我们提到了一个名为 GitHub Copilot 的复杂应用&#xff0c;它使用类似 GPT 的…

C语言:详解操作符(上)

摘要&#xff1a; 本篇&#xff0c;我们将学习C语言中操作符的相关内容&#xff0c;操作符是C语言中重要的元素之一&#xff0c;在我们的代码中处处都有&#xff0c;下面我们将详细介绍操作符的相关内容&#xff0c;并结合一些代码例题加深印象。 目录 一、操作符的分类及介绍 …

当无法在Windows 10上更改分辨率时怎么办?这里提供几个方法

一般来说,如果你愿意,你可以很容易地更改Windows 10计算机的屏幕分辨率。如果你发现无法在Windows 10中更改分辨率,可以查看下面的解决方案来解决此问题。 无法在Windows 10上更改分辨率? 要在Windows 10上检查和更改屏幕分辨率,通常有两种简单的方法。 方法一:你可以…

Vue3+vite搭建基础架构(5)--- 使用vue-i18n

Vue3vite搭建基础架构&#xff08;5&#xff09;--- 使用vue-i18n 说明官方文档安装vue-i18n使用vue-i18n测试vue-i18n的国际化配置 说明 这里记录下自己在Vue3vite的项目使用vue-i18n做国际化语言的过程&#xff0c;不使用ts语法&#xff0c;方便以后直接使用。这里承接自己的…

工作七年,对消息推送使用的一些经验和总结

前言&#xff1a;不管是APP还是WEB端都离不开消息推送&#xff0c;尤其是APP端&#xff0c;push消息&#xff0c;小信箱消息&#xff1b;WEB端的代办消息等。因在项目中多次使用消息推送且也是很多项目必不可少的组成部分&#xff0c;故此总结下供自己参考。 一、什么是消息推…

VS2019项目的图标问题

图标问题搞的我很困惑。。。 最开始&#xff1a; 添加图标1&#xff1a; 然后问题出现了&#xff0c;我想给它换个图标&#xff0c;死活成功不了。。。 。。。 替换成功了。。。 但不完全成功。。。 这是怎么回事啊&#xff1f; vs 2019更改exe程序图标简易教程_哔哩哔哩_…

8. 字符串转换整数 (atoi)-LeetCode(Java)

8. 字符串转换整数 (atoi) 题目&#xff1a;8. 字符串转换整数 (atoi) 请你来实现一个 myAtoi(string s) 函数&#xff0c;使其能将字符串转换成一个 32 位有符号整数&#xff08;类似 C/C 中的 atoi 函数&#xff09;。 函数 myAtoi(string s) 的算法如下&#xff1a; 读入…

三维模型设计新纪元:3D开发工具HOOPS在机械加工行业的应用与优势

在当今快速发展的科技时代&#xff0c;机械加工行业正经历着巨大的变革&#xff0c;而HOOPS技术正是其中一项重要的创新。HOOPS技术不仅仅是一种用于处理和可视化计算机辅助设计&#xff08;CAD&#xff09;数据的工具&#xff0c;更是机械加工领域中提升效率、优化设计的利器。…

2024年美赛B题思路分析 - 搜索潜水器

# 1 赛题 问题B&#xff1a;搜索潜水器 总部位于希腊的小型海上巡航潜艇&#xff08;MCMS&#xff09;公司&#xff0c;制造能够将人类运送到海洋最深处的潜水器。潜水器被移动到该位置&#xff0c;并不受主船的束缚。MCMS现在希望用他们的潜水器带游客在爱奥尼亚海底探险&…

Python实战:使用DrissionPage库爬取高考网大学信息

上一篇文章&#xff0c;我刚入门 DrissionPage 爬虫库&#xff0c;使用这个库爬取了拉钩网关于 Python 的职位信息。 今天再使用 DrissionPage 爬虫库练习一个案例&#xff0c;爬取高考网大学信息。 本次爬取到2885个大学信息&#xff0c;包含大学名称、所在省、市、大学标签信…

MySQL中where和having的区别

前言 数据库中的 WHERE 和 HAVING 子句在 SQL 查询中扮演着关键的角色&#xff0c;帮助我们有效地筛选和过滤数据。这两个子句虽然都用于限定结果集&#xff0c;但它们的应用场景和操作对象存在明显的区别。在理解和运用这两个子句的过程中&#xff0c;我们能够更灵活地进行数据…