メインコンテンツにスキップ

React Nativeでの使用方法

注記

React Nativeは、Reactとアプリプラットフォームのネイティブ機能を使用してAndroidおよびiOSアプリケーションを構築するためのオープンソースフレームワークです。React Nativeでは、JavaScriptを使用してプラットフォームのAPIにアクセスするだけでなく、再利用可能でネスト可能なコードのバンドルであるReactコンポーネントを使用してUIの外観と動作を記述します。

参考: https://reactnative.dokyumento.jp/

Reactガイドのすべてのヒントは、React Nativeにも適用できます。

接続URL​

開発中にSocket.IOサーバーにアクセスするためのURLは、プラットフォームによって異なります。

プラットフォームURL
Webブラウザlocalhost
iOSシミュレーターlocalhost
Androidシミュレーター10.0.2.2
実機（同じネットワーク上にある場合）マシンのIPアドレス

実機での例

socket.js
import { io } from "socket.io-client";

export const socket = io("http://192.168.0.10:3000");
ヒント

ブラウザでアプリケーションを開発する場合、サーバー側でCORSを有効にする必要もあります。

const io = new Server({
  cors: {
    origin: ["https://:8081"],
  }
});

参考: CORSの処理

よくある問題​

Androidでクリアテキストトラフィックがブロックされる​

APIレベル28（Android 9以降）から、クリアテキストトラフィックはデフォルトでブロックされます。つまり、SSL（http://）なしでサーバーにアクセスできなくなります。

開発中にこれを許可するには、次の設定を追加できます。

  • android:usesCleartextTraffic="true" を使用する方法
android/app/src/debug/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <application
            android:usesCleartextTraffic="true"
    />
</manifest>
  • または、ネットワークセキュリティ設定ファイルを使用する方法
android/app/src/debug/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain>192.168.0.10</domain>
    </domain-config>
</network-security-config>
android/app/src/debug/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <application
            android:networkSecurityConfig="@xml/network_security_config"
    />
</manifest>

参考: https://developer.android.com/privacy-and-security/security-config

自己署名証明書を使用する場合​

次の設定で、自己署名証明書を使用してSocket.IOサーバーにアクセスできます。

android/app/src/debug/AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest>
    <application
            android:networkSecurityConfig="@xml/network_security_config"
    />
</manifest>
android/app/src/debug/res/xml/network_security_config.xml
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <!-- needed by the Metro dev server -->
    <domain-config cleartextTrafficPermitted="true">
        <domain>localhost</domain>
    </domain-config>

    <domain-config>
        <domain>192.168.0.10</domain>
        <trust-anchors>
            <certificates src="@raw/mycert" />
        </trust-anchors>
    </domain-config>
</network-security-config>
android/app/src/debug/res/raw/mycert.pem
-----BEGIN CERTIFICATE-----
[...]
-----END CERTIFICATE-----
注意

IPアドレスは、自己署名証明書の`subjectAltName`に含まれている必要があります。

$ openssl req -x509 -nodes \
  -newkey rsa:2048 \
  -out cert.pem \
  -keyout key.pem \
  -subj '/CN=localhost' \
  -addext 'subjectAltName = IP:192.168.0.10'

そうでない場合、クライアントは接続を確立できません。

次のコマンドで確認できます。

$ openssl x509 -in cert.pem -text -noout | grep X509v3 -A 1
        X509v3 extensions:
            X509v3 Subject Key Identifier:
                C3:67:68:1A:F2:2C:F2:E8:B9:7A:7D:25:3F:5D:E0:AF:B5:B0:AF:16
            X509v3 Authority Key Identifier:
                C3:67:68:1A:F2:2C:F2:E8:B9:7A:7D:25:3F:5D:E0:AF:B5:B0:AF:16
            X509v3 Basic Constraints: critical
                CA:TRUE
            X509v3 Subject Alternative Name:
                IP Address:192.168.0.10

参考: https://developer.android.com/privacy-and-security/security-config

サンプルプロジェクト​

以上で終わりです。読んでいただきありがとうございます。

サンプル一覧に戻る