Wechat Wecat

ウィーキャット

導入

• Vue.js ファミリ バケット + WebSocket + Node.js + Koa2 + MongoDB に基づくインスタント チャット プロジェクト
• 機能部分はWeChatを参考にしており、いくつかの興味深い機能が追加されています。プロジェクト コードのコメントは非常に詳細であり、Vue、Node.js、koa を学習するための優れたフルスタック入門プロジェクトです。
• プロジェクトのフロントエンドとデプロイは独立して完了します。さまざまなやり取りやさまざまなビジネス ロジック機能に不備がある場合は、お気軽にご指摘ください。

プロジェクトの表示

1. ログイン

2. 登録する

3. パスワードを取得する

4. 登録が完了したら、アバターを選択します

5.メインパネル

6. 友達を追加する

7. フレンド情報パネル

8. メッセージとファイルを送信する

9.多機能パネル、絵文字の送信

10. 個人設定メニュー

11. 管理者ページ、ユーザー情報

12. すべてのチャット記録をクエリする

13. チャット履歴の詳細

14. APIドキュメント

ディレクトリ構造

1. サーバーはサーバーです
2. public は静的ファイルです
3. db は MongoDB エクスポート バックアップです。
4. src はプロジェクトフォルダーです

インストールチュートリアル

1. プロジェクトのクローンを作成しますgit clone https://github.com/imzusheng/Wecat.git
2. cd プロジェクトのルート ディレクトリ、依存関係のインストールnpm install
3. サービスの実行npm run serve
4. cd ./server を実行し、サーバーの依存関係をインストールしますnpm install
5. データベースをインポートしますmongorestore -d wecat ./db
6. サーバーを実行しますnpm run dev

テストアカウント

ユーザーID: [email protected]
パスワード: a123456

TODO

• ログイン
• 重複ログインを防止する
• 最終ログイン時間
• 最近のログイン場所 (省-都市-地区)
• 登録（メール認証）
• パスワードの取得（メール認証）
• ユーザーのアバターを選択
• サインアウト
• 友達とのピアツーピアチャット
• WSハートビート接続と切断再接続
• オンラインおよびオフラインで友達になるためのプロンプト
• 友達を追加して友達リクエストを確認する
• 友達リクエストの通知
• 未読メッセージのリマインダー
• ユーザーを検索する
• ユーザーのパーソナライズされた構成
• チャット履歴の遅延読み込み
• 友達の入力状況がリアルタイムに更新される
• ウェブサイトのタイトルには未読メッセージの数がリアルタイムで表示されます
• 最近チャットした友達が上部に固定されます
• バックエンド管理
• チャット画像とファイルのアップロード（複数アップロード）
• チャットの写真とファイルのプレビューとダウンロード
• グループチャット
• ユーザープロフィールカード
• 友達を削除する
• グループを作成する
• グループ情報カード
• グループに参加する
• グループを離れる

関連技術スタック

• VueCli3
• ビュークス
• Node.js
• 要素-ui
• アクシオス
• モンゴDB
• コア2
• Webソケット
• うーん

注意事項と概要

• 複数のファイルを分割してアップロードする
• Vue Router History モードで Web サイトの非ルート ディレクトリにデプロイされます。
• js キーボード監視は、メッセージを送信するための Ctrl + Enter キーの組み合わせを実装します
• ES6 モジュールを使用して独自の Websocket サービスをカプセル化する

について

• 電子メール [email protected]
• プロジェクトアドレス
• 私について
• ギットハブ
• ジーティー