Tyloo Chat

Tyloo-chat（模倣wechat）

オンラインアクセスアドレスは一時的に閉じられています

説明します

このプロジェクトフォークは、一般的なチャットから最適化およびアップグレードされました。オープンソースのアイデアをありがとう、Boss Genalに感謝します！

まだ最適化し続ける時が来たので、お楽しみに!!!

かなり良いと思うなら、星をクリックしてそれを奨励してください!!!

電子バージョンのクライアントがリリースされました、詳細についてはリリースを参照してください

いくつかの関数のスクリーンショット

• 全体的なインターフェイス

• 連絡先

• グループチャット機能（グループメンバーリスト、オンラインステータス、グループメンバーの追加のサポート）
• セッションリスト（トップ/削除）

• メッセージ撤回機能

Electronバージョンクライアント（Electron_versionブランチにあります）

• Windowsバージョン（exe）

• Macバージョン（DMG）

特徴

• ユーザーログイン登録（サードパーティシステムに組み込まれたシングルログインをサポート）
  • 単一のサインインアドレス、ログイン後に右上隅のオンライン通信ボタンをクリックします
• グループチャット（QQグループと同様）
  • 友達を招待してグループチャットに参加してください
  • グループ名/グループの発表を変更します
• 友達の機能
• 連絡先の機能（サードパーティシステムの組織構造へのアクセスをサポートし、チャットを直接開始します）
• チャット機能
  • 絵文字絵文字パック
  • 画像送信/画像プレビュー
  • 添付ファイルを送信します
  • メッセージページネーション
  • メッセージ撤回/コピー
• カスタムテーマ
• セッショントップ/削除
• リマインダーを再接続します
• スマートアシスタント（デフォルト、メインブランチにあるES検索エンジンを使用するには、ESシソーラスの手動で作成される必要があります）
• サードパーティAPIロボット（feature_apirobotブランチにある現在のオンラインデモバージョン）
• Electronバージョン（Electron_version Branchに位置し、DMGとEXEクライアントの生成をサポートします）

テクノロジースタック

• フロントエンド

  • Vue Cli 4.x
  • vueのantd

• 後部

  • ネストJ
  • Typeorm
  • mysql

• socket.io

• ElasticSearch ES検索エンジン（迅速かつ自動応答のためにロボットに使用）

• nodejiebaノードバージョン中国語単語セグメントター

データベーステーブル構造設計

環境の準備

• mysql
• チャットデータベース（手動で作成する必要がありますが、データベースエンコード形式はutf8bm64``utf8bm64``utf8bm64であることに注意してください!!! ）
• ノードV10.16.3

コードを引くときに注意すべきこと

 // windows系统需要配置一下,提交时转换为LF，检出时不转换
git config --global core.autocrlf input

 // 设置为区分大小写
git config core.ignorecase false

プロジェクトを実行します

 // client
cd client 
cnpm i
npm start 

 // server
cd server
cnpm i
npm run start 

展開方法

展開する

Centosの下にチャットルームを展開します

サードパーティの統合/シングルサインイン

• 次のジャンプコードはサードパーティシステムに組み込まれており、 userIdおよびusernameパラメーターが必要です。

 let chatUrl // 当前聊天室客户端地址
let userId // 当前系统用户userId
let username // 当前系统用户昵称

window . open ( ` ${ chatUrl } ?userId= ${ userId } &username= ${ username } ` ) ;

• チャットルームはパラメーターを取得し、ログインを自動的に完了します（最初にログインする場合は、アカウントを自動的に登録します）

• チャットルームクライアントVUE_APP_ORG_URLを設定して、サードパーティシステムの組織構造のインターフェイスアドレスを取得する

  • vue_app_org_urlを設定します

   // .env.xxx
  // 此接口可以获取到第三方系统的所有部门和人员信息,注意为嵌套tree结构
  VUE_APP_ORG_URL = http : / / 127.0 .0 .1 : 8080 / api / getDeptUsersTree

  • 連絡先インターフェイスに切り替えて、リクエストを自動的に発行します

   // Contact.vue
  axios . post ( process . env . VUE_APP_ORG_URL ) . then ( ( res ) => {
      this . organizationArr = res . data . data ;
  } ) ;

  • 返品値形式は次のとおりです

   interface node {
      id: string ; // id
      label: string ; // 名称
      flag: boolean ; // 是否有下级结点
      children: node [ ] ; // 下级结点
  }

  • サードパーティの組織構造を統合する必要がない場合は、 VUE_APP_ORG_URLをクリアし、他の状況で自分でカスタマイズして変更してください。

アイデアの概要

WebSocketの確立プロセス

トト

• @功能实现
• 消息转发
• 代码性能优化
• 群聊功能继续完善
• 微信快捷登陆
• Electron客户端检查更新

コミュニケーショングループ