本系列文章是针对 https://blog.csdn.net/weixin_43668031/article/details/83962959 内容的实现所编写的。开发经历包括思考过程、重构和推翻重来。
现在开始制作前端,我这里采用VUE3来做前端,既方便又美观。
媒体文件(图片、视频文件),打算采用gateway的方式来访问,就算ipfs节点跑在本地 localhost,也采用http://127.0.0.1/ipfs/CID 的这种方式来获取。
https://ipfs.github.io/public-gateway-checker/
这个是公共网关,其中我下载了 https://ipfs.github.io/public-gateway-checker/gateways.json 文件包含进我的项目,这样可以不需要连接到 ipfs.github.io 这个域名进行获取资源。
我还加入了3个本地网关,分别是127.0.0.1 当前访问的域名、当前访问域名的8080端口,这个端口是ipfs节点默认的网关端口。
//先get一下我下载下来的公共网关列表
Axios.get('./gateways.json').then((res) =>{
//添加3个本地网关
let gateways = res.data;
const host1 = window.location.host;
const host2 = document.domain;
gateways = [
"http://127.0.0.1:8080/ipfs/:hash",
"http://"+host1+"/ipfs/:hash",
"http://"+host2+":8080/ipfs/:hash"
].concat(gateways);
//定义用于测试的hash和文本
const hashToTest = 'Qmaisz6NMhDB51cCvNWa1GMS7LU1pAxdF4Ld6Ft9kZEP2a';
const hashString = 'Hello from IPFS Gateway Checker';
//定义在线的网关列表
const gatewayOnline = [];
gateways.forEach((value) =>{
//拼接hash到网关url里
const gatewayAndHash = value.replace(':hash', hashToTest);
Axios.get(gatewayAndHash,{timeout:5000}).then((res)=>{
const matched = res.data.trim() === hashString.trim();
if(matched){
//重新把hash替换成占位符
const url = res.config.url.replace(hashToTest, ':hash');
//把在线的网关添加到列表
gatewayOnline.push(url);
//把第一个返回的网关记录到全局变量中。
if(this.$store.state.gateway=='')this.$store.commit('setGateWay', url);
}
}).catch((err)=>{
//捕获到异常,无需处理
})
});
})
运行后 this.$store.state.gateway 这个全局变量中就有了一个最快返回的网关,数组gatewayOnline包含检测结果为在线的网关列表,如果程序判断出来的最快的网关用户觉得速度不行,还可以切换这里的网关。
在页面设计时遇到一些问题:
1.大部分界面还是采用V1的布局,会修改一部分V1中不合理和迭代布局。
2.弹幕插件没有找到好的,因为目前在网路上能找到的所有弹幕插件均采用C-S模式,后端采用传统的中心化服务器,没有找到合适的能在eth网路上运用的弹幕插件。
3.视频轨(视频清晰度)切换用传统的“标清”、“高清”、“超清”并不合适,就算采用“720P”这样的标示也有不妥的地方,目前还没想好如何标示。
4.关于分享,URL生成废弃V1的方式,采用操作ipfs对象,将单个视频信息写入ipfs对象,重新打包ipfs对象,最后生成一个新的CID+公共网关来分享给别人,优势:在不借助第三方短连接的情况下能将路径缩短到一个CID(46字符),尽管如此还是太长。缺点:把当前状态的合约对象传到ipfs上,意味着未来合约数据更新后,分享出去的那个页面不会更新。
5.由于没有大量前端经验、虽然能理解vue全局对象、浏览器sessionStorage和localStorage,但还是无法确定我应该运用哪一种?
6.关于浏览器插件,V1使用ipfs和eth的浏览器插件来实现和ipfs网络、eth网络的通信,这会限制用户的使用和推广。我必须采用js来完成这一切,但是功能可能会有所限制。eth的转账和写入可以通过插件来完成,但是eth的读取操作,如果也需要插件会比较麻烦,因此eth读取操作可以在eth插件不加载的情况下运行。