使用Pusher，实时监听器在PWA中不起作用

Question

我正在努力建立my first PWA。我设法做it，然而，由于某种原因推动器功能不起作用。

我现在正在调试这几个小时，我无法让它工作。我已经尝试过多次重建应用程序了。

所以，我订阅了这个

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

然后我有这个功能

  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)
      })
  }

我每隔10秒就调用一次这个函数

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完美地处理它。我在开发控制台中看到200。

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);
})

出于某种原因，这段神奇的代码不起作用。

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);

它应该重新创建状态，并且值将更新。

所以，我得出的结论是我的服务器代码有问题。我想在heroku上托管应用程序。我尝试编写不同版本的服务器，但它们似乎都没有用。但是，我不是100％确定我的服务器是问题。你能看看我的服务器代码吗？这是我的server.js文件和a link到github上的项目，以防问题不是那么明显。 Pusher看起来像一个很酷的技术。我想继续在我未来的项目中使用它，只需要了解如何。

// 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)
    }
  })

Answer 1

区分问题是否在您的服务器或Pusher的功能中的一个好方法是分别使用虚拟数据测试代码的Pusher部分，以确保至少发布/订阅功能正常工作，即您已按预期进行设置。

所以你可以在单独的文件中尝试以下内容：

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


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

假设您已正确初始化Pusher SDK，这应该可行，如果是这样，那么Pusher方面的情况就好了，您可以集中精力找出服务器中的内容导致应用无法正常工作。

顺便说一句，在您现有的代码中，您可能想要改变：

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

至

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

希望这可以帮助。

P.S我是Ably Realtime的开发者倡导者