Android Building Group Chat App using Sockets – Part 2

    Rating: ★★★★☆
    View: 1022
    Download: 1554
    Từ khóa:

    In this part we are going to build the next important component, i.e. android chat app. The app we are about to create will have two screens. The first screen will prompt the user to enter his/her name. This name is to identify the sender whenever a message is received. The second screen is to list the chat messages and to compose a new message.

    So let’s start the app by creating a new android project in Eclipse IDE.

    VIDEO DEMO

    6. Building The Android Chat App

    1. In Eclipse create new android project by navigating to File ⇒ New ⇒ Android Application Projectand fill out all the required details.

    I gave my project name as WebMobileGroupChat and package name as
    info.androidhive.webgroupchat.

    2. Add the below color values in res ⇒ values ⇒ colors.xml file.

    colors.xml
    
    
        #3cb879
        #e8e8e8
        #82e783
        #2b2b2b
        #434343
        #ffffff
        #5eb964
        #e5e7eb
        #a1a1a1
        #1e6258
        #e8e8e8
        #626262
        #777777
    

    3. Also add the below string values in res ⇒ values ⇒ strings.xml file.

    strings.xml
    
    
     
        WebMobileGroupChat
        (Android WebSockets Chat App)
        By Ravi Tamada
        www.androidhive.info
        Enter your name
        JOIN
        Send
     
    

    4. Edit styles.xml located under res ⇒ values ⇒ styles.xml and add below styles. Here we are adding the styles for the action bar.

    styles.xml
    
      
        
      
        
         
         
      
    

    5. Now we need an activity to take the username that is required when connecting to socket server. So under res ⇒ layout folder create an xml file named activity_name.xml

    activity_name.xml
    
    
     
        
     
        
     
        
     
            
     
            
     
            

    6. Create a new activity named NameActivity.java under project’s main package. In this activity we don’t handle anything complex. We just take the user input from EditText and send it to other activity.

    NameActivity.java
    package info.androidhive.webgroupchat;
     
    import android.app.Activity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.Toast;
     
    public class NameActivity extends Activity {
     
        private Button btnJoin;
        private EditText txtName;
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_name);
     
            btnJoin = (Button) findViewById(R.id.btnJoin);
            txtName = (EditText) findViewById(R.id.name);
     
            // Hiding the action bar
            getActionBar().hide();
     
            btnJoin.setOnClickListener(new View.OnClickListener() {
     
                @Override
                public void onClick(View v) {
                    if (txtName.getText().toString().trim().length() > 0) {
     
                        String name = txtName.getText().toString().trim();
     
                        Intent intent = new Intent(NameActivity.this,
                                MainActivity.class);
                        intent.putExtra("name", name);
     
                        startActivity(intent);
     
                    } else {
                        Toast.makeText(getApplicationContext(),
                                "Please enter your name", Toast.LENGTH_LONG).show();
                    }
                }
            });
        }
    }

    7. Finally make NameActivity.java as launcher activity in AndroidManifest.xml. Also add INTERNET permission as we need to make internet calls. This is how your manifest file should look like.

    AndroidManifest.xml
    
    
     
        
     
        
     
        
            
                
                    
     
                    
                
            
            
            
        
     
    

    After doing the above changes, if you run the app, you should see the name activity launched as first activity. Below is the output of name activity where user can enter their name and move to next activity.

    Before going to implement sockets, I would like to create few resource files first which required to create messages interface.

    8. Download this background image and paste it in project’s res ⇒ drawable folder. (If you don’t see drawable folder, create a new one and name it as drawable). This image will be used as background repeat image for the chat conversation.

    9. Create 3 new xml files under drawable folder named tile_bg.xmlbg_msg_from.xml andbg_msg_you.xml and add below codes. These drawable xml files are used as background for chat messages.

    tile_bg.xml
    
    
    bg_msg_from.xml
    
    
     
        
        
        
     
        
        
     
    
    bg_msg_you.xml
    
    
     
        
        
        
     
        
        
     
    

    10. Now under res ⇒ layout folder create two more xml files named list_item_message_left.xml andlist_item_message_right.xml. These two layout files are used to align chat messages on left and right in the list view.

    list_item_message_left.xml
    
    
     
        
     
        
     
    
    list_item_message_right.xml
    
    
     
        
     
        
     
    

    11. Now we need to create another layout to list all the chat messages and an option to compose a new message. Create another layout activity_main.xml and add below code.

    activity_main.xml
    
     
        
        
     
        
     
            
     
            

    12. With the above step, the creation of layout resources is done. Now we’ll quickly create few helper classes. In your project create a new package and name it as other.

    After creating the new package my package name will be info.androidhive.webgroupchat.other.

    13. In other package, create a class named Utils.java and add below code. This class contains methods to save the user’s session id in shared preferences.

    Utils.java
    package info.androidhive.webgroupchat.other;
     
    import org.json.JSONException;
    import org.json.JSONObject;
     
    import android.content.Context;
    import android.content.SharedPreferences;
    import android.content.SharedPreferences.Editor;
     
    public class Utils {
     
        private Context context;
        private SharedPreferences sharedPref;
     
        private static final String KEY_SHARED_PREF = "ANDROID_WEB_CHAT";
        private static final int KEY_MODE_PRIVATE = 0;
        private static final String KEY_SESSION_ID = "sessionId",
                FLAG_MESSAGE = "message";
     
        public Utils(Context context) {
            this.context = context;
            sharedPref = this.context.getSharedPreferences(KEY_SHARED_PREF,
                    KEY_MODE_PRIVATE);
        }
     
        public void storeSessionId(String sessionId) {
            Editor editor = sharedPref.edit();
            editor.putString(KEY_SESSION_ID, sessionId);
            editor.commit();
        }
     
        public String getSessionId() {
            return sharedPref.getString(KEY_SESSION_ID, null);
        }
     
        public String getSendMessageJSON(String message) {
            String json = null;
     
            try {
                JSONObject jObj = new JSONObject();
                jObj.put("flag", FLAG_MESSAGE);
                jObj.put("sessionId", getSessionId());
                jObj.put("message", message);
     
                json = jObj.toString();
            } catch (JSONException e) {
                e.printStackTrace();
            }
     
            return json;
        }
     
    }

    14. Create another class named Message.java. This model class defines each chat message where it contains message id, text and a boolean flag (isSelf) to define message owner. Using this boolean flag we’ll align message left or right in the list view.

    Message.java
    package info.androidhive.webgroupchat.other;
     
    public class Message {
        private String fromName, message;
        private boolean isSelf;
     
        public Message() {
        }
     
        public Message(String fromName, String message, boolean isSelf) {
            this.fromName = fromName;
            this.message = message;
            this.isSelf = isSelf;
        }
     
        public String getFromName() {
            return fromName;
        }
     
        public void setFromName(String fromName) {
            this.fromName = fromName;
        }
     
        public String getMessage() {
            return message;
        }
     
        public void setMessage(String message) {
            this.message = message;
        }
     
        public boolean isSelf() {
            return isSelf;
        }
     
        public void setSelf(boolean isSelf) {
            this.isSelf = isSelf;
        }
     
    }

    15. Create a class named WsConfig.java. This is where we define socket configuration i.e the socket url, port number and end point.

    WsConfig.java
    package info.androidhive.webgroupchat.other;
     
    public class WsConfig {
        public static final String URL_WEBSOCKET = "ws://192.168.0.102:8080/WebMobileGroupChatServer/chat?name=";
    }

    16. Now under your main package create a class named MessagesListAdapter.java to implement the custom list view adapter class. This class plays a major role in rendering the list by aligning the chat messages left or right.

    MessagesListAdapter.java
    package info.androidhive.webgroupchat;
     
    import info.androidhive.webgroupchat.other.Message;
     
    import java.util.List;
     
    import android.annotation.SuppressLint;
    import android.app.Activity;
    import android.content.Context;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.BaseAdapter;
    import android.widget.TextView;
     
    public class MessagesListAdapter extends BaseAdapter {
     
        private Context context;
        private List messagesItems;
     
        public MessagesListAdapter(Context context, List navDrawerItems) {
            this.context = context;
            this.messagesItems = navDrawerItems;
        }
     
        @Override
        public int getCount() {
            return messagesItems.size();
        }
     
        @Override
        public Object getItem(int position) {
            return messagesItems.get(position);
        }
     
        @Override
        public long getItemId(int position) {
            return position;
        }
     
        @SuppressLint("InflateParams")
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
     
            /**
             * The following list not implemented reusable list items as list items
             * are showing incorrect data Add the solution if you have one
             * */
     
            Message m = messagesItems.get(position);
     
            LayoutInflater mInflater = (LayoutInflater) context
                    .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
     
            // Identifying the message owner
            if (messagesItems.get(position).isSelf()) {
                // message belongs to you, so load the right aligned layout
                convertView = mInflater.inflate(R.layout.list_item_message_right,
                        null);
            } else {
                // message belongs to other person, load the left aligned layout
                convertView = mInflater.inflate(R.layout.list_item_message_left,
                        null);
            }
     
            TextView lblFrom = (TextView) convertView.findViewById(R.id.lblMsgFrom);
            TextView txtMsg = (TextView) convertView.findViewById(R.id.txtMsg);
     
            txtMsg.setText(m.getMessage());
            lblFrom.setText(m.getFromName());
     
            return convertView;
        }
    }

    17. Download the android websockets library and extract somewhere. Thanks to Koush for writing such a useful library.

    18. Import the downloaded android websockets library into Eclipse workspace. Goto File ⇒ Import ⇒ Android ⇒ Existing Android Code Into Workspace and select the downloaded library project home directory.

    19. Now add this project as a Library to our project. Right Click on project ⇒ Properties ⇒ Android (on left) ⇒ Add (on right, under Library section) and select the imported project.

    20. Finally open the main activity class (MainActivity.java) do the below changes. The below code very simple and everything is self explanatory.

    > A web socket is created using WebSocketClient class and it has all the callback methods likeonConnectonMessage and onDisconnect.

    > In onMessage method parseMessage() is called to parse the JSON received from the socket server.

    > In parseMessage() method, the purpose of JSON is identified by reading the flag value.

    > When a new message is received, the message is added to list view data source andadapter.notifyDataSetChanged() is called to update the chat list.

    sendMessageToServer() method is used to send the message from android device to socket server.

    playBeep() method is called to play device’s default notification sound whenever a new message is received.

    MainActivity.java
    package info.androidhive.webgroupchat;
     
    import info.androidhive.webgroupchat.other.Message;
    import info.androidhive.webgroupchat.other.Utils;
    import info.androidhive.webgroupchat.other.WsConfig;
     
    import java.net.URI;
    import java.net.URLEncoder;
    import java.util.ArrayList;
    import java.util.List;
    import java.util.Locale;
     
    import org.json.JSONException;
    import org.json.JSONObject;
     
    import android.app.Activity;
    import android.content.Intent;
    import android.media.Ringtone;
    import android.media.RingtoneManager;
    import android.net.Uri;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.View;
    import android.widget.Button;
    import android.widget.EditText;
    import android.widget.ListView;
    import android.widget.Toast;
     
    import com.codebutler.android_websockets.WebSocketClient;
     
    public class MainActivity extends Activity {
     
        // LogCat tag
        private static final String TAG = MainActivity.class.getSimpleName();
     
        private Button btnSend;
        private EditText inputMsg;
     
        private WebSocketClient client;
     
        // Chat messages list adapter
        private MessagesListAdapter adapter;
        private List listMessages;
        private ListView listViewMessages;
     
        private Utils utils;
     
        // Client name
        private String name = null;
     
        // JSON flags to identify the kind of JSON response
        private static final String TAG_SELF = "self", TAG_NEW = "new",
                TAG_MESSAGE = "message", TAG_EXIT = "exit";
     
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
     
            btnSend = (Button) findViewById(R.id.btnSend);
            inputMsg = (EditText) findViewById(R.id.inputMsg);
            listViewMessages = (ListView) findViewById(R.id.list_view_messages);
     
            utils = new Utils(getApplicationContext());
     
            // Getting the person name from previous screen
            Intent i = getIntent();
            name = i.getStringExtra("name");
     
            btnSend.setOnClickListener(new View.OnClickListener() {
     
                @Override
                public void onClick(View v) {
                    // Sending message to web socket server
                    sendMessageToServer(utils.getSendMessageJSON(inputMsg.getText()
                            .toString()));
     
                    // Clearing the input filed once message was sent
                    inputMsg.setText("");
                }
            });
     
            listMessages = new ArrayList();
     
            adapter = new MessagesListAdapter(this, listMessages);
            listViewMessages.setAdapter(adapter);
     
            /**
             * Creating web socket client. This will have callback methods
             * */
            client = new WebSocketClient(URI.create(WsConfig.URL_WEBSOCKET
                    + URLEncoder.encode(name)), new WebSocketClient.Listener() {
                @Override
                public void onConnect() {
     
                }
     
                /**
                 * On receiving the message from web socket server
                 * */
                @Override
                public void onMessage(String message) {
                    Log.d(TAG, String.format("Got string message! %s", message));
     
                    parseMessage(message);
     
                }
     
                @Override
                public void onMessage(byte[] data) {
                    Log.d(TAG, String.format("Got binary message! %s",
                            bytesToHex(data)));
     
                    // Message will be in JSON format
                    parseMessage(bytesToHex(data));
                }
     
                /**
                 * Called when the connection is terminated
                 * */
                @Override
                public void onDisconnect(int code, String reason) {
     
                    String message = String.format(Locale.US,
                            "Disconnected! Code: %d Reason: %s", code, reason);
     
                    showToast(message);
     
                    // clear the session id from shared preferences
                    utils.storeSessionId(null);
                }
     
                @Override
                public void onError(Exception error) {
                    Log.e(TAG, "Error! : " + error);
     
                    showToast("Error! : " + error);
                }
     
            }, null);
     
            client.connect();
        }
     
        /**
         * Method to send message to web socket server
         * */
        private void sendMessageToServer(String message) {
            if (client != null && client.isConnected()) {
                client.send(message);
            }
        }
     
        /**
         * Parsing the JSON message received from server The intent of message will
         * be identified by JSON node 'flag'. flag = self, message belongs to the
         * person. flag = new, a new person joined the conversation. flag = message,
         * a new message received from server. flag = exit, somebody left the
         * conversation.
         * */
        private void parseMessage(final String msg) {
     
            try {
                JSONObject jObj = new JSONObject(msg);
     
                // JSON node 'flag'
                String flag = jObj.getString("flag");
     
                // if flag is 'self', this JSON contains session id
                if (flag.equalsIgnoreCase(TAG_SELF)) {
     
                    String sessionId = jObj.getString("sessionId");
     
                    // Save the session id in shared preferences
                    utils.storeSessionId(sessionId);
     
                    Log.e(TAG, "Your session id: " + utils.getSessionId());
     
                } else if (flag.equalsIgnoreCase(TAG_NEW)) {
                    // If the flag is 'new', new person joined the room
                    String name = jObj.getString("name");
                    String message = jObj.getString("message");
     
                    // number of people online
                    String onlineCount = jObj.getString("onlineCount");
     
                    showToast(name + message + ". Currently " + onlineCount
                            + " people online!");
     
                } else if (flag.equalsIgnoreCase(TAG_MESSAGE)) {
                    // if the flag is 'message', new message received
                    String fromName = name;
                    String message = jObj.getString("message");
                    String sessionId = jObj.getString("sessionId");
                    boolean isSelf = true;
     
                    // Checking if the message was sent by you
                    if (!sessionId.equals(utils.getSessionId())) {
                        fromName = jObj.getString("name");
                        isSelf = false;
                    }
     
                    Message m = new Message(fromName, message, isSelf);
     
                    // Appending the message to chat list
                    appendMessage(m);
     
                } else if (flag.equalsIgnoreCase(TAG_EXIT)) {
                    // If the flag is 'exit', somebody left the conversation
                    String name = jObj.getString("name");
                    String message = jObj.getString("message");
     
                    showToast(name + message);
                }
     
            } catch (JSONException e) {
                e.printStackTrace();
            }
     
        }
     
        @Override
        protected void onDestroy() {
            super.onDestroy();
             
            if(client != null & client.isConnected()){
                client.disconnect();
            }
        }
     
        /**
         * Appending message to list view
         * */
        private void appendMessage(final Message m) {
            runOnUiThread(new Runnable() {
     
                @Override
                public void run() {
                    listMessages.add(m);
     
                    adapter.notifyDataSetChanged();
     
                    // Playing device's notification
                    playBeep();
                }
            });
        }
     
        private void showToast(final String message) {
     
            runOnUiThread(new Runnable() {
     
                @Override
                public void run() {
                    Toast.makeText(getApplicationContext(), message,
                            Toast.LENGTH_LONG).show();
                }
            });
     
        }
     
        /**
         * Plays device's default notification sound
         * */
        public void playBeep() {
     
            try {
                Uri notification = RingtoneManager
                        .getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
                Ringtone r = RingtoneManager.getRingtone(getApplicationContext(),
                        notification);
                r.play();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
     
        final protected static char[] hexArray = "0123456789ABCDEF".toCharArray();
     
        public static String bytesToHex(byte[] bytes) {
            char[] hexChars = new char[bytes.length * 2];
            for (int j = 0; j < bytes.length; j++) {
                int v = bytes[j] & 0xFF;
                hexChars[j * 2] = hexArray[v >>> 4];
                hexChars[j * 2 + 1] = hexArray[v & 0x0F];
            }
            return new String(hexChars);
        }
     
    }

    Now if you run the app, you can see the below screen as main activity output.

    With this we have completed the android app part too.
     

    7. Testing the Web and Android App

    To test the android app you need two android mobiles or you can just use one android mobile and a web app. Follow below steps to test the android app.

    1. Make sure that all your devices are connected to same wifi network. If you are using two android mobiles, connect them to same wifi network.

    2. Get the ip address of the machine on which socket server is running. Follow 2nd step in Part1tutorial to get the ip address of your machine.

    3. Replace the ip address in WsConfig.java and main.js with your machine IP address.

    4. Deploy the app on to android devices. If you are testing the app using web and android apps, open both the apps and test.

    The same conversation can be seen on web app too.

     

    loading Đang tải...

    template được ưa chuộng