آموزش ساخت چت realtime با اندروید ، NodeJs و Socket.io

npm install --save  express socket.io  

const express = require('express'),
http = require('http'),
app = express(),
server = http.createServer(app),
io = require('socket.io').listen(server);
app.get('/', (req, res) => {

res.send('Chat Server is running on port 3000')
});


server.listen(3000,()=>{

console.log('Node app is running on port 3000')

});

node index.js

npm install -g nodemon

io.on('connection', (socket) => {

console.log('user connected')

socket.on('join', function(userNickname) {

        console.log(userNickname +" : has joined the chat "  )

        socket.broadcast.emit('userjoinedthechat',userNickname +" : has joined the chat ")
    });

});

console.log('user connected')

socket.on('join', function(userNickname)

console.log(userNickname +" : has joined the chat " )

    socket.broadcast.emit('userjoinedthechat',userNickname +" : has joined the chat ")

 socket.on('messagedetection', (senderNickname,messageContent) => {

       //log the message in console 

       console.log(senderNickname+" :" +messageContent)
        //create a message object

      let  message = {"message":messageContent, "senderNickname":senderNickname}

// send the message to the client side  

       socket.emit('message', message )

      });

socket.on('disconnect', function() {
    console.log( 'user has left ')
    socket.broadcast.emit( "userdisconnect" ,' user has left')
});

const express = require('express'),
http = require('http'),
app = express(),
server = http.createServer(app),
io = require('socket.io').listen(server);
app.get('/', (req, res) => {

res.send('Chat Server is running on port 3000')
});
io.on('connection', (socket) => {

console.log('user connected')

socket.on('join', function(userNickname) {

        console.log(userNickname +" : has joined the chat "  );

        socket.broadcast.emit('userjoinedthechat',userNickname +" : has joined the chat ");
    })


socket.on('messagedetection', (senderNickname,messageContent) => {

       //log the message in console 

       console.log(senderNickname+" : " +messageContent)

      //create a message object 

      let  message = {"message":messageContent, "senderNickname":senderNickname}

       // send the message to all users including the sender  using io.emit() 

      io.emit('message', message )

      })

socket.on('disconnect', function() {

        console.log(userNickname +' has left ')

        socket.broadcast.emit( "userdisconnect" ,' user has left')

    })
})

server.listen(3000,()=>{

console.log('Node app is running on port 3000')

})

 implementation('com.github.nkzawa:socket.io-client:0.5.0') {
        exclude group: 'org.json', module: 'json'
    }

    implementation 'androidx.recyclerview:recyclerview:1.1.0'

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">


    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textInputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="24dp"
        app:layout_constraintBottom_toTopOf="@+id/enterchat"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="packed">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/nickname"
            android:hint="لطفا نام خود را وارد کنید" />
    </com.google.android.material.textfield.TextInputLayout>

    <Button
        android:id="@+id/enterchat"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="32dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="32dp"
        android:text="ورود به چت"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textInputLayout" />
</androidx.constraintlayout.widget.ConstraintLayout>

    implementation 'com.google.android.material:material:1.1.0'

import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)



        btn.setOnClickListener {
            if (nickname.text.toString().trim().isNotEmpty()) {
                val i = Intent(this@MainActivity, ChatBoxActivity::class.java)
                i.putExtra("usernickname", nickname.text.toString().trim())
                startActivity(i)
            }
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".ChatBoxActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:id="@+id/edt_messagelist"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@+id/btn_send"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <EditText
        android:id="@+id/edt_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        android:hint="پیام بنویسید"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/btn_send" />

    <Button
        android:id="@+id/btn_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        android:text="ارسال"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/edt_message"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

class Message {
    var nickname: String? = null
    var message: String? = null

    constructor() {}
    constructor(nickname: String?, message: String?) {
        this.nickname = nickname
        this.message = message
    }

}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="wrap_content">

    <TextView
        android:id="@+id/nickname"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:gravity="right"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/message"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <TextView
        android:id="@+id/message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="16dp"
        android:gravity="right"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/nickname"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.recyclerview.widget.RecyclerView
import kotlinx.android.synthetic.main.item.view.*


class ChatBoxAdapter(var messageList: ArrayList<Message>) :
    RecyclerView.Adapter<ChatBoxAdapter.MyViewHolder>() {

    inner class MyViewHolder(view: View) : RecyclerView.ViewHolder(view) {
    }


    public fun addItems(message: Message){
        messageList.add(message)
        notifyDataSetChanged()
    }

    override fun getItemCount(): Int = messageList.size


    override fun onCreateViewHolder(
        parent: ViewGroup,
        viewType: Int
    ): MyViewHolder {
        val itemView: View = LayoutInflater.from(parent.context)
            .inflate(R.layout.item, parent, false)
        return MyViewHolder(itemView)
    }


    override fun onBindViewHolder(
        holder: MyViewHolder,
        position: Int
    ) {

        val m = messageList[position]
        holder.itemView.nickname.text = m.nickname
        holder.itemView.message.text = m.message
    }

}

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.github.nkzawa.socketio.client.IO
import com.github.nkzawa.socketio.client.Socket
import java.net.URISyntaxException

class ChatBoxActivity : AppCompatActivity() {

    private lateinit var socket:Socket
    private var nickname = ""

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_chat_box)
        
        nickname  = intent.getStringExtra("usernickname") ?: "unknown"

        // config socket client
        try {
            // ini socket variable
            socket = IO.socket("http://yourlocalIpaddress:3000")
            // try connect to server uri
            socket.connect()
            // emit an event to server
            socket.emit("join" , nickname)
        }catch (e: URISyntaxException){
            e.printStackTrace()
        }
    }
}

 private lateinit var socket:Socket

        nickname  = intent.getStringExtra("usernickname") ?: "unknown"

            socket = IO.socket("http://yourlocalIpaddress:3000")

            socket.connect()

  socket.on("userjoinedthechat", Emitter.Listener {
            runOnUiThread {
                val data = it[0]
                Toast.makeText(this@ChatBoxActivity, data.toString(), Toast.LENGTH_SHORT).show()
            }
        })

  btn_send.setOnClickListener {
            socket.emit("messagedetection", nickname, edt_message.text.toString().trim())
            edt_message.setText("")
        }

