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部分，以确保至少Publish / Subscribe功能正常运行，即已将其设置好达到预期的水平。

因此，您可以在单独的文件中尝试以下操作：

//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的开发者倡导者

使用Pusher在PWA中无法使用实时侦听器

1 个答案: