本系列文章是針對 https://blog.csdn.net/weixin_43668031/article/details/83962959 內容的實現所編寫的。開發經歷包括思考過程、重構和推翻重來。
已經完成了對最快的ipfs網關進行檢測，接下去需要本地新建一個ipfs節點和一個eth節點。
eth節點可以使用全節點方式，使用bin文件啓動一個全節點進程，去同步日誌數據，達到數據完整性的目的，當然在瀏覽器端這樣做肯定不方便，因此我調用web3接口，並且檢測瀏覽器有沒有加載MetaMask插件，如果加載了插件就是用插件提供的eth鏈路，如果沒有安裝插件，是用公開的ethrpcjson服務，當然這一點，連接怎麼樣的eth鏈路用戶是可以自己選擇的。
我事先定義了一些文件，諸如前文中的gateways.conf，這裏我多定義了2個靜態文件config.js和ABI，
https://github.com/bill080307/douyinWithEth/blob/8c489f3f9945e42d3650a00c7cabd477c1864589/public/config.js
https://github.com/bill080307/douyinWithEth/blob/8c489f3f9945e42d3650a00c7cabd477c1864589/public/videoShare_abi.js
config.js 文件裏的數據我還沒有想好是否真正使用js格式，或者使用json格式的配置文件更適合呢？有可能未來會來回變動。
let web3js;
//檢查是否開啓的插件
if (typeof web3 !== 'undefined') {
//使用插件的ethAPI
web3js = new Web3(web3.currentProvider);
} else {
//使用外置的ethAPI
web3js = new Web3(new Web3.providers.HttpProvider(config["network"][0]["httpApi"]));
}
如果瀏覽器加載插件，檢查web3這個變量就可以了，因爲加載插件後在瀏覽器對象windows.web3, web3js 是web3類的一個實例。
//定義合約
const videoShare = new web3js.eth.Contract(videoShareAbi, config["network"][0]["contractAddress"]);
this.$store.commit('setVideoShare', videoShare);
//檢測是否登陸
web3js.eth.getAccounts((error, result) => {
if (result.length > 0) {
this.$store.commit('setUserAccount', result[0]);
this.userAccount.address=result[0];
//獲取用戶信息
videoShare.methods.getUserInfo(this.userAccount.address).call().then((res) => {
console.log(res)
if(res.nickname!==""){
this.userAccount.nickname=res.nickname;
} else {
this.userAccount.nickname=addressab(this.userAccount.address);
}
console.log(res);
})
}
})
變量videoShare是一個合約實例，並儲存在全局變量中，在eth網絡這邊，也有幾種狀態：
1.未連接到eth網絡中
2.僅僅能獲取數據，連接到了eth網絡，但是未登錄，有可能是通過外部公共jsonrpc連入網絡的，也有可能是沒有對賬號解鎖，或者沒有新建賬號過，讀取不到用戶。
3.已經有賬號了，而且已經解鎖狀態了，能獲取到賬號地址。
這幾種狀態都有不同的特徵，不同的權限，這裏需要注意一下，後面會用得到的。
我定義了一些助手函數，比如addressab，我覺得eth地址太長了，中間可以用…去縮短一些，這樣看上去美觀一點。在標示用戶的時候可以使用暱稱，如果用戶沒有設置暱稱可以用這個地址縮寫來表示。
複製編譯好的ipfs.js文件到public目錄，然後在index.html引入。
創建一個ipfs節點：app.vue
const ipfsNode = new window.Ipfs({
// TODO fix issue with persistance
repo: '/ipfs-' + Math.random(),
config: {
Addresses: {
Swarm: [
'/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star/'
]
}
},
EXPERIMENTAL: {
pubsub: true
}
});
其中repo: '/ipfs-' + Math.random(),每次都需要新開一個空間，否則會有權限錯誤，
'/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star/'是一個libp2p的連接節點，通過他可以連接到其他ipfs節點。
擴展屬性裏我加了EXPERIMENTAL: {pubsub: true}初期暫時還用不到，計劃在以下場景裏使用：
1 觀看一個視頻時，可以統計有多少人和你一起在看。
2 觀看直播(視頻)時，發送實時彈幕
接下去就是一個檢測，每10秒，輸出一下我當前的狀態
ipfsNode.once('ready', () => {
console.log("ipfs node ready.");
//每隔10秒輸出一下連上的ipfs節點的數量
setInterval(() => {
ipfsNode.swarm.peers((err, peerInfos) => {
if (err) {
throw err
}
if (peerInfos.length > 0) {
console.log(peerInfos.length+" ipfs node Connect.");
}
})
}, 10000)
})
這是控制檯，啓動節點了，並一直在打印有多少個節點與我建立了連接。可以看到節點數量穩定在35-36個左右，我相信未來會有更多的節點連入，當ipfs的網絡更加健壯。
這是網絡的信息，可以看到我連接了一個libp2p節點，並通過他我連接到了更多的節點。正在發現並連接到更多的節點。
挖坑：
我一開始採用了nodejs裏的IPFS，通過npm install ipfs --save 來完成安裝，但是沒有跑通。由於我對nodejs並不熟悉，不想再這個地方花太多時間，這裏採用了調用別人編譯好的ipfs.js足足達到了可怕的2.4M，未來我一定要打好基礎，重新使用npm的方式。