以太坊智能合約編寫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之後

--

--

運用"雲端服務"加速企業的數位轉型願景
運用"雲端服務"加速企業的數位轉型願景

Written by 運用"雲端服務"加速企業的數位轉型願景

我們協助您駕馭名為"雲端運算"的怪獸,馴服它為您所用。諮詢請來信jason.kao@suros.com.tw. https://facebook.com/jason.kao.for.cloud

No responses yet