2

I'm new to the blockchain and the DAPP world. I've been playing a little with the toy example on the truffle website (which uses web3js) and created my own DAPP that interacts with a demo token (on ropsten), an influx db (through GET requests), and the etherscan API.

I put it online and tried a little bit, it works wonders but if I open it in my web browser and somebody else opens it in theirs, when clicking on buttons to, for example, load my balance and display it, I see it correctly but also the other person(s) with the DAPP open see the balance loaded. How is this possible, and how can I fix it?

I am using fixed addresses to read balances, and through etherscan check transactions and show them through D3.

Thanks!

Masiar
  • 20,450
  • 31
  • 97
  • 140

2 Answers2

1

As mentioned in the comments, the issue you're seeing is indeed caused by BrowserSync. If you want to get off lite-server, you can switch over to a simple Node HTTP server:

Using the answer provided here:

  1. Add connect and serve-static packages to the project
  2. Add server.js to the src directory (copied below).
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
    console.log('Server running on 8080...');
});
  1. Modify "dev" section of package.json to node src/server.js

In addition to those steps, I had to copy over build/contracts/Adoption.json over to the src directory as well. There are better ways to do this, but I just did it this way for speed.

Run npm run dev and reload your browser (note, the linked answer sets up the server on port 8080 instead of 3000 from the tutorial).

It's not 100% perfect at this point (ie, after successful adoption, you have to reload the page to see it change to "Success"). The code can be improved upon to handle those situations better.

Note that even in multiple tabs/windows, you are still sharing the same MetaMask plugin. The activity with the contract is still shared unless you're manually switching accounts when you switch between browser windows. The other (better) option is to run two different browsers (I used one Chrome and one Firefox) and setup MetaMask to use different accounts in each.

Adam Kipnis
  • 10,175
  • 10
  • 35
  • 48
  • Thank you for your answer! I either didn't really get the answer or I explained myself in a bad way in my question. My problem is something more practical: I literally have two machines, machine A and machine B with the DAPP loaded, and when some JavaScript code is executed on machine A (say, showing a graph, show the balance, etc.) the callback is executed on *both* the machines, so both machine A and machine B load the result (even if I clicked nothing on machine B). I was wondering how this was possible. – Masiar Apr 05 '18 at 06:52
  • Ah. I obviously completely misunderstood your question then. Sorry about that. It's hard to say for sure what's going on without looking at the client code. I can unbox their example and take a look (but I don't know what changes you've made, if any). The clients may be using the same address to retrieve data from the contract, or they may both have an identical event watcher setup to update the UI. – Adam Kipnis Apr 05 '18 at 16:49
  • And I'm realizing you're talking about a completely different client than what is packaged with the tutorial. You can have a contract that emits events and setup your clients identically to respond to those events. However, a `constant` contract call (ie, balance retrieval) cannot emit events (emitting an event can only be done in a transaction). I don't think I can provide more help without a more specific issue and code. But, it doesn't seem like this has anything to do with Truffle or smart contracts and is an issue with your client. – Adam Kipnis Apr 05 '18 at 17:24
  • If you feel like taking a look at what's going on, you can download the pet shop example tutorial I linked in my question. If you run it and open it in two different tabs you will see even the scroll event is mapped to the clients connected (you scroll on one tab of the same page and the other tab scrolls as well). So it's not my changes rather something packed within that example. Could it be something related to `lite-server`? – Masiar Apr 06 '18 at 06:53
  • The issue seems to be related to `lite-server`, more specifically to `Browsersync`, which automatically does that (for testing purposes). I have no idea if 1) I can remove it from the whole thing 2) I can run the dapp without the server running in the background... – Masiar Apr 06 '18 at 12:09
  • Updated answer based on comments. – Adam Kipnis Apr 06 '18 at 19:07
  • Right, in the end I solved it like that with a different solution. I will mark yours as correct but I'll post mine as well! :) Thank you once again – Masiar Apr 09 '18 at 07:20
0

As showed by @Adam Kipnis serving the index.html as static file solves the issue. Opening index.html right from the file system blocks metamask from injecting web3, so the only thing to do would be creating a backend that statically serves the files. Adam's solution works wonders, I created another solution without the need to copy the contracts over to src/ by just setting that folder as the static one Express should get files from.

const express = require('express')
const app = express()
app.use(express.static(__dirname + '/src'));


app.get('/', function(req, res) {
  res.sendFile(__dirname+'/src/index.html');
});

app.listen(3000, () => console.log('Up!'))
Masiar
  • 20,450
  • 31
  • 97
  • 140