安卓android+WebSocket实现简易QQ聊天室

本篇仅介绍实现聊天室的前端，也就是安卓端代码，后端的实现看链接说明

链接说明

1.后端使用了spring boot 框架，若不熟悉，有关spring boot 入门教程请戳此链接使用Intellij IDEA开发第一个spring boot项目
2.websocket后端实现细节戳此链接spring boot练习–利用websocket实现QQ聊天室

界面展示

说明

有两个界面，第一个是登陆界面，我借用了我之前实现的登陆界面，并做了一些微调。需要输入ID和名字，测试的时候输入的ID不能重复，第二个是名字用于界面展示，登陆后跳转入第二个界面，就可以在聊天室里聊天了。

下面图模拟了一组场景，大青儿先进入聊天室，然后小明进入，互相发一段消息后，小明退出聊天室。

大青儿界面变化

小明界面变化

代码部分

这里仅展示安卓的代码，后端代码详见上面链接说明。

文件的简单介绍

Activity文件：LoginActivity.java,ChatActivity.java,与其对应布局文件activity_login.xml,activity_chat.xml
模型文件：Msg.java,User.java
适配器:UserAdapter
子布局文件:user_item.xml

第一步修改.gradle文件，添加以下内容

    implementation 'com.squareup.okhttp3:okhttp:3.8.1'
    implementation 'com.squareup.okhttp3:mockwebserver:3.8.1'

    implementation 'com.alibaba:fastjson:1.2.10'
    implementation 'com.android.support:recyclerview-v7:28.0.0'

第二步，修改AndroidManifest.xml文件，添加以下内容

 <activity android:name=".ChatActivity">
 </activity>
 <activity android:name=".LoginActivity">
     <intent-filter>
         <action android:name="android.intent.action.MAIN" />

         <category android:name="android.intent.category.LAUNCHER"/>
     </intent-filter>
 </activity>

以及添加这行，注意添加的位置的区别

<uses-permission android:name="android.permission.INTERNET" />

第三步具体功能代码

LoginActivity.java

public class LoginActivity extends Activity {
   
    private EditText mEditTextName,mEditTextId;
    private Button mButtonLogin;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
   
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        init();

        mButtonLogin.setOnClickListener(new View.OnClickListener() {
   
            @Override
            public void onClick(View v) {
   
                String userName = mEditTextName.getText().toString();
                String userId = mEditTextId.getText().toString();
                User user = new User(userId,userName);
                Intent intent = ChatActivity.newIntent(LoginActivity.this,user.toString());
                startActivity(intent);
                LoginActivity.this.finish();
            }
        });
    }

    private void init(){
   
        mEditTextName = findViewById(R.id.nickname_editText);
        mEditTextId = findViewById(R.id.id_editText);
        mEditTextName.setCompoundDrawables(initDrawable(R.drawable.nickname),null,null,null);
        mEditTextId.setCompoundDrawables(initDrawable(R.drawable.id),null,null,null);
        mButtonLogin = findViewById(R.id.login);
    }

    /**
     * 设置EditText左边图片的大小
     * */
    private Drawable initDrawable(int res){
   
        Drawable drawable = getResources().getDrawable(res);
        //距离左边距离，距离上边距离，长，宽
        drawable.setBounds(0,0,100,100);
        return drawable;
    }
}

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background">

    <!--    https://www.runoob.com/w3cnote/android-tutorial-relativelayout.html-->

    <RelativeLayout
        android:id="@+id/viewTop"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:background="@color/mihuang">

        <ImageView
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="10dp"
            android:src="@drawable/boy" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/viewCenter"
        android:paddingTop="20dp"
        android:layout_centerHorizontal="true"
        android:layout_width="280dp"
        android:layout_height="wrap_content"
        android:layout_below="@+id/viewTop"
        android:paddingBottom="70dp">

        <EditText
            android:id="@+id/id_editText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:drawablePadding="10dp"
            android:drawableLeft="@drawable/id"
            android:hint="请输入Id"
            android:textSize="16sp"
            android:layout_marginLeft="10dp"/>

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:src="@drawable/down"
            android:paddingRight="10dp"
            android:paddingTop="20dp"/>

        <EditText
            android:layout_below="@+id/id_editText"
            android:id="@+id/nickname_editText"
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:drawablePadding="10dp"
            android:drawableLeft="@drawable/nickname"