Unable to subscribe to web3js event due to provider - websocket

Question

I'm trying to subscribe to an event so I can have it appear in my terminal.
Firstly, I do this to have the deployed contract stored in the app variable.
ChainList.deployed().then(function(instance){app=instance})
Then I do,
app.LogSellArticle({filter:{}, fromBlock:0})
.on('data', event => console.log(event))
.on('changed', changed => console.log(changed))
.on('error', err => console.log(err))
.on('connected', str => console.log(str))
which gives me this output,
EventEmitter {
_events: [Object: null prototype] {
data: [Function (anonymous)],
changed: [Function (anonymous)],
error: [Function (anonymous)],
connected: [Function (anonymous)]
},
_eventsCount: 4,
_maxListeners: undefined,
[Symbol(kCapture)]: false
}
truffle(ganache)> Error: The current provider doesn't support subscriptions: HttpProvider
at Timeout._onTimeout (C:\Users\Yiannis\AppData\Roaming\npm\node_modules\truffle\build\webpack:\node_modules\web3-eth\node_modules\web3-core-subscriptions\lib\subscription.js:176:1)
at listOnTimeout (node:internal/timers:559:17)
at processTimers (node:internal/timers:502:7)
I'm not using HttpProvider, I'm using websockets and I also have them enabled in my truffle-config.js. I am using Ganache as a test node.
truffle-config.js:
networks: {
ganache: {
host: "localhost", // Localhost (default: none)
port: 7545, // Standard Ethereum port (default: none)
network_id: "*", // Any network (default: none)
websocket: true // Enable EventEmitter interface for web3 (default: false)
},
},
// Set default mocha options here, use special reporters etc.
mocha: {
// timeout: 100000
},
// Configure your compilers
compilers: {
solc: {
version: "0.8.11", // Fetch exact version from solc-bin (default: truffle's version)
// docker: true, // Use "0.5.1" you've installed locally with docker (default: false)
settings: { // See the solidity docs for advice about optimization and evmVersion
optimizer: {
enabled: true,
runs: 200
},
// evmVersion: "byzantium"
}
}
},
};
ChainList.sol
//SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.11;
contract ChainList{
//state vars
address seller;
string name;
string description;
uint256 price;
//events
event LogSellArticle(
address indexed _seller,
string _name,
uint256 _price
);
//sell an article
function sellArticle(string memory _name, string memory _desc, uint256 _price) public{
seller = msg.sender;
name = _name;
description = _desc;
price = _price;
emit LogSellArticle(seller, name, price);
}
//get an article
function getArticle() public view returns (
address _seller,
string memory _name,
string memory _desc,
uint256 _price
){
return(seller, name, description, price);
}
}
app.js
App = {
web3Provider: null,
contracts: {},
account: 0x0,
init: function() {
return App.initWeb3();
},
initWeb3: function() {
//initialise web3
if(typeof web3 != 'undefined'){
App.web3Provider = web3.currentProvider;
}else{
//create a new provider and plug it directly into our local node
App.web3Provider = new Web3.providers.WebsocketProvider('ws://localhost:7545');
}
web3 = new Web3(App.web3Provider);
App.displayAccountInfo();
return App.initContract();
},
displayAccountInfo: function(){
web3.eth.getCoinbase(function(err, account){
if(err == null){
App.account = account;
$('#account').text(account);
web3.eth.getBalance(account, function(err, balance){
if(err == null){
$('#accountBalance').text(web3.fromWei(balance, "ether") + ' ETH');
}
})
}
})
},
initContract: function() {
$.getJSON('ChainList.json', function(chainListArtifact){
//get the contract artifact file and use it to instantiate a truffle contract abstraction
App.contracts.ChainList = TruffleContract(chainListArtifact);
//set the provider for our contract
App.contracts.ChainList.setProvider(App.web3Provider);
//retrieve article from contract
return App.reloadArticles();
})
},
reloadArticles: function(){
//refresh account information because the balance might have changed
App.displayAccountInfo();
//retrieve article placeholder and clear it
$('#articlesRow').empty();
App.contracts.ChainList.deployed().then(function(instance){
return instance.getArticle();
}).then(function(article){
if(article[0] == 0x0){
//no article to display
return;
}
//retrieve the article template and fill it with data
var articleTemplate = $('#articleTemplate');
articleTemplate.find('.panel-title').text(article[1]);
articleTemplate.find('.article-description').text(article[2]);
articleTemplate.find('.article-price').text(web3.fromWei(article[3] , "ether"));
var seller = article[0];
if(seller == App.account){
seller = "You";
}
articleTemplate.find('.article-seller').text(seller);
//add this article
$('#articlesRow').append(articleTemplate.html());
}).catch(function(err){
console.error(err.message);
})
},
sellArticle: function(){
//retrieve detail of article
var _article_name = $('#article_name').val();
var _description = $('#article_description').val();
var _price = web3.toWei(parseFloat($('#article_price').val() || 0,), "ether" );
if((_article_name.trim() == '') || (_price == 0)){
//nothing to sell
return false;
}
App.contracts.ChainList.deployed().then(function(instance){
return instance.sellArticle(_article_name,_description,_price, {
from: App.account,
gas: 500000
}).then(function(result){
App.reloadArticles();
}).catch(function(err){
console.error(err);
})
})
}
};
$(function() {
$(window).load(function() {
App.init();
});
});