by Neo Ighodaro

由新Ighodaro

When building a chat application, it is essential to have an online presence feature. It is essential because your users will like to know when their friends are online, and are more likely to respond to their messages in real time.

構(gòu)建聊天應(yīng)用程序時(shí)，必須具有在線狀態(tài)功能。 這很重要，因?yàn)槟挠脩粝Ｍ浪麄兊呐笥押螘r(shí)在線，并且更有可能實(shí)時(shí)響應(yīng)他們的消息。

In this article, we will be building a messenger app with online presence using Pusher Channels, Kotlin, and Node.js.

在本文中，我們將使用Pusher Channels，Kotlin和Node.js構(gòu)建具有在線狀態(tài)的Messenger應(yīng)用程序。

Here is a demo of what we will build:

這是我們將構(gòu)建的演示：

先決條件 (Prerequisites)

To follow along you need the following requirements:

要遵循，您需要滿足以下要求：

• A Pusher Channel app. You can create one here.

  Pusher Channel應(yīng)用。 您可以在此處創(chuàng)建一個(gè)。

• Android Studio installed on your machine. You can check here for the latest stable version. A minimum of version 3.0 is recommended.

  您的計(jì)算機(jī)上安裝了Android Studio。 您可以在此處查看最新的穩(wěn)定版本。 建議最低版本為3.0。

• Basic knowledge of Android development and the Android Studio IDE.
  Android開發(fā)和Android Studio IDE的基礎(chǔ)知識(shí)。

• Basic knowledge of Kotlin. Here are the official docs.

  Kotlin的基礎(chǔ)知識(shí)。 這是官方文檔 。

• Node.js and NPM (Node Package Manager) installed on your machine. Download here.

  您的計(jì)算機(jī)上安裝了Node.js和NPM(節(jié)點(diǎn)程序包管理器)。 在這里下載。

• Mongo DB installed on your machine. You can install it following the instructions here.

  您的計(jì)算機(jī)上安裝了Mongo DB。 您可以按照此處的說明進(jìn)行安裝。

Some familiarity with Android development is also required.

還需要對Android開發(fā)有所了解。

構(gòu)建后端服務(wù)器 (Building the backend server)

Our server will be built using Node.js. To start, create a new project directory:

我們的服務(wù)器將使用Node.js構(gòu)建。 首先，創(chuàng)建一個(gè)新的項(xiàng)目目錄：

$ mkdir backend-server

Next, create a new index.js file inside the project directory and paste the following code:

接下來，在項(xiàng)目目錄中創(chuàng)建一個(gè)新的index.js文件，并粘貼以下代碼：

// File: ./index.js var express = require('express'); var bodyParser = require('body-parser'); const mongoose = require('mongoose'); var Pusher = require('pusher');var app = express();app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false }));var pusher = new Pusher({ appId: 'PUSHER_APP_ID', key: 'PUSHER_APP_KEY', secret: 'PUSHER_APP_SECRET', cluster: 'PUSHER_APP_CLUSTER' });mongoose.connect('mongodb://127.0.0.1/db');const Schema = mongoose.Schema; const userSchema = new Schema({ name: { type: String, required: true, }, count: {type: Number} });var User = mongoose.model('User', userSchema); userSchema.pre('save', function(next) { if (this.isNew) { User.count().then(res => { this.count = res; // Increment count next(); }); } else { next(); } });module.exports = User;var currentUser;/* ================================= We will add our endpoints here!!! ================================= */var port = process.env.PORT || 5000;app.listen(port);

In the snippet above, we initialized Pusher, Express, and MongoDB. We are using Moongose to connect to our MongoDB instance.

在上面的代碼段中，我們初始化了Pusher，Express和MongoDB。 我們正在使用Moongose連接到我們的MongoDB實(shí)例。

Replace the PUSHER_APP_* keys with the ones on your Pusher dashboard.

將PUSHER_APP_*鍵替換為Pusher儀表板上的鍵。

Now let’s add our endpoints. The first endpoint we will add will be to log a user in. Paste the code below in your index.js file below the currentUser declaration:

現(xiàn)在讓我們添加端點(diǎn)。 我們將添加的第一個(gè)端點(diǎn)將是登錄用戶。將下面的代碼粘貼到index.js文件中的currentUser聲明下方：

// File: ./index.js// [...]app.post('/login', (req,res) => { User.findOne({name: req.body.name}, (err, user) => { if (err) { res.send("Error connecting to database"); }// User exists if (user) { currentUser = user; return res.status(200).send(user) }let newuser = new User({name: req.body.name});newuser.save(function(err) { if (err) throw err; });currentUser = newuser; res.status(200).send(newuser) }); })// [...]

This endpoint receives a username with the request, and either creates a new user or returns the data of the existing user.

該端點(diǎn)接收帶有請求的username ，并創(chuàng)建一個(gè)新用戶或返回現(xiàn)有用戶的數(shù)據(jù)。

Let’s add the next endpoint below the one above:

讓我們在上面的端點(diǎn)下面添加下一個(gè)端點(diǎn)：

