ネイティブネイティブとソケットを使用してチャットアプリを組む.io

このポストでは、我々は反応ネイティブとソケットでReact Native Chat Appを構築する方法を学ぶつもりです.入出力ソケット.IOは広く使われているJavaScriptライブラリです.これは、クライアント(ブラウザ)とサーバー間のリアルタイム、双方向、イベントベースの通信を可能にします.これは、ノードから構築されます.JSとJavaScriptクライアントライブラリ.その最も顕著な機能は、信頼性、自動再接続、マルチグループの部屋のサポートと接続の破損を検出します.
したがって、これらはソケットから得られる機能です.IOと我々はチャットアプリケーションを作成するために我々の反応ネイティブアプリに統合しようとしている.
それで、始めましょう、人々!

バックエンド

まず、クライアントからのすべての着信メッセージとリクエストを処理するバックエンドサーバが必要です.
ここでは、急行とソケットを含める必要があります.インデックスを使用します.ノードプロジェクトのJSファイル.ES 5メソッドを使用して、必要なExpressとSocketをインポートします.入出力ライブラリ.しかし、あなたは同様にインポートするES 6コーディング形式を使用することができます.Expressメソッドを恒常変数アプリケーションに初期化し、アプリケーション変数を使用してHTTPサーバーを作成します.その後、ソケットを使ってサーバを聞きます.入出力ライブラリ.ポートサーバの待機状態は3000に設定されます.

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io").listen(server);
const port = 3000;

次にソケットを起動する必要があります.IOサーバをオンにします.次に、以下のコードスニペットに示すように双方向通信を確立するために関数を生成する必要があります.

io.on("connection", socket => {
  console.log("a user connected :D");
  socket.on("chat message", msg => {
    console.log(msg);
    io.emit("chat message", msg);
  });
});

最後に、ポート3000でサーバを起動して、そのポートで任意の着信要求を聞くことができます.

server.listen(port, () => console.log("server running on port:" + port));

サーバー側コードとデモの結果をCodesandboxで確認できます.これでサーバの設定が完了します.

ネイティブセクション

このステップでは、我々は既に反応ネイティブプロジェクトを設定していると仮定します.今、我々はアプリケーションの構築とサーバーサイド側のクライアント側のチャットアプリケーションに統合します.
ここでは、まずソケットをインポートする必要があります.IOクライアントパッケージです.次のコードスニペットに示すようなIOクライアントパッケージ

import io from "socket.io-client";

次に、書き込まれたメッセージの変更を処理する2つの状態と、メッセージを保持する配列を作成する必要があります.ここでの2つの状態は、送信されたか受け取ったメッセージの格納を扱うクライアントの入力とchatmessage配列を扱うchatmessageです.このコードは以下のコードスニペットで与えられます.

constructor(props) {
   super(props);
   this.state = {
      chatMessage: "",
      chatMessages: []
   };
}

さて、サーバーへの接続を初期化します.
ここで、IOモジュールのONメソッドを使用して、以下のコードスニペットに示すように、送受信される新しいメッセージを簡潔にすることによって、配列状態を変更します.

componentDidMount() {
   this.socket = io("http://127.0.0.1:3000");
    this.socket.on("chat message", msg => {
          this.setState({ chatMessages: [...this.state.chatMessages, msg]   
     });
  });
}

次に、簡単なフォームを作成し、マップ関数を使ってメッセージを表示する必要があります.次のコードスニペットに示すように、クライアントに対してメッセージを入力し、onSubmitEditingイベントが発生したときにSubmitChatMessage関数をトリガーするための単純なTextInput要素になります.

render() {
    const chatMessages = this.state.chatMessages.map(chatMessage => (
      <Text style={{borderWidth: 2, top: 500}}>{chatMessage}</Text>
    ));

    return (
      <View style={styles.container}>
        {chatMessages}
        <TextInput
          style={{height: 40, borderWidth: 2, top: 600}}
          autoCorrect={false}
          value={this.state.chatMessage}
          onSubmitEditing={() => this.submitChatMessage()}
          onChangeText={chatMessage => {
            this.setState({chatMessage});
          }}
        />
      </View>
  ` );
  }

submitchatmessage関数は、次のコードスニペットに示すように、EMITメソッドを使用してサーバーにメッセージを送信するために作成されます.

submitChatMessage() {
    this.socket.emit('chat message', this.state.chatMessage);
    this.setState({chatMessage: ''});
  }

最後に、次のコードスニペットに示すように、スタイルシートコンポーネントを使用してチャットコンテナにスタイルを追加します.

const styles = StyleSheet.create({
  container: {
    height: 400,
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
});

さて、デバイスエミュレータやテストでプロジェクトを実行します.ご覧の通り、期待通りに動作します.

したがって、これは我々の単純なチャットアプリケーションの正常な反応をネイティブとソケットを使用して成功をマークします.IOパッケージ.

結論

このポストでは、簡単なソケットの作成と設定を学びました.ノードとExpressを使用したIOサーバ.次に、クライアント側のネイティブチャットアプリケーションをサーバー側と統合する方法も学びました.双方向通信を成功させることができた.最後に、我々は実行することができ、デバイスエミュレータ正常にチャットアプリケーションをテストします.
元来は2019年8月19日にhttps://kriss.io年に出版された.

開示

この投稿はアフィリエイトリンクが含まれていますこの記事で提供される異なった関連から製品またはサービスを購入するならば、私は補償を受けるかもしれません.