開發一款即時通信App，從這幾步開始

時間 2019-12-21

標籤開發一款即時通信 app 從這幾步開始简体版

原文原文鏈接

歡迎你們前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~javascript

本文由騰訊雲視頻發表於雲+社區專欄

關注公衆號「騰訊雲視頻」，一鍵獲取技術乾貨 | 優惠活動 | 視頻方案java

「晚上去哪吃飯啊？」android

桌面上來自一條晚上約飯的對話框——QQ。ios

忽然靈光一現，新出了優化的IM SDK，能夠嘗試着搭建一個相似QQ的即時通信軟件小程序

01性能優化

註冊帳號微信

騰訊雲官網網絡

註冊騰訊雲帳號，也可使用QQ或者微信直接登錄session

02架構

建立應用

選擇【產品】→【雲通訊】→【當即使用】→【建立應用接入】

SDK接入

一、集成SDK

【下載雲通訊SDK】包括IMSDK（雲通訊SDK）、TUIKit（基礎界面庫）

二、生成UserSig

在【基礎配置】下載公私鑰，使用【開發輔助工具】生成測試用戶的UserSig

三、初始化SDK

Android代碼

//應用啓動時（通常爲Application的onCreate）配置UIKit的基本配置，具體參數說明參考API
    BaseUIKitConfigs uiKitConfigs = new BaseUIKitConfigs();
    uiKitConfigs.appCacheDir(Constants.APP_DIR_CACHE).audioRecordMaxTime(120)
                .disableAudioPlayedStatusIcon(true).disableAutoPlayNextAudio(true)
                .ChatProcessor(new PojoChatProcessor());
    ILiveUIKit.init(this, uiKitConfigs);

四、建立登錄界面

Android代碼

public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //實例化登陸面板
        mLoginPanel = new LoginView(this);
        //將登陸組件設置爲登陸Activity的基本佈局，也可在佈局文件xml中引用LoginView
        setContentView((View) mLoginPanel);
        //添加登陸組件的動做事件，登陸點擊與註冊點擊
        mLoginPanel.setLoginEvent(new ILoginEvent() {
            @Override
            public void onLoginClick(View view, String userName, String password) {
                //點擊登陸時業務本身的登陸邏輯
            }

            @Override
            public void onRegisterClick(View view, String userName, String password) {
                //點擊註冊時業務本身的註冊邏輯
            }
        });
    }

界面實圖

五、建立會話列表

佈局文件

<!--在會話列表佈局文件中引用會話列表組件，也可參考登陸面板在代碼中設置-->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context=".main.MainActivity">

    <com.tencent.qcloud.uikit.business.session.view.SessionPanel
        android:id="@+id/session_panel"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Android代碼

/**
* 獲取會話列表組件，初始化默認設置
* 會話組件的默認設置已經實現了會話數據的拉取與處理（與IMSDK關聯完成相關邏輯）
* 開發者如爲特殊要求直接初始化默認設置便可
* 另會話組件提供的可擴展的事件和UI處理，具體可參考API文檔
*/
sessionPanel = baseView.findViewById(R.id.session_panel);
sessionPanel.initDefault();

界面實圖

六、建立聊天界面

Android代碼

//從佈局文件中獲取聊天面板組件
chatPanel = mBaseView.findViewById(R.id.chat_panel);
/*
* 會話組件的默認設置已經實現了會話數據的拉取與處理（與IMSDK關聯完成相關邏輯）
* 開發者如無特殊要求直接初始化默認設置便可
* 另聊天面板組件提供的可擴展的事件和UI處理，具體可參考API文檔
*/
chatPanel.initDefault();
//生成聊天基本信息，如聊天對象的暱稱，頭像，最後一頁聊天信息等
BaseChatInfo info = getChatInfo();
//設置基本信息，以便用戶進入該頁面時能即時展現相關信息
chatPanel.setBaseChatInfo(info);

界面實圖

七、羣管理

Android代碼

//從佈局文件中獲羣管理面板組件
GroupManagerPanel groupManagerPanel = mBaseView.findViewById(R.id.group_manager_panel);
/*
* 羣管理組件的默認設置已經實現了羣管理相關的邏輯也操做（與IMSDK關聯完成相關邏輯）
* 開發者如無特殊要求直接初始化默認設置便可
* 另聊羣管理組件提供的可擴展的事件和UI處理，具體可參考API文檔
*/
groupManagerPanel.initDefault();

界面實圖