Real-time listener doesn't work in PWA with Pusher

I'm trying to build my first PWA. I managed to do it, however, pushers functionality for some reason doesn't work.

I was debugging this for a few hours now and I can't make it work. I already tried rebuilding the app several times.

So, I'm subscribing to this

this.prices = this.pusher.subscribe('coin-prices');


then I have this function

sendPricePusher(data)
console.log('Sending data from React')
console.log(data)
axios.post('/prices/new',
prices: data
)
.then(response =>
console.log(response)
)
.catch(error =>
console.log(error)
)



I'm calling the function above every 10 seconds from my

componentDidMount()
setInterval(() =>
axios.get('https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,LTC&tsyms=USD')
.then(response =>
this.sendPricePusher(response.data)
)
.catch(error =>
console.log(error)
)
, 10000)


NodeJs handles it perfectly. I see 200 in dev console.

app.post('/prices/new', (req, res) =>

// Trigger the 'prices' event to the 'coin-prices' channel
pusher.trigger( 'coin-prices', 'prices',
prices: req.body.prices
);

res.sendStatus(200);
)


For some reason this magic piece of code doesn't work.

this.prices.bind('prices', price =>
this.setState( btcprice: price.prices.BTC.USD );
this.setState( ethprice: price.prices.ETH.USD );
this.setState( ltcprice: price.prices.LTC.USD );
, this);


It should recreate the state and the values will be updated.

So, I came to the conclusion that something is wrong with my server code. I want to host the app on heroku. I tried to write different variations of servers but none of them seem to work. However, I'm not 100% sure that my server is the problem. Can you please have a look at my server code? Here's my server.js file and a link to the project on github in case the problem is not so obvious. Pusher seems like a cool tech. I want to keep using it in my future projects just need to understand how.

// server.js
const express = require('express')
const path = require('path')
const bodyParser = require('body-parser')
const app = express()
const Pusher = require('pusher')
const HTTP_PORT = process.env.PORT || 5000;

//initialize Pusher with your appId, key, secret and cluster
const pusher = new Pusher(
appId: '593364',
key: '8d30ce41f530c3ebe6b0',
secret: '8598161f533c653455be',
cluster: 'eu',
encrypted: true
)

// Body parser middleware
app.use(bodyParser.json())
app.use(bodyParser.urlencoded( extended: false ))
app.use(express.static("build"));

// CORS middleware
app.use((req, res, next) =>
// Website you wish to allow to connect
res.setHeader('Access-Control-Allow-Origin', '*')
// Request methods you wish to allow
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
// Request headers you wish to allow
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')
// Set to true if you need the website to include cookies in the requests sent
// to the API (e.g. in case you use sessions)
res.setHeader('Access-Control-Allow-Credentials', true)
// Pass to next layer of middleware
next()
)

// API route in which the price information will be sent to from the clientside
app.post('/prices/new', (req, res) =>
// Trigger the 'prices' event to the 'coin-prices' channel
pusher.trigger( 'coin-prices', 'prices',
prices: req.body.prices
);
res.sendStatus(200);
)


app.use((req, res) =>
res.sendFile(path.join(__dirname + "/build/index.html"));
);

app.listen(HTTP_PORT, err =>
if (err)
console.error(err)
else
console.log('Server runs on ' + HTTP_PORT)

)


1 Answer
1

A good way to distinguish if the problem is in your server or Pusher's functionality is to test the Pusher part of the code separately with dummy data to ensure that at least the Publish/Subscribe functionality is working fine, i.e you have set it up as expected.

So you could just try the following in separate files:

//publisher
pusher.trigger( 'coin-prices', 'prices',
prices: dummyprices
);


//subscriber
var prices = pusher.subscribe('coin-prices');
prices.bind('prices', ( price ) =>
console.log(price);
)


Assuming you have initialized the Pusher SDKs correctly, this should work, if so, then the Pusher side of things is just fine and you can concentrate on finding out what in your server is causing the app to not work.

btw, in your existing code, you might wanna change:

this.prices.bind('prices', price => )


to

this.prices.bind('prices', ( price ) => )


Hope this helps.

P.S I'm a Developer Advocate for Ably Realtime

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.