學問Chat UI(4)

前言

寫這個組件是在幾個月前，那時候是由於老大講RN項目APP的通信聊天部分後面有可能本身實現，讓我那時候嘗試着搞下Android通信聊天UI實現的部分，在這期間，找了很多的Android原生項目：蘑菇街的TeamTalk，ChatDemo，EmojiChat，考慮到擴展性與改造複雜度，選擇了學習融雲 IM 界面組件。其實一直想寫這個項目介紹，學習須要思考與總結，若是學了之後沒有總結或者思考，慢慢地時間會磨平他們。

AuroraChat

AuroraChat 是個基於融雲UI庫的即時通信（IM）RN UI組件。

本 UI 組件提供了消息列表、輸入視圖等經常使用組件，支持常見的消息類型：文字、圖片、語音等。

支持 Android，暫不支持iOS 平臺。

功能

能夠基於本 UI 庫實現的功能：

• 消息列表的展現；
  • 支持多種消息類型；
  • 對每種消息類型的點擊處理；
  • 支持用戶頭像。
• 消息輸入：
  • 支持多種消息類型；
  • 語音輸入組件；
  • 相冊照片選取組件；

當前支持展現與輸入的消息類型：

• 文字
• 圖片
• 語音

使用

當前提供的組件：

Android

• EditExtension (關於輸入組件的佈局)
• AutoRefreshListView (關於消息如何適配ListView)

React Native

• ChatView

ChatView for React Native

配置

• 用法

import {DeviceEventEmitter} from "react-native";
import ChatView from "../rychatview";

• ChatView

  • Props 屬性
    • chatInfo
    • style
    • isOnRefresh
    • OnRefresh
  • DeviceEventEmitter監聽 uploadMsg事件
  • 組件內的方法
    • getHistoryMessage
    • sendTextMsg
    • sendRichTextMsg
    • sendPicMsg
    • sendVoiceMsg

數據格式

加載消息列表UI,須要傳遞必定格式的消息對象

• message 對象格式:

message = {  // text message
     "type": "text",
     "own": false,//是否爲當前用戶
     "content": "發送文本內容",
     "ts": "發送時間",
     "uid": "當前用戶id",
     "msgid": "消息uid",
     "senduserinfo": "發送者信息"
}    

message = {  // image message
     "type": "image",
     "own": false,//是否爲當前用戶
     "content": "圖片URL",
     "ts": "發送時間",
     "uid": "當前用戶id",
     "msgid": "消息uid",
     "senduserinfo": "發送者信息"
}

message = {  // voice message
     "type": "voice",
     "own": false,//是否爲當前用戶
     "duration": "50",//時長 單位：秒
     "content": "語音URL",
     "ts": "發送時間",
     "uid": "當前用戶id",
     "msgid": "消息uid",
     "senduserinfo": "發送者信息"
}

message = {  // chatInfo message
     "userid": "用戶id",
     "name": "暱稱",
     "portraitUri": "頭像URL",
     "chattype": "聊天類型",//羣組 私聊
     "targetid": "目標id"
}

ChatView介紹

Props 屬性

chatInfo

PropTypes.object:登陸聊天服務器後設置初始化

curChatInfo:  {
                "userid": "1001",
                
                "name": "golike",
                "portraitUri":"http://img0.imgtn.bdimg.com/it/u=651843754,4204488972&fm=213&gp=0.jpg",

                "chattype": "priv",

                "targetid": "1002"
            }

isOnRefresh

PropTypes.bool:下拉刷新的標識符

OnRefresh

PropTypes.function: () => {//從新網絡請求 }

DeviceEventEmitter監聽 uploadMsg事件

監聽來自原生的不一樣消息

componentDidMount() {
        //設置來自原生的消息的監聽
        this.subscription = DeviceEventEmitter.addListener('uploadMsg', this.onUpdateMessage);
    }

  componentWillUnmount() {
        //移除監聽器
        this.subscription.remove();
    }

組件內的方法

getHistoryMessage

PropTypes.function:加載歷史消息

historyMsgs = [ 前面消息類型中的消息,*,...]
 (historyMsgs) => {//鏈接消息服務器成功後獲取的歷史消息列表,發送給原生};

sendTextMsg

PropTypes.function:

(msg) => {//從js構造文本數據發送給原生};

sendRichTextMsg

PropTypes.function:未實現

(msg) => {//從js構造富文本數據發送給原生};

sendPicMsg

PropTypes.function:

(msg) => {//從js構造圖片數據發送給原生};

sendVoiceMsg

PropTypes.function:

(msg) => {//從js構造語音數據發送給原生};