expoでソケット通信する記事が日本語で1記事もない件

記事を書こうと思った理由

実務で、ネイティブアプリを作ることになりました。前のプロジェクトではVue.jsを使っていたため、スマホアプリでもReactNativeを選択しました。

今回は、httpプロトコルが使えないので、まずは、ソケット通信する必要があります。いつものようにやり方をグーグル先生に聞くと、日本語の記事が一つもない！？

私と同じように何日も沼にはまらないようにこの記事を書こうと思った次第です。

前提

ReactNative初学者の人は、まず間違いなくexpoを使って開発すると思います。入門書やUdemyもほぼexpo前提で構成されています。

expoはコマンド一発で、各デバイス用のビルドができるし、ストアへのリリースもとても簡単であることが理由だと思います。

しかしこいつは、ネイティブのモジュールが使えません。便利ゆえの欠点ですね。社内にスマホエンジニアがいないので、ビルド周りでエラーが出たら、なおせる気がしなかった私は、どうしてもexpoを使いたかったわけです。

解決方法

react-native-tcp-socketというものを使えば、どうやらソケット通信できます。しかしこいつはネイティブのモジュールであるがゆえにexpoでは使用できません。

そこで使用するのはeas(Expo Application Services)。これを使えば、ネイティブのモジュールをexpoで使えます。環境構築は、公式ドキュメントを参考にしてください。↓

npmのドキュメントに書いてある通りに関数を作り、IPとportを入れて頂ければ、ソケット通信完了です！

sample

const onclick = () => {
    // Create socket
    try {
      const client = TcpSocket.createConnection(
        {
          port: port,
          host: IP
        }
        , () => {
          // Write on the socket
          client.write('Hello server!');
          alert("成功")
          // Close socket
          client.destroy();
        });
    } catch (e) {
      alert("失敗", e)
    }
  }