It looks like you're new here. If you want to get involved, click one of these buttons!
web3.eth.watch({altered: web3.eth.coinbase}).changed(function(){ ///Your code goes here. });This watch function is continuously checking for changes in web3.eth.coinbase and executing its function whenever it sees changes occur. Currently it has no code to execute - lets rectify this by adding:
web3.eth.watch({altered: web3.eth.coinbase}).changed(function(){ web3.eth.coinbase.then(function(result) { document.getElementById('coinbase').innerText = result; }); });We have added an asynchronous function to retrieve our coinbase account from the client(the account that we use to mine blocks and send transaction). Once the promise has been fulfilled and it has returned the 'result' (our coinbase address) we can modify our web page to display our coinbase account number. This is pretty cool, but not particularly interesting as our coinbase account doesnt really change that much - lets use another binding - web3.eth.balanceAt. This Asynchronous function returns the balance in ether at a particular address. We will use it to display our balance at our coinbase address.
web3.eth.watch({altered: web3.eth.coinbase}).changed(function(){ web3.eth.coinbase.then(function(result) { document.getElementById('coinbase').innerText = result; }); web3.eth.balanceAt(web3.eth.coinbase).then(function(result){ document.getElementById('balance').innerText = result; }); });Take a look at the web page in the browser - if you have anything higher than a zero balance you will likely see some thing like this '0x678'. This is because the browser returns the account balance as a hexadecimal value - dont worry we have a built in function web3.toDecimal to convert it to a decimal:
document.getElementById('balance').innerText = web3.toDecimal(result);Now your webpage should look more like this:
web3.eth.watch().changed(function(){ ///Your code goes here. });We are going to use this watch object to monitor the blockchain and update our web page with information on the latest block. when fulfilled, Web3.eth.block returns a JSON object with several parameters containing all the relevant information regarding the block. We are going to take two of the most useful 'hash' and 'timestamp' which give you the time of the latest block mined and the hash of the block:
web3.eth.watch().changed(function(){ web3.eth.block(web3.eth.number).then(function(result){ document.getElementById('latestBlock').innerText = web3.eth.number._result; document.getElementById('latestBlockHash').innerText = result.hash; document.getElementById('latestBlockTimestamp').innerText = Date(result.timestamp); }) });Execute when the 'block' promise is fulfilled are three lines of code. The first takes the number of the block and inserts it into the webpage. The second and third pull parameters from the JSON object 'result' and modify the webpage with them (we also use the Object method Date() to convert the timestamp from UTC to human readable date). Reload your webpage and mine a few more blocks - you should see the values update in real time.
def init(): self.storage[0] = 'Hello' self.storage[1] = 'World' self.storage[2] = 'Cleese' self.storage[3] = 'Chapman' self.storage[4] = 'Idle' self.storage[5] = 'Palin' self.storage[6] = 'Gilliam' self.storage[8] = 'Jones'Copy the above into the transact pane and send it to the blockchain in a transaction - just like you have done in previous . While it is in the pending pane grab the contracts address as you will need ot add it to your javascript like so:
var contractAddress = "0x52ae0988e11527678c3a75f89e487efffb101a6d";We are going to use this and the function web3.eth.storageAt() to retreive our contracts data storage. Rather than create another watch object we can simply make an addition to the second watch which is monitoring the current block number, knowing as we do that the contracts storage cannot change without a new block being created.
web3.eth.watch({altered: web3.eth.number}).changed(function(){ web3.eth.block(web3.eth.number).then(function(result){ document.getElementById('latestBlock').innerText = web3.eth.number._result; document.getElementById('latestBlockHash').innerText = result.hash; document.getElementById('latestBlockTimestamp').innerText = Date(result.timestamp); }) web3.eth.storageAt(contractAddress).then(function(result) { ///your code here }); });You should be pretty comfortable with how this works by now, we have created a promise which returns a JSON object when the promise is fulfilled. Previously we have dealt with promises which return either a single value, or a JSON object which has the same properties (hash, timestamp, etc...) each time. This time is a little different - here the JSON object is a list of key values which can be different for every contract - you cannot rely on knowing the parameters before writing your javascript. I'm not going to go into how you should use javascript to handle JSON objects like this, suffice to say that there is plenty of information on this available on the internet. In this example we are simply going to take the JSON object returned by the promise and stringify it:
... web3.eth.storageAt(contractAddress).then(function(result) { document.getElementById('contractString').innerText = JSON.stringify(result); }); ...This should output to your front end:
web3.eth.storageAt(contractAddress).then(function(result) { document.getElementById('contractString').innerText = JSON.stringify(result); document.getElementById('favouritePython').innerText = web3.toAscii(result['0x03']); });This completes our webpage. If you wish to play round with the other javascript bindings a complete list can be found here.
Comments
Also for some reason, I got stuck at .storageAt(), it doesn't seem to be pulling out contract code? (Or maybe I didn't use enough gas, or maybe I did something else weird?)