Как автоматически обновлять данные sh в реальном времени, реагировать? - PullRequest
Новая
       6

Как автоматически обновлять данные sh в реальном времени, реагировать?

0 голосов
/ 04 марта 2020

создание базового c приложения для спойтинга с использованием React в первый раз. В настоящее время функция «Сейчас играет» использует кнопку для отображения того, что воспроизводит пользователь. Как я могу изменить эту команду, чтобы она выполнялась в режиме реального времени, как при нажатии кнопки? 

<button onClick={() => this.getNowPlaying()}>
   Check Now Playing
 </button>

Любая помощь будет отличной :) Полный пример кода приведен ниже 

import React, { Component } from 'react';
import './App.css';
import Spotify from 'spotify-web-api-js';

const spotifyWebApi = new Spotify();

class App extends Component {
  constructor(){
    super();
    const params = this.getHashParams();
    this.state ={
      loggedIn: params.access_token ? true : false,
      nowPlaying: {
        name: 'Not Checked',
        image: ''
       }
     }
    if (params.access_token){
      spotifyWebApi.setAccessToken(params.access_token)
    }
  }
  getHashParams() {
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    while ( e = r.exec(q)) {
       hashParams[e[1]] = decodeURIComponent(e[2]);
    }
    return hashParams;
  }

  getNowPlaying(){
    spotifyWebApi.getMyCurrentPlaybackState()
      .then((response) => {
        this.setState({
          nowPlaying: {
            name: response.item.name,
            image: response.item.album.images[1].url
          }
        })
      }
    )
  }

  render() {
    return (
    <div className="App">
      <a href='http://localhost:8888'>
      <button>Login But With Spotify </button>
      </a>
      <div> Now Playing: { this.state.nowPlaying.name} </div>
    <div>
    <img src={ this.state.nowPlaying.image} style={{ width: 100}}/>
    </div>
    <button onClick={() => this.getNowPlaying()}>
      Check Now Playing
    </button>
    </div>

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Не уверен, что именно вы подразумеваете под "реальным временем", но вы можете установить интервал для проверки с помощью API, какую песню играет.

Что-то вроде: 

class App extends Component {
//your code ..

this.interval;

componentDidMount() {
  this.interval = setInterval(this.getNowPlaying, 500); // <- time in ms
}

stopInterval() {
  clearInterval(this.interval);
}

componentWillUnmount() {
  this.stopInterval();
}
}
0 голосов
/ 04 марта 2020

Вы можете добавить 

componentDidMount(){
   this.interval = setInterval(() => {
      // Spotify API for getting current 
      // setState if the song has changed
   }, 500);
}
componentWillUnmount() {
    clearInterval(this.interval);
  }

Я лично не большой поклонник этого подхода. Но это только начало.

...