// File: ./index.js// [...]app.get('/users', (req,res) => { User.find({}, (err, users) => { if (err) throw err; res.send(users); }); })// [...]

This second endpoint fetches all the users from the database and returns them.

第二個(gè)端點(diǎn)從數(shù)據(jù)庫中獲取所有用戶并返回它們。

Since we will be using a Pusher presence channel, we need an endpoint to authenticate the user. In the same file, paste this code below the endpoint above:

由于我們將使用Pusher狀態(tài)通道，因此我們需要一個(gè)端點(diǎn)來驗(yàn)證用戶身份。 在同一文件中，將此代碼粘貼到上方端點(diǎn)以下：

// File: ./index.js// [...]app.post('/pusher/auth/presence', (req, res) => { let socketId = req.body.socket_id; let channel = req.body.channel_name;let presenceData = { user_id: currentUser._id, user_info: {count: currentUser.count, name: currentUser.name} };let auth = pusher.authenticate(socketId, channel, presenceData);res.send(auth); });// [...]

Since we are going to be using private channels, we need an endpoint for authentication. Add the following endpoint below the endpoint above:

由于我們將使用專用通道，因此我們需要一個(gè)端點(diǎn)進(jìn)行身份驗(yàn)證。 在上方端點(diǎn)下方添加以下端點(diǎn)：

// File: ./index.js// [...]app.post('/pusher/auth/private', (req, res) => { res.send(pusher.authenticate(req.body.socket_id, req.body.channel_name)); });// [...]Finally, the last endpoint will be to trigger an event `new-message` to a channel. Add the endpoint below the last one:// File: ./index.js// [...]app.post('/send-message', (req, res) => { let payload = {message: req.body.message, sender_id: req.body.sender_id} pusher.trigger(req.body.channel_name, 'new-message', payload); res.send(200); });// [...]

After adding all the endpoints, install the necessary npm packages by running this command:

添加所有端點(diǎn)之后，通過運(yùn)行以下命令來安裝必要的npm軟件包：

$ npm install express body-parser mongoose pusher

Before you run your application, make sure MongoDB is running already using this command:

在運(yùn)行應(yīng)用程序之前，請使用以下命令確保MongoDB已經(jīng)在運(yùn)行：

$ mongod --dbpath C:\MongoDB\data\db # Windows $ mongod --dbpath=/path/to/db/directory # Mac or Linux

Now you can run your application using the command below:

現(xiàn)在，您可以使用以下命令運(yùn)行您的應(yīng)用程序：

$ node index.js

Your app will be available here: http://localhost:5000.

您的應(yīng)用程序?qū)⒃诖颂幪峁?#xff1a; http：// localhost：5000 。

構(gòu)建我們的Android應(yīng)用程序 (Building our Android application)

Create your Android project. In the wizard, enter your project name — let’s say MessengerApp.

創(chuàng)建您的Android項(xiàng)目。 在向?qū)е?#xff0c;輸入您的項(xiàng)目名稱-假設(shè)為MessengerApp。

Next, enter your package name. You can use a minimum SDK of 19 then choose an Empty Activity.

接下來，輸入您的包裹名稱。 您可以使用最低19的SDK，然后選擇空活動(dòng) 。

On the next page, change the Activity Name to LoginActivity. After this, Android Studio will build your project for you.

在下一頁上，將“ 活動(dòng)名稱”更改為LoginActivity 。 之后，Android Studio將為您構(gòu)建項(xiàng)目。

Now that we have the project, let’s add the required dependencies for our app. Open your app module build.gradle file and add these:

現(xiàn)在我們有了項(xiàng)目，讓我們?yōu)閼?yīng)用程序添加必需的依賴項(xiàng)。 打開您的應(yīng)用程序模塊build.gradle文件并添加以下內(nèi)容：

// File ../app/build.gradle dependencies { // [...]implementation 'com.android.support:design:28+' implementation 'com.pusher:pusher-java-client:1.6.0' implementation "com.squareup.retrofit2:retrofit:2.4.0" implementation "com.squareup.retrofit2:converter-scalars:2.4.0" implementation 'com.squareup.retrofit2:converter-gson:2.3.0' }

Notably, we added the dependencies for Retrofit and Pusher. Retrofit is an HTTP client library used for network calls. We added the design library dependency too as we want to use some classes from it. Sync your gradle files to pull in the dependencies.

值得注意的是，我們添加了Retrofit和Pusher的依賴項(xiàng)。 Retrofit是用于網(wǎng)絡(luò)調(diào)用的HTTP客戶端庫。 我們還添加了設(shè)計(jì)庫依賴項(xiàng)，因?yàn)槲覀兿胧褂闷渲械囊恍╊悺?同步gradle文件以獲取依賴項(xiàng)。

Next, let’s prepare our app to make network calls. Retrofit requires an interface to know the endpoints to be accessed.

接下來，讓我們準(zhǔn)備應(yīng)用程序以進(jìn)行網(wǎng)絡(luò)通話。 改造需要一個(gè)接口來知道要訪問的端點(diǎn)。

Create a new interface named ApiService and paste this:

創(chuàng)建一個(gè)名為ApiService的新接口，并將其粘貼：

