[Node.js] socket.io 이용해서 채팅 만들기(1)

언어: 코틀린

운영체제:안드로이드

 

우선 채팅을 주고받을 수 있는 채팅창을 만들어줍니다.

 

 

activity_main.xml

<?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"
    android:padding="20dp"
    tools:context=".MainActivity">


    <EditText
        android:id="@+id/nickName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="닉네임을 입력해주세요."
        app:layout_constraintBottom_toTopOf="@+id/roomName"
        app:layout_constraintEnd_toEndOf="@+id/roomName"
        app:layout_constraintStart_toStartOf="@+id/roomName" />


    <EditText
        android:id="@+id/roomName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="방 이름을 입력해주세요."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.45" />

    <Button
        android:id="@+id/entrance"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="입장하기"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/roomName"
        app:layout_constraintVertical_bias="0.037" />


</androidx.constraintlayout.widget.ConstraintLayout>

 

 

MainActivity.kt

package com.example.chat

import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.chat.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {


 private var mBinding: ActivityMainBinding? = null

//매번 null 체크를 할 필요 없이 바인딩 변수 재 선언
 private val binding get() = mBinding!!

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.entrance.setOnClickListener {
            var nickName = binding.nickName.text.toString()
            var roomName = binding.roomName.text.toString()
            val intent = Intent(this, Chat::class.java)
            intent.putExtra("roomName", roomName)
            intent.putExtra("nickName", nickName)
            startActivity(intent)
        }

    }

    override fun onDestroy() {
        mBinding = null
        super.onDestroy()
    }
}

 

 

activity_chat.xml

<?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=".Chat">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/chatRecycle"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/inputMsg"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_weight="9" />

    <EditText
        android:id="@+id/inputMsg"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="메시지를 입력해주세요."
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/send"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/send"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:text="전송"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="@+id/inputMsg"
        app:layout_constraintVertical_weight="1" />
</androidx.constraintlayout.widget.ConstraintLayout>

 

Chat.kt

package com.example.chat

import android.os.Bundle
import android.util.Log
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import com.example.chat.databinding.ActivityChatBinding

class Chat : AppCompatActivity() {

    val TAG = "Chat.kt"
    lateinit var chatAdapter : ChatAdapter
    val datas = mutableListOf<ChatData>()
    var nickName:String= ""
    var msg:String=""
    private var mBinding: ActivityChatBinding? = null
    private val binding get() = mBinding!!

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mBinding = ActivityChatBinding.inflate(layoutInflater)
        setContentView(binding.root)

        if (intent.hasExtra("nickName") && intent.hasExtra("roomName"))
        {
            nickName = intent.getStringExtra("nickName").toString()
            var roomName = intent.getStringExtra("roomName")
            Log.e(TAG, "nickName:$nickName, roomName:$roomName")
        }
        else
        {
            Log.e(TAG, "가져온 데이터 없음")
        }

        val layoutManager = LinearLayoutManager(this)
        binding.chatRecycle.setLayoutManager(layoutManager)

        chatAdapter = ChatAdapter(this)
        binding.chatRecycle.adapter = chatAdapter


        binding.send.setOnClickListener {
            msg = binding.inputMsg.text.toString()
            datas.add(ChatData(nickName,msg))
            chatAdapter.datas = datas
            chatAdapter.notifyDataSetChanged()
            binding.inputMsg.text =null


        }

    }
}

 

ChatAdapter.kt

package com.example.chat

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView


class ChatAdapter(private val context: Context) : RecyclerView.Adapter<ChatAdapter.ViewHolder>() {

    var datas = mutableListOf<ChatData>()
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(context).inflate(R.layout.chat_item,parent,false)
        return ViewHolder(view)
    }

    override fun getItemCount(): Int = datas.size

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.bind(datas[position])
    }

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

        private val id :TextView = itemView.findViewById(R.id.id)
        private val msg :TextView = itemView.findViewById(R.id.msg)


        fun bind(item: ChatData) {
            id.text = item.id
            msg.text = item.msg

        }
    }


}

ChatData.kt

package com.example.chat

data class ChatData(
    var id : String,
    var msg : String
)

 

 

실행 화면

 

 

틀을 만들어줬으니 다음에는 node.js socket.io를 다뤄보도록 하겠습니다.