socket.on('messagedetection', (senderNickname,messageContent) => {

       //log the message in console 

       console.log(senderNickname+" : " +messageContent)

      //create a message object 

      let  message = {"message":messageContent, "senderNickname":senderNickname}

       // send the message to all users including the sender  using io.emit() 

      io.emit('message', message )

      })

lateinit var chatAdapter : ChatBoxAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_chat_box)


        chatAdapter = ChatBoxAdapter(ArrayList<Message>())
        rcv_messages.layoutManager = LinearLayoutManager(this)
        rcv_messages.adapter = chatAdapter
        
        ...
        }

socket.on("message" , Emitter.Listener {
            runOnUiThread {
                val data = it[0] as JSONObject
                try {
                 val nickName = data.getString("senderNickname")
                    val message = data.getString("message")

                    val mObj = Message(nickName , message)
                    chatAdapter.addItems(mObj)

                }catch (e: JSONException){
                    e.printStackTrace()
                }
            }
        })

socket.on('disconnect', function() {

        console.log(userNickname +' has left ')

        socket.broadcast.emit( "userdisconnect" ,' user has left')

    })
})

socket.on("userdisconnect", Emitter.Listener {
            runOnUiThread {
                val data = it[0]
                Toast.makeText(this@ChatBoxActivity, data.toString(), Toast.LENGTH_SHORT).show()
            }
        })

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.LinearLayout
import android.widget.Toast
import androidx.recyclerview.widget.LinearLayoutManager
import com.github.nkzawa.emitter.Emitter
import com.github.nkzawa.socketio.client.IO
import com.github.nkzawa.socketio.client.Socket
import kotlinx.android.synthetic.main.activity_chat_box.*
import org.json.JSONException
import org.json.JSONObject
import java.net.URISyntaxException

class ChatBoxActivity : AppCompatActivity() {

    private lateinit var socket: Socket
    private var nickname = ""


    lateinit var chatAdapter : ChatBoxAdapter

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_chat_box)

        chatAdapter = ChatBoxAdapter(ArrayList<Message>())
        rcv_messages.layoutManager = LinearLayoutManager(this)
        rcv_messages.adapter = chatAdapter

        nickname = intent.getStringExtra("usernickname") ?: "unknown"

        // config socket client
        try {
            // ini socket variable
            socket = IO.socket("http://yourlocalIpaddress:3000")
            // try connect to server uri
            socket.connect()
            // emit an event to server
            socket.emit("join", nickname)
        } catch (e: URISyntaxException) {
            e.printStackTrace()
        }



        socket.on("userjoinedthechat", Emitter.Listener {
            runOnUiThread {
                val data = it[0]
                Toast.makeText(this@ChatBoxActivity, data.toString(), Toast.LENGTH_SHORT).show()
            }
        })


        btn_send.setOnClickListener {
            socket.emit("messagedetection", nickname, edt_message.text.toString().trim())
            edt_message.setText("")
        }



        socket.on("message" , Emitter.Listener {
            runOnUiThread {
                val data = it[0] as JSONObject
                try {
                    val nickName = data.getString("senderNickname")
                    val message = data.getString("message")

                    val mObj = Message(nickName , message)
                    chatAdapter.addItems(mObj)

                }catch (e: JSONException){
                    e.printStackTrace()
                }
            }
        })

        socket.on("userdisconnect", Emitter.Listener {
            runOnUiThread {
                val data = it[0]
                Toast.makeText(this@ChatBoxActivity, data.toString(), Toast.LENGTH_SHORT).show()
            }
        })
    }
}