以太坊智能合約編寫part4
智能合約的事件(Event)通知
一般來說系統或程式在運作的過程中,一定有我們需要特別知道發生的事件(Event)。智能合約一樣也有這個功能,它可以與我們的其他程式或系統來整合。接下來,我們將繼續針對我們的資產智能合約篇寫事件的函數。
定義我們想知道的事件
我們想要知道合約內的任何資料異動,所以新增如下的函數。因為有合約中有三個資料屬性,所以在assetEvent把它全部加進去。
接下來再設定資產清單中新增一行事件通知(如下圖)。
重新編譯與部署智能合約。由於我們重新佈署了編譯與部署智能合約,以下三個參數我們需要在前端的index.html進行更新。
- index.html檔案中的myAccountNumber
- index.html檔案中的myContractAddress
- 智能合約的ABI參數
加入一個Event Listener
在我們index.html的網頁中加入一個listener。這樣當有資料更新時我們不用在被動的更新網頁內容,就能主動的收到通知。為此我們需要網頁中加入一個圖示(如下圖)。
並在如下圖的index.html加上這兩行。
在這裡我們使用websocket來做為訊息的推播通知。我們需要將我們的index.html從HttpProvider改成WebsocketProvider。請更改成如下的代碼,另外需要注意我們ws endpoint是不是指向Ganache。
再來,我們將加入以下代碼以從我們的智能合約中監聽資產事件。 事件發生時,監聽器將呼叫callback函數。 這個callback函數將隱藏在轉圈圈的圖示,然後顯示來自事件的資產資訊。 在 index.html 中呼叫 getasset 之後加上如下代碼。
當資產訊息更新時,我們希望在網頁上顯示轉圈圈圖示。 此圖標會一直會顯示到assetEvent 被觸發,然後它就會被隱藏。 將以下代碼加到 index.html 中的按鈕點擊事件處理程序。
預設情況下,我們希望隱藏轉圈圈圖示。 將以下規則添加到 main.css 檔案的底部以設定這個預設行為。
驗證
在合約內的資料一開始如下圖中顯示,之後我們輸入一些update的資訊
update之後