如題 我用React.js 寫,不過觀念是相通
componentDidMount
是載入component後會執行的functiongetAPI
是從網址抓取資料下來給component使用
而我想做的事情是讓componentDidMount
每100毫秒就執行getAPI
這樣就能做出及時更新資料的效果了
那我想問的是說 我這樣一直重複執行抓取API資料
會影響效能嗎?
componentDidMount() {
setInterval(this.getAPi, 100);
}
getAPI() {
axios
.get(
`http://ptx.transportdata.tw/MOTC/v2/Bike/Availability/${this.state
.city}`
)
.then(response => {
console.log(response);
this.setState({ information: response.data });
console.log(this.state.information);
})
.catch(error => {
console.log(error);
});
}
時間拉太短會,100毫秒覺得有點太短了,
可以把更新時間拉長一點,或使用其他技術,
效能可以分 Client 端和 Server 端,
Client 端可能還好,Server 端用的人越多負擔越大,
小弟我現如果需要做即時更新功能,會用 WebSocket 來做,
推薦一個封裝 WebSocket 的套件 SignalR
http://blog.darkthread.net/post-2013-12-05-signalr-transport-benchmark-bidirection.aspx
WebSocket 目前只有現代瀏覽器支援,
SignalR 很厲害的一點,如果遇到不支援 WebSocket 的瀏覽器或伺服器會自動向下相容其他技術,WebSocket
-> Server Sent Event
-> Forever Frame
-> Long Polling
SignalR WebSocket 啟動條件:
在你繼續寫下去之前
請先看一下資料使用注意事項
其中第一條已經寫得很明白
「加值業者務必自建後台」
練習寫程式抓資料是一回事
如果真的要寫成產品,就得多考慮些事情
你如果真的用100毫秒的時隔去 call API
別說因為流量太大被停權
說不定不用兩小時就被當成駭客或是DDOS攻擊
被擋在門外了