// File: ./app/src/main/java/com/example/messengerapp/ApiService.kt import okhttp3.RequestBody import retrofit2.Call import retrofit2.http.Body import retrofit2.http.GET import retrofit2.http.POSTinterface ApiService {@POST("/login") fun login(@Body body:RequestBody): Call<UserModel>@POST("/send-message") fun sendMessage(@Body body:RequestBody): Call<String>@GET("/users") fun getUsers(): Call<List<UserModel&gt;> }

Here, we have declared three endpoints. They are for logging in, sending messages, and fetching users.

在這里，我們聲明了三個(gè)端點(diǎn)。 它們用于登錄，發(fā)送消息和獲取用戶。

In some of our responses, we return Call<UserModel>. Let’s create the UserModel. Create a new class called UserModel and paste the following:

在某些響應(yīng)中，我們返回Call<UserMod el>。 讓我們創(chuàng)建e the Use rModel。 創(chuàng)建一個(gè)新的類并alled Use rModel并粘貼以下內(nèi)容：

// File: ./app/src/main/java/com/example/messengerapp/UserModel.kt import com.google.gson.annotations.Expose import com.google.gson.annotations.SerializedNamedata class UserModel(@SerializedName("_id") @Expose var id: String, @SerializedName("name") @Expose var name: String, @SerializedName("count") @Expose var count: Int, var online:Boolean = false)

Above, we used a data class so that some other functions required for model classes such as toString and hashCode are added to the class by default.

上面，我們使用了一個(gè)數(shù)據(jù)類，以便默認(rèn)情況下將模型類所需的其他一些功能(例如toString和hashCode添加到該類中。

We are expecting only the values for the id and name from the server. We added the online property so we can update later on.

我們期望服務(wù)器僅提供id和name的值。 我們添加了online媒體資源，以便稍后進(jìn)行更新。

Next, create a new class named RetrofitInstance and paste in the following code:

接下來，創(chuàng)建一個(gè)名為RetrofitInstance的新類，并粘貼以下代碼：

// File: ./app/src/main/java/com/example/messengerapp/RetrofitInstance.kt import okhttp3.OkHttpClient import retrofit2.Retrofit import retrofit2.converter.gson.GsonConverterFactory import retrofit2.converter.scalars.ScalarsConverterFactoryclass RetrofitInstance {companion object { val retrofit: ApiService by lazy { val httpClient = OkHttpClient.Builder() val builder = Retrofit.Builder() .baseUrl("http://10.0.2.2:5000/") .addConverterFactory(ScalarsConverterFactory.create()) .addConverterFactory(GsonConverterFactory.create())val retrofit = builder .client(httpClient.build()) .build() retrofit.create(ApiService::class.java) } } }

RetrofitInstance contains a class variable called retrofit. It provides us with an instance for Retrofit that we will reference in more than one class.

RetrofitInstance含有一種稱為類變量retrofit 。 它為我們提供了Retrofit的實(shí)例，我們將在多個(gè)類中進(jìn)行引用。

Finally, to request for the internet access permission update the AndroidManifest.xml file like so:

最后，要請求互聯(lián)網(wǎng)訪問權(quán)限，請更新AndroidManifest.xml文件，如下所示：

// File: ./app/src/main/ApiService.kt <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.messengerapp"><uses-permission android:name="android.permission.INTERNET" /> [...]</manifest>

Now we can make requests using Retrofit.

現(xiàn)在我們可以使用Retrofit發(fā)出請求。

The next feature we will implement is login. Open the already created LoginActivity layout file activity_login.xml file and paste this:

我們將實(shí)現(xiàn)的下一個(gè)功能是登錄。 打開已經(jīng)創(chuàng)建的LoginActivity布局文件activity_login.xml文件，并將其粘貼：

// File: ./app/src/main/res/layout/activity_login.xml &lt;?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_margin="20dp" tools:context=".LoginActivity"><EditText android:id="@+id/editTextUsername" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /><Button android:id="@+id/loginButton" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Login" app:layout_constraintTop_toBottomOf="@+id/editTextUsername" /></android.support.constraint.ConstraintLayout>

This layout contains an input field to take the username, and a button to make a login request.

此布局包含一個(gè)使用用戶名的輸入字段，以及一個(gè)進(jìn)行登錄請求的按鈕。

Next, open the LoginActivity.Kt file and paste in this:

接下來，打開LoginActivity.Kt文件并將其粘貼在其中：

// File: ./app/src/main/java/com/example/messengerapp/LoginActivity.kt import android.content.Intent import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.util.Log import kotlinx.android.synthetic.main.activity_login.* import okhttp3.MediaType import okhttp3.RequestBody import org.json.JSONObject import retrofit2.Call import retrofit2.Callback import retrofit2.Responseclass LoginActivity : AppCompatActivity() {override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_login) loginButton.setOnClickListener { if (editTextUsername.text.isNotEmpty()) { loginFunction(editTextUsername.text.toString()) } } }private fun loginFunction(name:String) { val jsonObject = JSONObject() jsonObject.put("name", name)val jsonBody = RequestBody.create( MediaType.parse("application/json; charset=utf-8"), jsonObject.toString() )RetrofitInstance.retrofit.login(jsonBody).enqueue(object:Callback<UserModel> { override fun onFailure(call: Call<UserModel>?, t: Throwable?) { Log.i("LoginActivity",t!!.localizedMessage) }override fun onResponse(call: Call<UserModel>?, response: Response<UserModel>?) { if (response!!.code() == 200) { Singleton.getInstance().currentUser = response.body()!! startActivity(Intent(this@LoginActivity,ContactListActivity::class.java)) finish() } } }) } }

In the LoginActivity.Kt file, we set up a listener for our login button so that, when it is clicked, we can send the text to the server for authentication. We also stored the logged in user in a singleton class so that we can access the user’s details later.

在LoginActivity.Kt文件中，我們?yōu)榈卿洶粹o設(shè)置了一個(gè)偵聽器，以便單擊該按鈕時(shí)，可以將文本發(fā)送到服務(wù)器進(jìn)行身份驗(yàn)證。 我們還將登錄用戶存儲(chǔ)在單例類中，以便以后可以訪問該用戶的詳細(xì)信息。

