Chat21-ionic 中文文档

镜像概述和主要用途

Chat21-ionic是开源实时聊天平台Tiledesk.com的核心组件，是一个基于ionic3开发的桌面和移动聊天应用，支持跨平台使用，提供完整的实时通讯功能。

核心功能和特性

• 一对一消息：支持用户间直接发送消息
• 消息历史：查看过往聊天记录
• 已读回执：显示消息的发送、送达和已读状态
• 对话列表视图：类似***的最近消息对话列表
• 在线状态管理：通过Presense Manager查看用户在线/离线状态及非活跃时长
• 响应式设计：适配桌面和移动设备
• 用户资料查看：显示全名和***等用户信息
• 登录注册：支持密码登录（基于Firebase认证）和包含全名、、密码及头像的注册功能
• 联系人列表：支持按全名进行全文搜索的联系人列表视图

在线演示

访问 [***] 查看Chat21-ionic的实时演示。

!Chat21-ionic演示截图
!Chat21-ionic演示截图

文档

文档开发中

前提条件

• 安装nodejs：[***]
• 安装Ionic CLI：npm install -g ionic
• 安装Cordova：npm install -g cordova@7.0.1
• 一个Firebase项目（可在[***]
• 已安装"Chat21 Firebase云函数"，详见：[***]

使用Docker Compose部署Tiledesk

如需一键在服务器上安装所有Tiledesk组件，请参考Docker Compose Tiledesk安装指南

安装步骤

1. 安装最新稳定版：在Github Releases标签页查看最新版本，然后执行：

   bash
   git clone [***] --branch <最新版本号>
   cd chat21-ionic
   

2. 构建项目：npm install

Firebase配置

创建和配置Firebase项目

1. 创建Firebase账户
2. 在Firebase控制台创建项目（如无）：[***]
3. 按说明部署Chat21 Firebase云函数：[***]

环境配置

配置src/environments文件夹中的environment.ts文件：

typescript
export const environment = {
    supportMode: false,
    production: false,
    remoteConfig: true,
    remoteConfigUrl: '/chat-config.json',
    chatEngine: "mqtt", // 或自定义聊天引擎
    uploadEngine: "native", // 或自定义上传引擎
    pushEngine:"none", // 或自定义推送引擎
    tenant:"tilechat",
    fileUploadAccept:"*/*",
    logLevel: "<首选日志级别数字>",
    firebaseConfig: {
        apiKey: '123ABC..',
        authDomain: 'XYZ.firebaseapp.com',
        databaseURL: '[***]
        projectId: 'XYZ',
        storageBucket: 'XYZ.appspot.com',
        messagingSenderId: '***',
        appId: 'CHANGEIT',
        chat21ApiUrl: '<Chat21云函数Firebase端点>'
    },
     chat21Config: {
        "appId": "tilechat",
        "MQTTendpoint": "mqtt://<MQTT端点>",
        "APIendpoint": "http://<MQTT API端点>"
    },
    "apiUrl": "https://<Tiledesk API URL>",
    "baseImageUrl": "https://<基础图片URL>",
    "dashboardUrl": "https://<控制台URL>"
};

配置参数说明

• logLevel：支持4种日志级别，顺序为：Error = 0 < Warn = 1 < Info = 2 < Debug = 3
• fileUploadAccept：控制可上传文件类型，默认接受所有类型

推送通知配置

1. 打开/src/firebase-messaging-sw.js，将messagingSenderId替换为你的messagingSenderId，详见：[***]
2. firebase-messaging-sw.js必须可通过Web应用根目录访问（如：[***]
3. 构建后检查manifest.json的gcm_sender_id，Firebase正确值为："gcm_sender_id": "103953800507"

（可选）***密码认证配置

在Firebase控制台打开Authentication > SIGN IN METHOD，启用Email/password登录提供商并保存，允许用户通过登录Web应用，详见：[]

应用运行

在浏览器运行

执行：ionic serve

添加浏览器平台并构建

bash
cordova platform add browser@latest
ionic cordova build browser

部署指南

部署到Web服务器（Apache或Nginx）

将platforms/browser/www目录内容复制到Web服务器的公共目录

部署到Firebase Hosting

1. 安装Firebase CLI：npm install -g firebase-tools
2. 登录Firebase：firebase login（如已登录可跳过）
3. 进入项目目录：cd platforms/browser，执行firebase init
   • 选择hosting（按空格键选择）并回车
   • 选择你的项目并回车
   • 回答配置问题：
     • "公共目录"：输入www并回车
     • "配置为单页应用？"：输入N并回车
     • "文件www/index.html已存在，是否覆盖？"：输入N并回车
4. 部署：firebase deploy
5. 在Firebase控制台点击Hosting并访问项目链接，详见：[***]

在Android设备运行

• 模拟器：ionic cordova run android
• 物理设备：ionic cordova run android --device

在iOS设备运行

• 模拟器：ionic cordova run ios
• 物理设备：ionic cordova run ios --device

使用Docker运行

基本运行

在8080端口运行Chat21-ionic：

bash
curl [***] --output .env
nano .env # 正确配置.env文件
docker run -p 8080:80 --env-file .env chat21/chat21-ionic

Docker品牌定制

如需自定义logo和资源，可挂载Docker卷到assets文件夹，覆盖卷中的资源文件：

bash
docker run -p 8080:80 --env-file .env --mount source=chat21-ionic-assets-vol,destination=/usr/share/nginx/html/assets  chat21/chat21-ionic

自动登录

通过在聊天URL中添加JWT token作为查询参数实现自动登录：

typescript
"http://localhost:8100/#/conversation-detail?jwt=<JWT_TOKEN>"