Слушатель в реальном времени не работает в PWA с Pusher - PullRequest
Новая
       9

Слушатель в реальном времени не работает в PWA с Pusher

0 голосов
/ 07 сентября 2018

Я пытаюсь построить мой первый 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);

Он должен воссоздать состояние, и значения будут обновлены.

Итак, я пришел к выводу, что что-то не так с кодом моего сервера.Я хочу разместить приложение на героку.Я пытался написать разные варианты серверов, но ни один из них, похоже, не работает.Однако я не уверен на 100%, что проблема в моем сервере.Можете ли вы взглянуть на мой код сервера?Вот мой файл server.js и ссылка на проект на github на случай, если проблема не столь очевидна.Пушер выглядит как крутой техник.Я хочу продолжать использовать его в своих будущих проектах, просто нужно понять, как. 

// 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 Ответ

0 голосов
/ 07 сентября 2018

Хороший способ определить, заключается ли проблема в вашем сервере или в функциональности 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

...