Create a new class called Singleton and paste in this:

創(chuàng)建一個(gè)名為Singleton的新類，并粘貼以下內(nèi)容：

// File: ./app/src/main/java/com/example/messengerapp/RetrofitInstance.kt class Singleton { companion object { private val ourInstance = Singleton() fun getInstance(): Singleton { return ourInstance } } lateinit var currentUser: UserModel }

Singletongives us access to the currentUser, which is the logged in user.

Singleton使我們可以訪問currentUser ，即登錄用戶。

Next, let’s create a new activity named ContactListActivity. For now, leave the class empty and open the corresponding layout file named activity_contact_list , and paste in the following:

接下來，讓我們創(chuàng)建一個(gè)名為ContactListActivity的新活動(dòng)。 現(xiàn)在，將類留空，然后打開名為activity_contact_list的相應(yīng)布局文件，然后粘貼以下內(nèi)容：

// File: ./app/src/main/res/layout/activity_contact_list.xml &lt;?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".ContactListActivity"><android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:id="@+id/recyclerViewUserList" android:layout_height="match_parent"/></android.support.constraint.ConstraintLayout>

The layout contains a recycler view, which will give us all the lists of our contacts fetched from the database. Since we are displaying items in a list, we will need an adapter class to manage how items are inflated to the layout.

該布局包含一個(gè)回收站視圖，該視圖將為我們提供從數(shù)據(jù)庫中獲取的所有聯(lián)系人列表。 由于我們在列表中顯示項(xiàng)目，因此我們將需要一個(gè)適配器類來管理項(xiàng)目如何放大到布局。

Create a new class named ContactRecyclerAdapter and paste in this:

創(chuàng)建一個(gè)名為ContactRecyclerAdapter的新類，并粘貼以下內(nèi)容：

// File: ./app/src/main/java/com/example/messengerapp/ContactRecyclerAdapter.kt import android.support.v7.widget.RecyclerView import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.ImageView import android.widget.TextView import java.util.*class ContactRecyclerAdapter(private var list: ArrayList<UserModel>, private var listener: UserClickListener) : RecyclerView.Adapter<ContactRecyclerAdapter.ViewHolder>() {override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { return ViewHolder(LayoutInflater.from(parent.context) .inflate(R.layout.user_list_row, parent, false)) }override fun onBindViewHolder(holder: ViewHolder, position: Int) = holder.bind(list[position])override fun getItemCount(): Int = list.sizefun showUserOnline(updatedUser: UserModel) { list.forEachIndexed { index, element -> if (updatedUser.id == element.id) { updatedUser.online = true list[index] = updatedUser notifyItemChanged(index) }} }fun showUserOffline(updatedUser: UserModel) { list.forEachIndexed { index, element -> if (updatedUser.id == element.id) { updatedUser.online = false list[index] = updatedUser notifyItemChanged(index) } } }fun add(user: UserModel) { list.add(user) notifyDataSetChanged() }inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { private val nameTextView: TextView = itemView.findViewById(R.id.usernameTextView) private val presenceImageView: ImageView = itemView.findViewById(R.id.presenceImageView)fun bind(currentValue: UserModel) = with(itemView) { this.setOnClickListener { listener.onUserClicked(currentValue) } nameTextView.text = currentValue.name if (currentValue.online){ presenceImageView.setImageDrawable(this.context.resources.getDrawable(R.drawable.presence_icon_online)) } else { presenceImageView.setImageDrawable(this.context.resources.getDrawable(R.drawable.presence_icon))}} }interface UserClickListener { fun onUserClicked(user: UserModel) } }

This adapter has some overridden methods and some custom methods.

此適配器具有一些替代方法和一些自定義方法。

The onCreateViewHolder inflates how each row will look like. onBindViewHolder binds the data to each item by calling the bind method in the inner ViewHolder class. The getItemCount gives the size of the list.

onCreateViewHolder夸大每一行的外觀。 onBindViewHolder通過調(diào)用內(nèi)部ViewHolder類中的bind方法將數(shù)據(jù)綁定到每個(gè)項(xiàng)目。 getItemCount給出列表的大小。

