How do I subscribe to contract events in Web3.js 4.0?

Question

I have deployed a contract factory, Contract.sol, which emits the address of every contract it deploys.

I would like to subscribe to these events in my JS application.

It seems that the interface has changed in the new version of web3.js, so that my attempts to subscribe aren't working.

What's the proper way to sign up to the events emitted below?

event contractDeployed(address contractAddress);
...
emit contractDeployed(newContract);

Answer 1

This is from the doc web3js, there is no callback function anymore in the {EventName} or allEvents function.

const subscription = await myContract.events.MyEvent({
  filter: {myIndexedParam: [20,23], myOtherIndexedParam: '0x123456789...'}, // Using an array means OR: e.g. 20 or 23
  fromBlock: 0
});

subscription.on("connected", function(subscriptionId){
  console.log(subscriptionId);
});

subscription.on('data', function(event){
  console.log(event); // same results as the optional callback above
});

subscription.on('changed', function(event){
  // remove event from local database
})

subscription.on('error', function(error, receipt) { // If the transaction was rejected by the network with a receipt, the second parameter will be the receipt.
  ...
});

// event output example
> {
  returnValues: {
      myIndexedParam: 20,
      myOtherIndexedParam: '0x123456789...',
      myNonIndexParam: 'My String'
  },
  raw: {
      data: '0x7f9fade1c0d57a7af66ab4ead79fade1c0d57a7af66ab4ead7c2c2eb7b11a91385',
      topics: ['0xfd43ade1c09fade1c0d57a7af66ab4ead7c2c2eb7b11a91ffdd57a7af66ab4ead7', '0x7f9fade1c0d57a7af66ab4ead79fade1c0d57a7af66ab4ead7c2c2eb7b11a91385']
  },
  event: 'MyEvent',
  signature: '0xfd43ade1c09fade1c0d57a7af66ab4ead7c2c2eb7b11a91ffdd57a7af66ab4ead7',
  logIndex: 0,
  transactionIndex: 0,
  transactionHash: '0x7f9fade1c0d57a7af66ab4ead79fade1c0d57a7af66ab4ead7c2c2eb7b11a91385',
  blockHash: '0xfd43ade1c09fade1c0d57a7af66ab4ead7c2c2eb7b11a91ffdd57a7af66ab4ead7',
  blockNumber: 1234,
  address: '0xde0B295669a9FD93d5F28D9Ec85E40f4cb697BAe'
}