03．メッセージを送信する処理を作る

ニックネームをサーバーに送信するチャットルーム入室の処理を作成します。
画面に入力したメッセージをサーバーへ送信する処理を作成します。

解説

サーバーにメッセージを送信するには、以下を行います。

m_socket.emit( イベント名, メッセージ );

実装

プロジェクトを開く

02．で作成したプロジェクトを開きます。

接続完了時の処理の編集

チャットクライアントアクティビティを編集します。

「Project」ペインの「app > java > ドメイン.mychatapplication > ChatClientActivity」を開きます。

チャットクライアントアクティビティの接続完了時の処理に、
チャットルームへの入室処理である「サーバーに、イベント名'join' でニックネームを送信する処理」
を追加します。

接続完了時の処理を以下のようにします。
// 接続完了時の処理 m_socket.on( Socket.EVENT_CONNECT, new Emitter.Listener() { @Override public void call( final Object... args ) { runOnUiThread( new Runnable() { @Override public void run() { Toast.makeText( ChatClientActivity.this, "Connected.", Toast.LENGTH_SHORT ).show(); // サーバーに、イベント名'join' でニックネームを送信 m_socket.emit( "join", m_strNickname ); } } ); } } );

チャットクライアントアクティビティのレイアウトの編集

チャットクライアントアクティビティのレイアウトを編集します。

「Project」ペインの「app > res > layout > activity_chat_client.xml」を開きます。

ニックネームを表示するためのTextViewの下に、
メッセージを入力するためのEditText、
入力したメッセージを送信するためのButton、
を配置します。

activity_chat_client.xmlの内容を以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/textview_nickname" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0" android:textColor="#000088" android:textSize="15dp" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0" android:orientation="horizontal"> <EditText android:id="@+id/edittext_message" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:hint="Your message" /> <Button android:id="@+id/button_send" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="0" android:text="Send" /> </LinearLayout> </LinearLayout>

チャットクライアントアクティビティの編集

チャットクライアントアクティビティを編集します。

「Project」ペインの「app > java > ドメイン.mychatapplication > ChatClientActivity」を開きます。

メンバー変数宣言に、「メッセージを入力するためのEditText変数」を追加します。

onCreateメンバ関数の末尾に、「入力したメッセージを送信するためのButtonを押した際の処理」を追加します。

「ChatClientActivity」全体としては、以下のようにします。
public class ChatClientActivity extends AppCompatActivity { // 定数 public static final String EXTRA_NICKNAME = "NICKNAME"; private static final String URI_SERVER = "http://mychat1234.herokuapp.com/"; // メンバー変数 private String m_strNickname = ""; private Socket m_socket; private EditText m_edittextMessage; @Override protected void onCreate( Bundle savedInstanceState ) { （・・・省略・・・） // 「Send」ボタンを押したときの処理 m_edittextMessage = (EditText)findViewById( R.id.edittext_message ); Button buttonSend = (Button)findViewById( R.id.button_send ); buttonSend.setOnClickListener( new View.OnClickListener() { @Override public void onClick( View v ) { String strMessage = m_edittextMessage.getText().toString(); if( !strMessage.isEmpty() ) { // サーバーに、イベント名'new message' で入力テキストを送信 m_socket.emit( "new message", strMessage ); m_edittextMessage.setText( "" ); // テキストボックスを空に。 } } } ); } @Override protected void onDestroy() { （・・・省略・・・） } }

ファイルを上書き保存します。

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。
リビルドし、エラー、警告がないことを確認します。

実行

Android端末にて、動作確認。

ブラウザから、チャットサーバーにアクセスしておきます。

ニックネームを入力し、「GO TO CHAT」ボタンを押し、チャットクライアントアクティビティに遷移します。

サーバーに、イベント名'join' でニックネームが送信されます。

ブラウザに、新しい参加者が入室した旨のメッセージが、表示されます。

メッセージを入力し、「SEND」ボタンを押します。

ブラウザに、新しいメッセージが、表示されます。

ダウンロード

サンプルプロジェクト