For our custom methods, showUserOffline updates the user and shows when they are offline. While showUserOnline does the opposite. Finally, we have the add method, which adds a new contact to the list and refreshes it.

對于我們的自定義方法， showUserOffline更新用戶并顯示他們何時(shí)離線。 而showUserOnline則相反。 最后，我們有add方法，它將新聯(lián)系人添加到列表中并刷新它。

In the adapter class above, we used a new layout named user_list_row. Create a new layout user_list_rowand paste this:

在上面的適配器類中，我們使用了一個(gè)名為user_list_row的新布局。 創(chuàng)建一個(gè)新的布局user_list_row并將其粘貼：

// File: ./app/src/main/res/layout/user_list_row.xml &lt;?xml version="1.0" encoding="utf-8"?> <LinearLayout android:orientation="horizontal" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="20dp" android:gravity="center" tools:context=".LoginActivity"><ImageView android:id="@+id/presenceImageView" android:layout_width="15dp" android:layout_height="15dp" app:srcCompat="@drawable/presence_icon" /><TextView android:layout_width="match_parent" android:layout_height="wrap_content" tools:text="Neo" android:textSize="20sp" android:layout_marginStart="10dp" android:id="@+id/usernameTextView" app:layout_constraintTop_toBottomOf="@+id/editTextUsername" /></LinearLayout>

This layout is the visual representation of how each item on the layout will look like. The layout has an image view that shows the users online status. The layout also has a textview that shows the name of the contact beside the icon. The icons are vector drawables. Let’s create the files.

此布局是布局上每個(gè)項(xiàng)目的外觀的直觀表示。 布局具有一個(gè)圖像視圖，顯示用戶的在線狀態(tài)。 該布局還具有一個(gè)文本視圖，該視圖在圖標(biāo)旁邊顯示聯(lián)系人的姓名。 圖標(biāo)是矢量可繪制對象。 讓我們創(chuàng)建文件。

Create a new drawable named presence_icon_online and paste in this:

創(chuàng)建一個(gè)新的名為繪制presence_icon_online和粘貼代碼：

// File: ./app/src/main/res/drawable/presence_icon_online.xml <vector android:height="24dp" android:tint="#3FFC3C" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#FF000000" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/> </vector>

Create another drawable named presence_icon and paste in this:

創(chuàng)建另一個(gè)名為繪制presence_icon和粘貼代碼：

// File: ./app/src/main/res/drawable/presence_icon.xml <vector android:height="24dp" android:tint="#C0C0C6" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#FF000000" android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z"/> </vector>

Next, open the ContactListActivity class and paste in this:

接下來，打開ContactListActivity類并粘貼：

// File: ./app/src/main/java/com/example/messengerapp/ContactListActivity.kt import android.content.Intent import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.support.v7.widget.LinearLayoutManager import android.util.Log import com.pusher.client.Pusher import com.pusher.client.PusherOptions import com.pusher.client.channel.PresenceChannelEventListener import com.pusher.client.channel.User import com.pusher.client.util.HttpAuthorizer import kotlinx.android.synthetic.main.activity_contact_list.* import retrofit2.Call import retrofit2.Callback import retrofit2.Responseclass ContactListActivity : AppCompatActivity(), ContactRecyclerAdapter.UserClickListener {private val mAdapter = ContactRecyclerAdapter(ArrayList(), this)override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_contact_list) setupRecyclerView() fetchUsers() subscribeToChannel() }}

In ContactListActivity, we initialized the ContactRecyclerAdapter, then called three functions in the onCreate method. Let’s create these new functions.

在ContactListActivity ，我們初始化了ContactRecyclerAdapter ，然后在onCreate方法中調(diào)用了三個(gè)函數(shù)。 讓我們創(chuàng)建這些新功能。

In the same class, add the following methods:

在同一類中，添加以下方法：

private fun setupRecyclerView() { with(recyclerViewUserList) { layoutManager = LinearLayoutManager(this@ContactListActivity) adapter = mAdapter } }private fun fetchUsers() { RetrofitInstance.retrofit.getUsers().enqueue(object : Callback<List<UserModel>> { override fun onFailure(call: Call<List<UserModel>>?, t: Throwable?) {} override fun onResponse(call: Call<List<UserModel>>?, response: Response<List<UserModel>>?) { for (user in response!!.body()!!) { if (user.id != Singleton.getInstance().currentUser.id) { mAdapter.add(user) } } } }) }private fun subscribeToChannel() {val authorizer = HttpAuthorizer("http://10.0.2.2:5000/pusher/auth/presence") val options = PusherOptions().setAuthorizer(authorizer) options.setCluster("PUSHER_APP_CLUSTER")val pusher = Pusher("PUSHER_APP_KEY", options) pusher.connect()pusher.subscribePresence("presence-channel", object : PresenceChannelEventListener { override fun onUsersInformationReceived(p0: String?, users: MutableSet<User>?) { for (user in users!!) { if (user.id!=Singleton.getInstance().currentUser.id){ runOnUiThread { mAdapter.showUserOnline(user.toUserModel()) } } } }override fun onEvent(p0: String?, p1: String?, p2: String?) {} override fun onAuthenticationFailure(p0: String?, p1: Exception?) {} override fun onSubscriptionSucceeded(p0: String?) {}override fun userSubscribed(channelName: String, user: User) { runOnUiThread { mAdapter.showUserOnline(user.toUserModel()) } }override fun userUnsubscribed(channelName: String, user: User) { runOnUiThread { mAdapter.showUserOffline(user.toUserModel()) } } }) }override fun onUserClicked(user: UserModel) { val intent = Intent(this, ChatRoom::class.java) intent.putExtra(ChatRoom.EXTRA_ID,user.id) intent.putExtra(ChatRoom.EXTRA_NAME,user.name) intent.putExtra(ChatRoom.EXTRA_COUNT,user.count) startActivity(intent) }

