利用IPFS构建短视频应用开发经历（七）

本系列文章是针对 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插件不加载的情况下运行。