iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 15
0

前言

透過網路的連結來發送請求、同步資料不只是網頁前端需要,對行動應用程式來說也是不可或缺。從這邊就可以看出 React Native 的巧思與精神,如何讓學習成本降到最低,輕鬆地讓網頁開發者寫出行動應用程式的網路請求。

HTTP

iOS 的開發者大概很少不知道 AFNetworking 這樣的一個 Networking 套件,但 JavaScript 的開發者應該大多都不知道。JavaScript 的開發者現在所熟悉的是 fetch 這樣的 API,而 React Native 就實作了一模一樣的 API 接口,所以可以直接在 React Native 環境中寫:

async function getMoviesFromApi() {
  try {
    const response = await fetch('https://facebook.github.io/react-native/movies.json');
    const responseJson = await response.json();
    return responseJson.movies;
  } catch(error) {
    console.error(error);
  }
}

像上面這樣使用 ES2017 async/await 也是沒關係的。

第三方套件

除了 fetch 之外,目前大家還可能會使用的 Universal HTTP Client,例如:axiossuperagent 等等,大多是基於 XMLHttpRequest 這個古老且低階的 API 來實作的,而它也被 React Native 實作了一個跨行動平台的版本。所以儘管的直接使用它們吧!

SSL

要注意,iOS 預設會擋掉沒有使用 SSL 加密的請求,雖然可以在 Info.plist 加上例外的 Domain:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

不過不合理的可能會影響 Apple 上架的 Review,所以基於安全以及這個理由,應該盡量的使用 HTTPS。

WebSocket

React Native 也內建支援 WebSocket,可以直接在環境中這樣去連接:

const ws = new WebSocket('ws://host.com/path');

當然能無痛使用 socket.io 更是其一大優勢:

import socketio from 'socket.io-client';

const socket = socketio('http://localhost:3000');

A simple messaging app with React Native and Socket.io 這篇文章以及它的 Repo 提供了很好的範例跟介紹,有興趣的讀者可以參閱。

WebRTC

除了 WebSocket 以外,還有另一個也很重要的 W3C 標準 WebRTC,其中包括了:

  • MediaStream:影音的串流
  • RTCPeerConnection:點對點的連接
  • Peer-to-peer Data:點對點的資料傳輸

尤其適合處理視訊串流、遠端會議等等功能,也是近年來瀏覽器的殺手功能之一。

react-native-webrtc 這個社群的專案良好的實作了跨 iOS、Android 的 WebRTC API,讓 React Native 的專案也能支援這個標準。

因此 rtc-everywhere Readme 所列的支援環境又多了 React Native,如此以來就能用 WebRTC 達成瀏覽器、Node、行動裝置之間的 P2P 溝通。

這個功能我想未來被納入 React Native 的核心應該也只是時間問題。

結語

React Native 實作一樣的標準介面帶給開發者低學習成本、一致的開發成本、跨平台可重用的程式碼,這是目前為止最令人驚豔的部分,不必為了 Call API 各寫一份 Objective-C 跟 Java 的程式碼,在開發上有極大的幫助。


上一篇
Day 14:編輯的藝術 - TextInput 與 Keyboard
下一篇
Day 16:在 React Native 中運用 Storage
系列文
使用 Modern Web 技術來打造 Native App30

尚未有邦友留言

立即登入留言