Replace the PUSHER_APP_* keys with the values on your dashboard.

將PUSHER_APP_*鍵替換為儀表板上的值。

• setupRecyclerView assigns a layout manager and an adapter to the recycler view. For a recycler view to work, you need these two things.

  setupRecyclerView將布局管理器和適配器分配給回收者視圖。 為了使回收器視圖正常工作，您需要這兩件事。

• fetchUsers fetches all the users from the server and displays on the list. It exempts the current user logged in.

  fetchUsers從服務(wù)器獲取所有用戶，并顯示在列表中。 它免除了當(dāng)前登錄的用戶。

• subcribeToChannel subscribes to a presence channel. When you subscribe to one, the onUsersInformationReceived gives you all the users subscribed to the channel including the current user. So, in that callback, we call the showUserOnline method in the adapter class so that the icon beside the user can be changed to signify that the user is online.

  subcribeToChannel訂閱狀態(tài)頻道。 當(dāng)您訂閱一個(gè)頻道時(shí)， onUsersInformationReceived會(huì)為您訂閱該頻道的所有用戶，包括當(dāng)前用戶。 因此，在該回調(diào)中，我們在適配器類中調(diào)用showUserOnline方法，以便可以更改用戶旁邊的圖標(biāo)以表示該用戶在線。

• onUserClicked is called when a contact is selected. We pass the details of the user to the next activity called ChatRoom.

  選擇聯(lián)系人時(shí)，將調(diào)用onUserClicked 。 我們將用戶的詳細(xì)信息傳遞給下一個(gè)稱為ChatRoom活動(dòng)。

In the previous snippet, we used an extension function to transform the User object we receive from Pusher to our own UserModel object. Let’s define this extension.

在上一片段中，我們使用了擴(kuò)展功能將從Pusher接收到的User對象轉(zhuǎn)換為我們自己的UserModel對象。 讓我們定義這個(gè)擴(kuò)展。

Create a new class called Utils and paste this:

創(chuàng)建一個(gè)名為Utils的新類，并將其粘貼：

// File: ./app/src/main/java/com/example/messengerapp/Utils.kt import com.pusher.client.channel.User import org.json.JSONObjectfun User.toUserModel():UserModel{ val jsonObject = JSONObject(this.info) val name = jsonObject.getString("name") val numb = jsonObject.getInt("count") return UserModel(this.id, name, numb) }

Now, since we referenced a ChatRoom activity earlier in the onUserClicked method, let’s create it.

現(xiàn)在，由于我們之前在onUserClicked方法中引用了ChatRoom活動(dòng)，因此讓我們創(chuàng)建它。

Create a new activity called ChatRoom. The activity comes with a layout file activity_chat_room. Paste this into the layout file:

創(chuàng)建一個(gè)名為ChatRoom的新活動(dòng)。 該活動(dòng)帶有布局文件activity_chat_room 。 將此粘貼到布局文件中：

// File: ./app/src/main/res/layout/activity_chat_room.xml &lt;?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".ChatRoom"><android.support.v7.widget.RecyclerView android:id="@+id/recyclerViewChat" android:layout_width="match_parent" android:layout_height="match_parent" /><EditText android:id="@+id/editText" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="16dp" android:hint="Enter a message" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/sendButton" app:layout_constraintStart_toStartOf="parent" /><android.support.design.widget.FloatingActionButton android:id="@+id/sendButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:layout_margin="16dp" android:src="@android:drawable/ic_menu_send" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /></android.support.constraint.ConstraintLayout>

The layout above contains a recycler view for the chat messages, an edit text to collect new messages, and a floating action button to send the message.

上面的布局包含聊天消息的回收者視圖，用于收集新消息的編輯文本以及用于發(fā)送消息的浮動(dòng)操作按鈕。

Next, create a new class called ChatRoomAdapter and paste in the following:

接下來，創(chuàng)建一個(gè)名為ChatRoomAdapter的新類，并粘貼以下內(nèi)容：

