MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级"通讯协议,该协议构建于TCP/IP协议上,由IBM在1999年发布。MQTT最大优点在于,可以以极少的代码和有限的带宽,为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议,使其在物联网、小型设备、移动应用等方面有较广泛的应用。
MQTT是一个基于客户端-服务器的消息发布/订阅传输协议。MQTT协议是轻量、简单、开放和易于实现的,这些特点使它适用范围非常广泛。在很多情况下,包括受限的环境中,如:机器与机器(M2M)通信和物联网(IoT)。其在,通过卫星链路通信传感器、偶尔拨号的医疗设备、智能家居、及一些小型化设备中已广泛使用。
由于物联网的环境是非常特别的,所以MQTT遵循以下设计原则:
(1)精简,不添加可有可无的功能;
(2)发布/订阅(Pub/Sub)模式,方便消息在传感器之间传递;
(3)允许用户动态创建主题,零运维成本;
(4)把传输量降到最低以提高传输效率;
(5)把低带宽、高延迟、不稳定的网络等因素考虑在内;
(6)支持连续的会话控制;
(7)理解客户端计算能力可能很低;
(8)提供服务质量管理;
(9)假设数据不可知,不强求传输数据的类型与格式,保持灵活性。
MQTT协议工作在低带宽、不可靠的网络的远程传感器和控制设备通讯而设计的协议,它具有以下主要的几项特性:
(1)使用发布/订阅消息模式,提供一对多的消息发布,解除应用程序耦合。
这一点很类似于XMPP,但是MQTT的信息冗余远小于XMPP,,因为XMPP使用XML格式文本来传递数据。
(2)对负载内容屏蔽的消息传输。
(3)使用TCP/IP提供网络连接。
主流的MQTT是基于TCP连接进行数据推送的,但是同样有基于UDP的版本,叫做MQTT-SN。这两种版本由于基于不同的连接方式,优缺点自然也就各有不同了。
(4)有三种消息发布服务质量:
"至多一次",消息发布完全依赖底层TCP/IP网络。会发生消息丢失或重复。这一级别可用于如下情况,环境传感器数据,丢失一次读记录无所谓,因为不久后还会有第二次发送。这一种方式主要普通APP的推送,倘若你的智能设备在消息推送时未联网,推送过去没收到,再次联网也就收不到了。
"至少一次",确保消息到达,但消息重复可能会发生。
"只有一次",确保消息到达一次。在一些要求比较严格的计费系统中,可以使用此级别。在计费系统中,消息重复或丢失会导致不正确的结果。这种最高质量的消息发布服务还可以用于即时通讯类的APP的推送,确保用户收到且只会收到一次。
(5)小型传输,开销很小(固定长度的头部是2字节),协议交换最小化,以降低网络流量。
这就是为什么在介绍里说它非常适合"在物联网领域,传感器与服务器的通信,信息的收集",要知道嵌入式设备的运算能力和带宽都相对薄弱,使用这种协议来传递消息再适合不过了。
(6)使用Last Will和Testament特性通知有关各方客户端异常中断的机制。
Last Will:即遗言机制,用于通知同一主题下的其他设备发送遗言的设备已经断开了连接。
Testament:遗嘱机制,功能类似于Last Will。
实现MQTT协议需要客户端和服务器端通讯完成,在通讯过程中,MQTT协议中有三种身份:发布者(Publish)、代理(Broker)(服务器)、订阅者(Subscribe)。其中,消息的发布者和订阅者都是客户端,消息代理是服务器,消息发布者可以同时是订阅者。
MQTT传输的消息分为:主题(Topic)和负载(payload)两部分:
(1)Topic,可以理解为消息的类型,订阅者订阅(Subscribe)后,就会收到该主题的消息内容(payload);
(2)payload,可以理解为消息的内容,是指订阅者具体要使用的内容。
MQTT会构建底层网络传输:它将建立客户端到服务器的连接,提供两者之间的一个有序的、无损的、基于字节流的双向传输。
当应用数据通过MQTT网络发送时,MQTT会把与之相关的服务质量(QoS)和主题名(Topic)相关连。
一个使用MQTT协议的应用程序或者设备,它总是建立到服务器的网络连接。客户端可以:
(1)发布其他客户端可能会订阅的信息;
(2)订阅其它客户端发布的消息;
(3)退订或删除应用程序的消息;
(4)断开与服务器连接。
MQTT服务器以称为"消息代理"(Broker),可以是一个应用程序或一台设备。它是位于消息发布者和订阅者之间,它可以:
(1)接受来自客户的网络连接;
(2)接受客户发布的应用信息;
(3)处理来自客户端的订阅和退订请求;
(4)向订阅的客户转发应用程序消息。
MQTT协议中的订阅、主题、会话
(1)订阅(Subscription)
订阅包含主题筛选器(Topic Filter)和最大服务质量(QoS)。订阅会与一个会话(Session)关联。一个会话可以包含多个订阅。每一个会话中的每个订阅都有一个不同的主题筛选器。
(2)会话(Session)
每个客户端与服务器建立连接后就是一个会话,客户端和服务器之间有状态交互。会话存在于一个网络之间,也可能在客户端和服务器之间跨越多个连续的网络连接。
(3)主题名(Topic Name)
连接到一个应用程序消息的标签,该标签与服务器的订阅相匹配。服务器会将消息发送给订阅所匹配标签的每个客户端。
(4)主题筛选器(Topic Filter)
一个对主题名通配符筛选器,在订阅表达式中使用,表示订阅所匹配到的多个主题。
(5)负载(Payload)
消息订阅者所具体接收的内容。
MQTT协议中定义了一些方法(也被称为动作),来于表示对确定资源所进行操作。这个资源可以代表预先存在的数据或动态生成数据,这取决于服务器的实现。通常来说,资源指服务器上的文件或输出。主要方法有:
(1)Connect。等待与服务器建立连接。
(2)Disconnect。等待MQTT客户端完成所做的工作,并与服务器断开TCP/IP会话。
(3)Subscribe。等待完成订阅。
(4)UnSubscribe。等待服务器取消客户端的一个或多个topics订阅。
(5)Publish。MQTT客户端发送消息请求,发送完成后返回应用程序线程。
在MQTT协议中,一个MQTT数据包由:固定头(Fixed header)、可变头(Variable header)、消息体(payload)三部分构成。MQTT数据包结构如下:
(1)固定头(Fixed header)。存在于所有MQTT数据包中,表示数据包类型及数据包的分组类标识。
(2)可变头(Variable header)。存在于部分MQTT数据包中,数据包类型决定了可变头是否存在及其具体内容。
(3)消息体(Payload)。存在于部分MQTT数据包中,表示客户端收到的具体内容。
固定头存在于所有MQTT数据包中,其结构如下:
MQTT数据包类型
位置:Byte 1中bits 7-4。相于一个4位的无符号值,类型、取值及描述如下:
标识位
位置:Byte 1中bits 3-0。在不使用标识位的消息类型中,标识位被作为保留位。如果收到无效的标志时,接收端必须关闭网络连接:
(1)DUP:发布消息的副本。用来在保证消息的可靠传输,如果设置为1,则在下面的变长中增加MessageId,并且需要回复确认,以保证消息传输完成,但不能用于检测消息重复发送。
(2)QoS:发布消息的服务质量,即:保证消息传递的次数
Ø00:最多一次,即:<=1 Ø01:至少一次,即:>=1 Ø10:一次,即:=1 Ø11:预留
(3)RETAIN: 发布保留标识,表示服务器要保留这次推送的信息,如果有新的订阅者出现,就把这消息推送给它,如果设有那么推送至当前订阅者后释放。
ws://broker.emqx.io:8083/mqtt
MQTT连接成功!
import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import store from "@/store/store.js";
import router from "@/router/index";
import { Config } from "@/api.js";
// mqtt 相关
import mqtt from "@/store/mqtt.js";
Vue.use(Vuex);
axios.defaults.timeout = 60;
// console.log(process.env)
const baseUrl =
process.env.NODE_ENV === "development"
? process.env.VUE_APP_BASE_API + "/api"
: "http://" + window.location.host + "/api";
axios.defaults.baseURL = baseUrl;
// http request 拦截器
axios.interceptors.request.use(
(config) => {
// 获取登录成功后存储到sessionStorage中的令牌
const token = sessionStorage.getItem("userToken");
//console.log(token)
config.data = JSON.stringify(config.data);
config.headers["Content-Type"] = "application/json"; // "application/x-www-form-urlencoded",
// config.headers['']
config.headers["X-Access-Token"] = token || undefined;
// if (token) {
// config.params = { token: token };
// }
return config;
},
(error) => {
return Promise.reject(error);
}
);
// http response 拦截器
axios.interceptors.response.use(
(response) => {
if (response.data.errCode == 2) {
this.$router.push({
path: "/",
querry: { redirect: this.$router.currentRoute.fullPath }, //从哪个页面跳转
});
}
return response;
},
(error) => {
// console.log(error.response);
if (error.response.status == 401) {
// console.log(23232323)
sessionStorage.removeItem("userToken");
sessionStorage.removeItem("userToken");
sessionStorage.removeItem("userInfo");
sessionStorage.removeItem("role");
store.state.hasLogin = false;
// 未登录
// console.log(router)
router.push({ name: "root" });
}
return Promise.reject(error);
}
);
// 封装get方法,返回promise对象
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params,
})
.then((response) => {
resolve(response.data);
})
.catch((err) => {
reject(err);
});
});
}
// 封装post请求
export function post(request) {
return new Promise((resolve, reject) => {
axios.post(request.url, request.data).then(
(response) => {
resolve(response.data);
},
(err) => {
reject(err);
}
);
});
}
// 封装getAwait方法,返回async方法
export async function getAwait(url, params = {}) {
let res = await axios.get(url, { params: params });
res = res.data;
return res;
}
// 封装getAwait方法,返回async方法
export async function postAwait(url, data = {}) {
let res = await axios.post(url, data);
res = res.data;
return res;
}
const store = new Vuex.Store({
state: {
//全局变量定义处
hasLogin: false, //用户是否登录
userInfo: {}, //用于存放用户账户数据
},
mutations: {
//全局方法定义处
setLogin(state, status) {
state.hasLogin = status;
},
setUserInfo(state, param) {
state.userInfo = param;
},
setLogout(state) {},
setConfig(state, data) {
// console.log(data)
},
setFind(state, data) {
// if(data[0]){
// try {
// } catch (error) {
// console.log(error)
// }
// }
},
},
actions: {
setLogin(state, status) {
state.hasLogin = status;
},
setUserInfo(state, param) {
state.userInfo = param;
},
setLogout(state) {},
getConfig({ commit }) {
},
// 获取配置信息
getFind({ commit }) {
},
},
modules: {
mqtt,
},
});
export default store;
const store = new Vuex.Store({
state: {
mattStatus: 1, // 1 = 连接中 2 = 连接成功 3 = 重新连接 4 = 已断开连接 5 = 已离线 6 = 无法连接
clientMqtt: null, // 当前连接 mqtt 实体
mittTopic: [], // 存放当前 mitt 订阅的名称(便于控制 mitt 销毁)
topicHistory: [], // topic 订阅取消 操作日志 (仅存储最近100条记录;用于解决两个界面订阅、取消订阅重复的topic出现的数据不推送问题:取消订阅完成在订阅成功之前会取消这个topic所有的订阅即这个topic不会推送)
},
getters: {},
mutations: {},
actions: {},
});
export default store;
// mqtt 文档:https://github.com/mqttjs/MQTT.js#connect
// 针对 mqtt 进行深度封装
import mqtt from "mqtt";
const { connect, Store } = mqtt;
// mqtt 服务端 ip地址以及端口 例如: 0.0.0.0:0000
const host = globConfig && globConfig.VUE_APP_MQTT_IP;
// mqtt 订阅日志操作
function setMqttTopicHistory(data) {
if (typeof data === "object") {
if (store.state.topicHistory.length >= 100) {
store.state.topicHistory.splice(0, 1);
}
store.state.topicHistory.push(data);
} else {
try {
Array.from(store.state.topicHistory, (item) => {
if (item.id === data) {
item.status = "success";
throw new Error("终止循环");
}
});
} catch (err) {
//
}
}
}
// 设置 promise 等待函数
function statusPromise(topic, type) {
return new Promise((resolve) => {
if (getLoading()) {
sleep();
} else {
resolve();
}
// 设置递归函数等待 模拟 sleep
function sleep() {
setTimeout(() => {
if (getLoading()) {
sleep();
} else {
resolve();
}
}, 200);
}
// 获取正在操作中的topic日志
function getLoading() {
const temp = store.state.topicHistory.find((item) => {
return (
item.topic === topic &&
item.type === type &&
item.status === "loading"
);
});
return temp;
}
});
}
// 连接 mqtt
export const connectMqtt = function () {
return new Promise((resolve, reject) => {
// 整个客户端只需要1个mqtt连接
// 如果没有连接则新建连接
if (!store.state.clientMqtt) {
store.state.mattStatus = 1; // 连接中
// 创建连接
const client = connect(`mqtt://${host}/mqtt`);
store.state.clientMqtt = client;
// message.loading({ content: "实时通信正在连接中...", key: 1 });
// 在成功(重新)连接时发出
client.on("connect", (data) => {
// console.log(data);
setTimeout(() => {
store.state.mattStatus = 2; // 连接成功
// message.success({ content: "实时通信已连接成功!", key: 1 });
}, 1000);
console.log("mqtt 连接成功!");
resolve();
});
// 重新连接开始时发出
client.on("reconnect", (data) => {
// message.loading({ content: "实时通信正在连接中...", key: 1 });
store.state.mattStatus = 3; // 重新连接
console.log("mqtt 开始重新连接...");
});
// 断开连接后发出
client.on("close", (data) => {
// 清理 store mqtt 实体
store.state.mattStatus = 4; // 已断开连接
store.state.clientMqtt = null;
console.log("mqtt 已断开连接!");
reject();
});
// 当客户端离线时发出
client.on("offline", (data) => {
console.log("mqtt 客户端已经离线!");
store.state.mattStatus = 5; // 已离线
// message.info("您当前的实时通信处于离线状态");
});
// 当客户端无法连接(即 connack rc != 0)或发生解析错误时发出
client.on("error", (data) => {
console.log("mqtt 无法连接!");
store.state.mattStatus = 6; // 无法连接
message.error("实时通信无法连接到服务器!");
reject();
});
// 被调用时发出。如果将回调传递给,则一旦回调返回,就会发出此事件。mqtt.Client#end()mqtt.Client#end()
client.on("end", (data) => {
console.log("mqtt 主动 断开连接!");
});
// 当客户端收到发布数据包时发出
// topic收到包的主题
// message接收数据包的有效载荷
// packet接收到的数据包,在 mqtt-packet中定义
client.on("message", (topic, message, packet) => {
// console.log(topic)
const msg = JSON.parse(decodeURIComponent(message));
// console.log(topic);
// console.log(store.state.mittTopic);
// console.log(msg);
if (store.state.mittTopic.includes(topic)) {
// 通过事件进行广播
EvenBus.$emit(topic, msg);
}
});
} else {
resolve();
}
});
};
// 订阅 (如果未建立 mqtt 连接 回先进行创建 mqtt 连接)
// 此处设置等待在订阅之前有取消订阅中的操作 等待取消订阅服务器返回成功状态后再进行订阅
// 防止上一个界面取消订阅(同时操作相同 topic) 下一个界面订阅直接被取消订阅 导致接受不到订阅的数据
export const subscribe = async function (topic, callback) {
const client = store.state.clientMqtt;
if (client) {
// 等待取消订阅回调完成
await statusPromise(topic, "cancel");
// 订阅日志操作
const _id = uuidv4();
setMqttTopicHistory({
id: _id, // 唯一id
type: "subscription", // 取消订阅还是订阅
status: "loading", // 异步函数是否完成
type_text: "开启订阅",
topic: topic, // 操作的 topic
});
client.subscribe(topic, (err, granted) => {
// 设置订阅日志完成状态
setMqttTopicHistory(_id);
callback && callback(err, granted);
if (err) {
console.error("topic 订阅失败:", granted);
} else {
console.log("topic 订阅成功:", granted);
if (!store.state.mittTopic.includes(topic)) {
store.state.mittTopic.push(topic);
}
}
});
} else {
connectMqtt().then((res) => {
subscribe(topic, callback);
});
}
};
// 取消订阅
export const unsubscribe = function (topic, callback) {
const client = store.state.clientMqtt;
if (client) {
// 订阅日志操作
const _id = uuidv4();
setMqttTopicHistory({
id: _id, // 唯一id
type: "cancel", // 取消订阅还是订阅
status: "loading", // 异步函数是否完成
type_text: "取消订阅",
topic: topic, // 操作的 topic
});
const _index = store.state.mittTopic.indexOf(topic);
if (_index > -1) {
store.state.mittTopic.splice(_index, 1);
}
// 取消订阅后 取消事件广播所有的监听(此处取消后在调用广播监听的地方则不需要取消监听广播)
EvenBus.$off(topic);
client.unsubscribe(topic, (err) => {
// 设置订阅日志完成状态
setMqttTopicHistory(_id);
callback && callback(err);
if (err) {
console.error("topic 取消订阅订阅失败");
} else {
console.log("topic 取消订阅成功:");
}
});
}
};
// 切换订阅
export const swichSubscribe = function (oldTopic, newTopic) {
// 先取消订阅
unsubscribe(oldTopic);
// 再重新订阅
subscribe(newTopic);
};
// 发送消息
export const publish = function () {};
// 关闭客户端
export const end = function () {
const client = store.state.clientMqtt;
if (client) {
client.end(true);
// 关闭事件广播的监听 并清理 store 内缓存
const mittTopic = store.state.mittTopic;
mittTopic.forEach((item) => {
EvenBus.$off(item);
});
store.state.mittTopic = [];
}
};
实现token无感刷新
单点登录场景
headers
Authorization Bearer
短token
Refreshtoken
长token
用短token取数据,过期后用长token换短token
import axios from 'axios'
//从localStorage存取数据 保存token 获取短token 获取长token
import{ setToken, setRefreshToken,getToken} from './token'
import { refreshToken, isRefreshToken } from './refreshToken'
const ins = axios.create({
baseURL: '',
headers:{
Authorization: `Bearer ${getToken()}`
}
})
ins.interceptors.response.use(async (res)=>{
if(res.headers.authorization){
const token = res.headers.authorization.replace('Bearer ', '')
setToken(token)
ins.defaults.headers.Authorization = `Bearer ${token}`
}
if(res.headers.refreshtoken){
const refreshtoken = res.headers.refreshtoken.replace('Bearer ', '')
setRefreshToken(refreshtoken)
}
//自动刷新token 判断短token失效 需要判断不是刷新token的请求 登录场景
//高内聚低耦合 设计原则
if(res.data.code === 401 && !isRefreshToken(res.config)){
//刷新token
const isSuccess = await refreshToken()
//刷新token是否成功
if(isSuccess){
//重新请求 旧token改成新token
res.config.headers.Authorization = `Bearer ${getToken()}`
const resp = await ins.request(res.config)
return resp
}else{
//跳转到登录页面
return res.data
}
}
return res.data
})
//什么样的位置写什么样的函数
//定义多少模块 每个模块的职责
import request from './request'
export function login(){
return request.post('/login')
}
export function reqProtected(){
return request.post('./protected')
}
export * from './refreshToken'
import request from './request'
import {getRefreshToken} from './token'
let promise
export async function refreshToken(){
if(promise){
return promise
}
//短时间内密集的刷新token 让他只刷新一次 使用节流 或唯一化promise
promise = new Promise(async (resolve)=>{
console.log('刷新token')
const resp = await request.get('/refresh_token',{
headers: {
Authorization: `Bearer ${getRefreshToken()}`
},
__isRefreshToken: true
})
resolve(resp.code === 0)
})
//不论成功与失败 最后到需要置空
promise.finally(()=>{
promise = null
})
//避免就短时间内反复刷新token
//可扩展到多标签页通讯
return promise
}
export function isRefreshToken(config){
return !!config.__isRefreshToken
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta content="always" name="referrer">
<meta name="theme-color" content="#ffffff">
<meta name="description" content="">
<title>大文件多线程分片</title>
<style>
.container{
height: 450px;
overflow: hidden;
position: relative;
}
.container ul{
transition: 0.6s;
list-style: none;
}
.container li{
height: 30px;
line-height: 30px;
transition: 0.6s;
color:#ccc;
}
.container li.active{
color: #f1f1f1;
transform: scale(1.5);
}
.form-item{
position: relative;
width:100px;
height: 50px;
transition: 0.6s;
}
.form-item input{
width: 100%;
position: absolute;
left: 0;
bottom: 0;
height: 20px;
border: 0;
border-bottom: 1px solid #ccc;
outline: none;
}
.form-item .bar{
position: absolute;
width: 0%;
height: 1px;
left: 0;
bottom: 0;
background: red;
}
.form-item label{
position: absolute;
left: 5px;
top: 30px;
}
.form-item input:focus ~ .bar{
width: 100%;
height: 5px;
}
.form-item input:valid ~ label, .form-item input:focus ~ label{
color: #5264ae;
transform: translateY(-25px);
font-size: 16px;
}
</style>
<script src="https://unpkg.com/spark-md5@3.0.2/spark-md5.js"></script>
<!--https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.0/spark-md5.min.js-->
</head>
<body>
<div class="container">
<!--<form method="post" enctype="multipart/form-data">
<div>
<label for="file">选择要上传的文件</label>
<input type="file" id="file" name="file" multiple capture="camera" />
</div>
<div>
<button>提交</button>
</div>
</form>-->
<div class="form-item">
<input id="NewfileName" type="text" required placeholder=""/>
<span class="bar"></span>
<label for="NewfileName">New file</label>
</div>
<ul class="list">
<li>
<input type="file" onChange="cfile(this)" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>
</li>
</ul>
</div>
<script type="lslsls" id="worker">
//加载外部MD5 js库
self.importScripts('https://cdnjs.cloudflare.com/ajax/libs/spark-md5/3.0.0/spark-md5.min.js');
// worker.js代码写入html中
onmessage = async (e) =>{
const {f,start,end,CHUNK_SIZE} = e.data
const result = []
for(let i=start;i<end;i++){
const promi = await createChunk(f,i,CHUNK_SIZE)
/*.then(chunk=>{
postMessage(chunk)
console.log('子线程'+i+',正常执行完毕')
}).catch((e)=>{
console.error(e);
}).finally(()=>{
console.log('完成'+i+'线程')
})*/
result.push(promi)
}
const chunks = await Promise.all(result)
postMessage(chunks)
}
function createChunk(file,index,chunkSize){
return new Promise((resolve)=>{
const start = index*chunkSize
const end = start + chunkSize
const spark = new SparkMD5.ArrayBuffer()
const fileReader= new FileReader()
const blob = file.slice(start,end)
fileReader.onload = (e)=>{
spark.append(e.target.result)
resolve({
start,
end,
index,
hash:spark.end(),
blob
})
//resolve(randomNum(0,1000))
}
fileReader.readAsArrayBuffer(blob)
})
}
// Worker 线程关闭
//self.close();
function randomNum(maxNum, minNum, decimalNum) {
let max = 0, min = 0;
minNum <= maxNum ? (min = minNum, max = maxNum) : (min = maxNum, max = minNum);
switch (arguments.length) {
case 1:
return Math.floor(Math.random() * (max + 1));
break;
case 2:
return Math.floor(Math.random() * (max - min + 1) + min);
break;
case 3:
return (Math.random() * (max - min) + min).toFixed(decimalNum);
break;
default:
return Math.random();
break;
}
}
</script>
<script>
function startWorker() {
if (typeof Worker !== 'undefined') {
// 支持Web worker 创建一个新的Web Worker
const blob = new Blob([document.getElementById('worker').textContent]);
const url = window.URL.createObjectURL(blob)
return new Worker(url);
} else {
// 不支持
console.log('Web Workers are not supported in this browser.');
console.error("抱歉,你的浏览器不支持 Web Workers...");
}
}
function createChunk(file,index,chunkSize){
return new Promise((resolve)=>{
const start = index*chunkSize
const end = start + chunkSize
const spark = new SparkMD5.ArrayBuffer()
const fileReader= new FileReader()
const blob = file.slice(start,end)
fileReader.onload = (e)=>{
spark.append(e.target.result)
resolve({
start,
end,
index,
hash:spark.end(),
blob
})
}
fileReader.readAsArrayBuffer(blob)
})
}
const CHUNK_SIZE = 1024*1024 *0.001 //0.001MB
const THREAD_COUNT = navigator.hardwareConcurrency || 4
async function cutFile(file){
//主线程分派Worker线程任务
const f = file.files[0]
const chunkCount = Math.ceil(f.size / CHUNK_SIZE)
const threadChunkCount = Math.ceil(chunkCount/THREAD_COUNT)
console.log('大文件分片个数:'+chunkCount,'线程数:'+THREAD_COUNT)
const result = []
let finishCount = 0
return new Promise((resolve)=>{
for(let i=0;i<THREAD_COUNT;i++){
//分配线程任务
const worker = startWorker()
const start = i * threadChunkCount
let end = (i+1)*threadChunkCount
if(end>chunkCount){
end = chunkCount
}
const workerData = {f,start,end,CHUNK_SIZE}
worker.postMessage(workerData)
worker.onmessage = (e)=>{
result[i]=e.data
//主线程关掉worker
worker.terminate()
finishCount++
if(finishCount===THREAD_COUNT){
//拍扁后返回
resolve(result.flat())
//console.log(result)
}
}
worker.onerror = (e)=> {
console.log([
'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
].join(''));
};
}
})
/*
const f = file.files[0]
const chunkCount = Math.ceil(f.size / CHUNK_SIZE)
//const result = []
const result1 = []
for(let i=0;i<chunkCount;i++){
//const chunk = await createChunk(f, i, CHUNK_SIZE)
const promi = createChunk(f, i, CHUNK_SIZE)
//console.log(chunk)
//result.push(chunk)
result1.push(promi)
}
//return result
return await Promise.all(result1)
*/
}
function cfile(file){
let fileChunkData = cutFile(file)
fileChunkData.then((res)=>{
console.log(res)
})
}
function file2(){
document.getElementById('file1').addEventListener('change', function (file) {
var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
file = this.files[0],
chunkSize = 2097152, // Read in chunks of 2MB
chunks = Math.ceil(file.size / chunkSize),
currentChunk = 0,
spark = new SparkMD5.ArrayBuffer(),
fileReader = new FileReader();
fileReader.onload = function (e) {
console.log('read chunk nr', currentChunk + 1, 'of', chunks);
spark.append(e.target.result); // Append array buffer
currentChunk++;
if (currentChunk < chunks) {
loadNext();
} else {
console.log('finished loading');
console.info('computed hash', spark.end()); // Compute hash
}
};
fileReader.onerror = function () {
console.warn('oops, something went wrong.');
};
function loadNext() {
var start = currentChunk * chunkSize,
end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
}
loadNext();
});
}
</script>
</body>
</html>
参见: