【day18】聊天室(上) X Realtime database

好的,今天我们要来看的就是我们的精华啦-聊天室。 原本我们在设计邀约流程的时候是。

(原本设想的流程)

https://ithelp.ithome.com.tw/upload/images/20211003/201380177Rpqeck6zA.png

但是想了一下,发现这样对使用者来说非常不友善(不能只在这个平台完成所有的邀约+接受流程)
所以後来就想说直接做个一对一的聊天室,直接让他们在本APP进行聊天!

(现在要做的流程)
https://ithelp.ithome.com.tw/upload/images/20211003/20138017zPagOVo95y.png

好的,既然我们已经看了大致上的流程,接下来我们就来开始吧!!

一、建立Message

data class Message(
    val user_name: String? = null,
    val message: String? = null,
    val time: Any? = null,
    val send_user_id: String? = null,
    val accept_user_id: String? = null,
    val send_user_image: String? = null,
)

二、建立 ChatRoomFragment

我们需要一个Fragment让我们来放讯息的Recyclerview跟传送讯息,所以我们就直接建立一个Fragment,layout可以参考以下

简单明了,一个recyclerview,一个Edtext,一个button

https://ithelp.ithome.com.tw/upload/images/20211003/20138017rQNK4jGwN7.png

三、传送讯息

我们一样在chatRoomFragment来新增以下,把它传进我们的viewModel

private fun sendMessage(){

        val message = Message(
            user_name = accountViewModel.userDetail.value!!.name,
            message = binding.edChatRoomMessage.text.toString().trim(),
            send_user_id = accountViewModel.userDetail.value!!.id,
            accept_user_id = matchingViewModel.selectedInvitation.value!!.user_id,
            send_user_image = accountViewModel.userDetail.value!!.image,
            time = ServerValue.TIMESTAMP
        )
        chatViewModel.sendMessage(message)
				//然後再把输入清空
        binding.edChatRoomMessage.setText("")

    }

★我们可以直接用ServerValue.TIMESTAMP来拿到当前的时间,并且是Long的格式

好的,然後到我们的viewModel新增!

因为我们希望我们当A给B的时候,B也可以收到讯息,所以我在A传送讯息後,A→B的地方也会新增Message,B→A的地方也会新增Message,这样就可以达到聊天的功能啦!
fun sendMessage(message: Message){
       
				//新增传送者给收件者的资料
        FirebaseDatabase.getInstance().reference.child(message.send_user_id!!).child(message.accept_user_id!!).push().setValue(message)
            .addOnSuccessListener {
                Timber.d("成功上至 send_user那边罗")
            }
            .addOnFailureListener {
                Timber.d("Fail至 send_user cause$it")
            }
	
				//新增收件者对传送者的资料
        FirebaseDatabase.getInstance().reference.child(message.accept_user_id).child(message.send_user_id).push().setValue(message)
            .addOnSuccessListener {
                Timber.d("成功上至 accept_user那边罗")
            }
            .addOnFailureListener {
                Timber.d("Fail至 accept_user cause$it")
            }
    }
  • push:新增节点
  • setValue:写入或是替代资料

以下就是我们的资料型态啦!!

https://ithelp.ithome.com.tw/upload/images/20211003/20138017u8YgSMb0nJ.png

以下就是我们的资料型态啦!!


<<:  Angular建立专案(三)(Day18)

>>:  【React Hook 01】概述

【薪资平台】从薪水来看目标公司

如果有人在看,可能会想说,蛤我都还没写履历就要看薪水了?? 就算你的考虑条件中没有薪水这一项,也可以...

Day 17 - Event Handling

使用大括号与驼峰式命名来处理 DOM 是它与原生 jS 的差别。 //jS 写法 <butto...

30天学会 Python-Day24: 影像处理

OpenCV 用於处里影像的套件,除了图片外还能处理影片 读取影像 用 cv2.imread() 可...

Proxmox VE 虚拟机防火墙管理 (一)

在网路防护方面,Proxmox VE 提供了相当良好的防火墙管理功能,并且可以适用於节点实体机、客...

蓝牙小知识

名称的由来 Bluetooth是斯堪地那维亚语言的Blåtand/Blåtann 借10世纪丹麦和...