// File: ./app/src/main/java/com/example/messengerapp/ChatRoomAdapter.kt import android.support.v7.widget.CardView import android.support.v7.widget.RecyclerView import android.view.LayoutInflater import android.view.View import android.view.ViewGroup import android.widget.RelativeLayout import android.widget.TextView import java.util.*class ChatRoomAdapter (private var list: ArrayList<MessageModel>) : RecyclerView.Adapter<ChatRoomAdapter.ViewHolder>() {override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder { return ViewHolder(LayoutInflater.from(parent.context) .inflate(R.layout.chat_item, parent, false)) }override fun onBindViewHolder(holder: ViewHolder, position: Int) = holder.bind(list[position])override fun getItemCount(): Int = list.sizefun add(message: MessageModel) { list.add(message) notifyDataSetChanged() }inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) { private val messageTextView: TextView = itemView.findViewById(R.id.text) private val cardView: CardView = itemView.findViewById(R.id.cardView)fun bind(message: MessageModel) = with(itemView) { messageTextView.text = message.message val params = cardView.layoutParams as RelativeLayout.LayoutParams if (message.senderId==Singleton.getInstance().currentUser.id) { params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT) } } } }

This adapter works in a similar fashion as the one we created earlier. One difference, though, is that the show online and offline methods are not needed here.

該適配器的工作方式與我們之前創(chuàng)建的適配器類似。 但是，一個(gè)區(qū)別是，此處不需要在線和離線顯示方法。

Next, create another class — named MessageMode— and paste in this:

接下來，創(chuàng)建另一個(gè)類-名為MessageMode并粘貼以下內(nèi)容：

// File: ./app/src/main/java/com/example/messengerapp/MessageModel.kt data class MessageModel(val message: String, val senderId: String)

The chat_item layout used in the onCreateViewHolder method of the adapter class represents how each layout will look like. Create a new layout called chat_item and paste in this:

適配器類的onCreateViewHolder方法中使用的chat_item布局表示每種布局的外觀。 創(chuàng)建一個(gè)名為chat_item的新布局，并粘貼以下內(nèi)容：

// File: ./app/src/main/res/layout/chat_item.xml &lt;?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="16dp" android:orientation="vertical"><android.support.v7.widget.CardView android:id="@+id/cardView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="start" app:cardCornerRadius="8dp" app:cardUseCompatPadding="true"><LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="start" android:orientation="vertical" android:padding="8dp"><TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|start" android:layout_marginBottom="4dp" android:textStyle="bold" /></LinearLayout></android.support.v7.widget.CardView></RelativeLayout>

更新ChatRoom類 (Updating the ChatRoom class)

Finally, open the ChatRoom activity class and paste in this:

最后，打開ChatRoom活動(dòng)類并粘貼：

// File: ./app/src/main/java/com/example/messengerapp/ChatRoom.kt import android.app.Activity import android.os.Bundle import android.support.v7.app.AppCompatActivity import android.support.v7.widget.LinearLayoutManager import android.util.Log import android.view.View import android.view.inputmethod.InputMethodManager import com.pusher.client.Pusher import com.pusher.client.PusherOptions import com.pusher.client.channel.PrivateChannelEventListener import com.pusher.client.util.HttpAuthorizer import kotlinx.android.synthetic.main.activity_chat_room.* import okhttp3.MediaType import okhttp3.RequestBody import org.json.JSONObject import retrofit2.Call import retrofit2.Callback import retrofit2.Response import java.lang.Exception import java.util.*class ChatRoom : AppCompatActivity() {companion object { const val EXTRA_ID = "id" const val EXTRA_NAME = "name" const val EXTRA_COUNT = "numb" }private lateinit var contactName: String private lateinit var contactId: String private var contactNumb: Int = -1 lateinit var nameOfChannel: String val mAdapter = ChatRoomAdapter(ArrayList())override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_chat_room) fetchExtras() setupRecyclerView() subscribeToChannel() setupClickListener() } }

In this file, we declared constants used to send data to the activity through intents. We also initialized variables we will use later, like the adapter and the contact details. We then called some additional methods in the onCreatemethod. Let’s add them to theChatRoom class.

在此文件中，我們聲明了用于通過意圖將數(shù)據(jù)發(fā)送到活動(dòng)的常量。 我們還初始化了稍后將使用的變量，例如適配器和聯(lián)系方式。 然后，我們在onCreate方法中調(diào)用了一些其他方法。 讓我們將它們添加到ChatRoom類中。

Add the fetchExtras method defined below to the class. The method gets the extras sent from the chatroom activity.

將下面定義的fetchExtras方法添加到該類中。 該方法獲取聊天室活動(dòng)發(fā)送的臨時(shí)演員。

private fun fetchExtras() { contactName = intent.extras.getString(ChatRoom.EXTRA_NAME) contactId = intent.extras.getString(ChatRoom.EXTRA_ID) contactNumb = intent.extras.getInt(ChatRoom.EXTRA_COUNT) }

The next method is setupRecyclerView . This initializes the recycler view with an adapter and a layout manager. Paste this function into the same class as before:

下一個(gè)方法是setupRecyclerView 。 這將使用適配器和布局管理器初始化回收器視圖。 將此函數(shù)粘貼到與以前相同的類中：

private fun setupRecyclerView() { with(recyclerViewChat) { layoutManager = LinearLayoutManager(this@ChatRoom) adapter = mAdapter } }

