04．メッセージを受信する処理を作る

サーバーから送信されるメッセージを受信し、画面に表示する処理を作成します。

解説

サーバーから送信されるメッセージを受信するには、以下の書式で、イベントに対するコールバック関数を定義します。

m_socket.on( イベント名, new Emitter.Listener() { @Override public void call( final Object... args ) { runOnUiThread( new Runnable() { @Override public void run() { メッセージ受信時の処理 } } ); } } );

実装

プロジェクトを開く

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

リストアイテムのレイアウトの作成

メッセージをリスト表示する際のリストアイテムのレイアウトを作成します。

「Project」ペインの「app > res > layout」を右クリックします。

右クリックメニュー「New > Layout resource file」を選択します。

「File name」に「listitem_message」と入力します。
「OK」ボタンを押します。

listitem_message.xmlが作成されます。

ルートレイアウトを「LinearLayout」に変更します。
日時と、ニックネームと、メッセージを表示するためのTextViewを配置します。

listitem_message.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="wrap_content" android:orientation="vertical"> <TextView android:id="@+id/textview_date" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#008800" android:textSize="12dp"/> <TextView android:id="@+id/textview_nickname" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColor="#000088" android:textSize="15dp"/> <TextView android:id="@+id/textview_message" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="18dp"/> </LinearLayout>

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

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

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

メッセージを入力するためのEditText、入力したメッセージを送信するためのButton、の下に、
メッセージリストを表示するためのListView、
を配置します。

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> <ListView android:id="@+id/listview_messagelist" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" /> </LinearLayout>

Adapterクラスの追加

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

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

ListViewに表示するデータのためのクラス「Message」の定義を、チャットクライアントアクティビティクラス内に追加します。

ListViewにデータを表示するには、Apdapterを使用します。クラス「MessageListAdapter」の定義を、チャットクライアントアクティビティクラス内に追加します。

「ChatClientActivity」全体としては、以下のようにします。
public class ChatClientActivity extends AppCompatActivity { static class Message { private String m_strNickname; private String m_strMessage; private String m_strDate; public Message( String strNickname, String strMessage, String strDate ) { m_strNickname = strNickname; m_strMessage = strMessage; m_strDate = strDate; } public String getNickname() { return m_strNickname; } public String getMessage() { return m_strMessage; } public String getDate() { return m_strDate; } } static class MessageListAdapter extends BaseAdapter { private ArrayList<Message> m_listMessage; private LayoutInflater m_inflater; public MessageListAdapter( Activity activity ) { super(); m_listMessage = new ArrayList<Message>(); m_inflater = activity.getLayoutInflater(); } // リストへの追加 public void addMessage( Message message ) { m_listMessage.add( 0, message ); // 先頭に追加 notifyDataSetChanged(); // ListViewの更新 } // リストのクリア public void clear() { m_listMessage.clear(); notifyDataSetChanged(); // ListViewの更新 } @Override public int getCount() { return m_listMessage.size(); } @Override public Object getItem( int position ) { return m_listMessage.get( position ); } @Override public long getItemId( int position ) { return position; } static class ViewHolder { TextView textviewDate; TextView textviewNickname; TextView textviewMessage; } @Override public View getView( int position, View convertView, ViewGroup parent ) { ViewHolder viewHolder; // General ListView optimization code. if( null == convertView ) { convertView = m_inflater.inflate( R.layout.listitem_message, parent, false ); viewHolder = new ViewHolder(); viewHolder.textviewDate = (TextView)convertView.findViewById( R.id.textview_date ); viewHolder.textviewNickname = (TextView)convertView.findViewById( R.id.textview_nickname ); viewHolder.textviewMessage = (TextView)convertView.findViewById( R.id.textview_message ); convertView.setTag( viewHolder ); } else { viewHolder = (ViewHolder)convertView.getTag(); } Message message = m_listMessage.get( position ); viewHolder.textviewDate.setText( message.getDate() ); viewHolder.textviewNickname.setText( message.getNickname() ); viewHolder.textviewMessage.setText( message.getMessage() ); return convertView; } } // 定数（・・・省略・・・） }

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

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

メッセージを受信したときの処理の追加

メンバー変数宣言に、「メッセージリストアダプタ変数」を追加します。

onCreateメンバ関数の末尾に、「メッセージを受信したときの処理」を追加します。

「ChatClientActivity」全体としては、以下のようにします。
public class ChatClientActivity extends AppCompatActivity { （・・・省略・・・） // 定数（・・・省略・・・） // メンバー変数 private String m_strNickname = ""; private Socket m_socket; private EditText m_edittextMessage; MessageListAdapter m_messagelistadapter; @Override protected void onCreate( Bundle savedInstanceState ) { （・・・省略・・・） // メッセージを受信したときの処理 // ・サーバー側のメッセージ拡散時の「io.emit( 'spread message', strMessage );」に対する処理 m_messagelistadapter = new MessageListAdapter( this ); // ビューアダプターの初期化 ListView listView = (ListView)findViewById( R.id.listview_messagelist ); // リストビューの取得 listView.setAdapter( m_messagelistadapter ); // リストビューにビューアダプターをセット m_socket.on( "spread message", new Emitter.Listener() { @Override public void call( final Object... args ) { runOnUiThread( new Runnable() { @Override public void run() { String strNickname = ""; String strMessage = ""; String strDate = ""; JSONObject objMessage = (JSONObject)args[0]; try { strNickname = objMessage.getString( "strNickname" ); strMessage = objMessage.getString( "strMessage" ); strDate = objMessage.getString( "strDate" ); } catch( JSONException e ) { e.printStackTrace(); } // 拡散されたメッセージをメッセージリストに追加 Message message = new Message( strNickname, strMessage, strDate ); m_messagelistadapter.addMessage( message ); } } ); } } ); } @Override protected void onDestroy() { （・・・省略・・・） } }

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

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

実行

Android端末にて、動作確認。

ニックネームを入力し、「GO TO CHAT」ボタンを押し、チャットクライアントアクティビティに遷移します。
自身が入室した旨のメッセージが、表示されます。

自身が送信したメッセージ、他の参加者が送信したメッセージが表示されます。

ダウンロード

サンプルプロジェクト
（github.com上のリポジトリページ）