The next method is subscribeToChannel . This method subscribes the user to a private channel with the selected contact. Paste the following code into the same class as before:

下一個(gè)方法是subscribeToChannel 。 此方法使用所選聯(lián)系人將用戶預(yù)訂到私人頻道。 將以下代碼粘貼到與以前相同的類中：

private fun subscribeToChannel() { val authorizer = HttpAuthorizer("http://10.0.2.2:5000/pusher/auth/private") val options = PusherOptions().setAuthorizer(authorizer) options.setCluster("PUSHER_APP_CLUSTER")val pusher = Pusher("PUSHER_APP_KEY", options) pusher.connect()nameOfChannel = if (Singleton.getInstance().currentUser.count > contactNumb) { "private-" + Singleton.getInstance().currentUser.id + "-" + contactId } else { "private-" + contactId + "-" + Singleton.getInstance().currentUser.id }Log.i("ChatRoom", nameOfChannel)pusher.subscribePrivate(nameOfChannel, object : PrivateChannelEventListener { override fun onEvent(channelName: String?, eventName: String?, data: String?) { val obj = JSONObject(data) val messageModel = MessageModel(obj.getString("message"), obj.getString("sender_id"))runOnUiThread { mAdapter.add(messageModel) } }override fun onAuthenticationFailure(p0: String?, p1: Exception?) {} override fun onSubscriptionSucceeded(p0: String?) {} }, "new-message") }

Replace the PUSHER_APP_* keys with the values on your dashboard.

將PUSHER_APP_*鍵替換為儀表板上的值。

The code above allows a user to subscribe to a private channel. A private channel requires authorization like the presence channel. However, it does not expose a callback that is triggered when other users subscribe.

上面的代碼允許用戶訂閱私人頻道。 專用頻道需要與狀態(tài)頻道一樣的授權(quán)。 但是，它不會(huì)公開其他用戶訂閱時(shí)觸發(fā)的回調(diào)。

Next method to be added is setupClickListener. Paste the method into the same class as before:

下一個(gè)要添加的方法是setupClickListener 。 將方法粘貼到與以前相同的類中：

private fun setupClickListener() { sendButton.setOnClickListener{ if (editText.text.isNotEmpty()) { val jsonObject = JSONObject() jsonObject.put("message",editText.text.toString()) jsonObject.put("channel_name",nameOfChannel) jsonObject.put("sender_id",Singleton.getInstance().currentUser.id)val jsonBody = RequestBody.create( MediaType.parse("application/json; charset=utf-8"), jsonObject.toString() )RetrofitInstance.retrofit.sendMessage(jsonBody).enqueue(object: Callback<String>{ override fun onFailure(call: Call<String>?, t: Throwable?) {} override fun onResponse(call: Call<String>?, response: Response<String>?) {} })editText.text.clear() hideKeyBoard() }} }

The method above assigns a click listener to the floating action button to send the message to the server. After the message is sent, we clear the text view and hide the keyboard.

上面的方法將單擊偵聽器分配給浮動(dòng)操作按鈕，以將消息發(fā)送到服務(wù)器。 發(fā)送消息后，我們清除文本視圖并隱藏鍵盤。

Add a method to the same class for hiding the keyboard like this:

將方法添加到同一類中以隱藏鍵盤，如下所示：

private fun hideKeyBoard() { val imm = getSystemService(Activity.INPUT_METHOD_SERVICE) as InputMethodManager var view = currentFocusif (view == null) { view = View(this) }imm.hideSoftInputFromWindow(view.windowToken, 0) }

That’s all for the application. Now you can run your application in Android Studio and you should see the application in action.

這就是應(yīng)用程序的全部內(nèi)容。 現(xiàn)在，您可以在Android Studio中運(yùn)行您的應(yīng)用程序，并且您應(yīng)該會(huì)看到該應(yīng)用程序的運(yùn)行情況。

Make sure the Node.js API we built earlier is running before running the Android application.

在運(yùn)行Android應(yīng)用程序之前，請確保我們先前構(gòu)建的Node.js API正在運(yùn)行。

結(jié)論 (Conclusion)

In this article, you have been introduced to some Pusher capabilities such as the private and presence channel.

在本文中，向您介紹了一些Pusher功能，例如專用和狀態(tài)通道。

We learned how to authenticate our users for the various channels.

我們學(xué)習(xí)了如何驗(yàn)證各種渠道的用戶身份。

We used these channels to implement a private chat between two persons and an online notification for a contact.

我們使用這些渠道來實(shí)現(xiàn)兩個(gè)人之間的私人聊天以及聯(lián)系人的在線通知。

The source code to the application built in this article is available on GitHub.

GitHub上提供了本文構(gòu)建的應(yīng)用程序的源代碼。

This post first appeared on the Pusher Blog.

這篇文章首先出現(xiàn)在Pusher Blog上 。

翻譯自: https://www.freecodecamp.org/news/how-to-build-an-android-messenger-app-with-online-presence-using-kotlin-fdcb3ea9e73b/

總結(jié)

以上是生活随笔為你收集整理的如何使用Kotlin构建具有在线状态的Android Messenger应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。