鉄腕アトム チャットルーム
コードクラウド
オンラインアドレス www.genal.fun (無効であり、今後展開される予定はありません)
ご提案がある場合は、問題エリアにアクセスしてください
プロジェクト紹介
? 暇なときに、フロントエンドのスキルを統合するためのチャット ルームを作成したいと思い、2020 年 6 月 24 日に鉄腕アトム チャット ルームの開発を開始しました。
? プロジェクトは完全な typescript を使用して開発されており、将来の機能反復の基礎を築きます。もちろん、タイプスクリプトも大好きです。
? 現在、チャット ルームには完全なチャット機能が備わっています。将来的にはさらに優れた機能が開発される予定です反復は現在停止されています。興味のある友達は自分でフォークして開発することができますし、好きなように変更することもできます。時間があるときに新機能をアップグレードします！
プロジェクトインターフェース
PC版
携帯端末
機能紹介
- モバイル対応
- ユーザー情報（アバター/ユーザー名/パスワード）の変更
- グループチャット/プライベートチャット
- グループの作成/グループに参加/グループから脱退/あいまい検索グループ
- 友達追加/友達削除/あいまい検索ユーザー
- メッセージのページネーション
- 絵文字
- 画像送信/画像プレビュー
- オンライン人口統計
- カスタムテーマ
- 再接続リマインダー
技術概要
- Typescript : JavaScript のスーパーセット。その最大の利点は、型システムを提供し、コードの可読性と保守性を向上させることです。
- Vue2.6.x : フロントエンドのプログレッシブ フレームワーク。
- Socket/io : リアルタイム通信、WebSocket サードパーティ ライブラリ。
- Vuex : Vue.js アプリケーション専用に開発された状態管理パターン。
- Nestjs : 効率的でスケーラブルな Node.js サーバー側アプリケーションを構築するためのフレームワークであり、TypeScript に基づいて記述され、OOP1、FP2、および FRP3 の関連概念を組み合わせています。
- Typeorm : 最新の JavaScript 機能をサポートし、データベースを使用するアプリケーションの開発に役立つ追加機能を提供します。
- ES6+ : ES6+ 構文を使用すると、アロー関数、async/await、その他の構文が非常に簡単に使用できます。
- SASS (SCSS) : SCSS を CSS 前処理言語として使用すると、最も効率的な方法で、少量のコードで複雑なデザインを作成できます。
データベーステーブル構造の設計
環境構成
- データベース mysql およびチャット データベース (データベース形式は utf8mb4 であることに注意してください)
- ノードv10.16.3
プロジェクトを実行する
- フロントエンドプロジェクト
cd genal - chat - client
npm i
npm run serve
mysql の設定 mysql が接続できず、エラー ER_NOT_SUPPORTED_AUTH_MODE が報告される場合は、mysql バージョンの非互換性が原因です。この記事 https://blog.csdn.net/qq_41831345/article/details/83150502 を参照してください。
データベースには SQL スクリプトはありません。バックエンドのapp.module.tsでデータベースのパスワードを変更し、新しいchatデータベースを作成するだけです。
バックエンドプロジェクト
cd genal - chat - server
npm i
npm run start: dev
システム反復記録
クリックして表示
v1.0.0
関数
- 新しいユーザーを追加
- 新しいグループを追加
- グループチャット
v1.0.0インターフェース
v2.0.0
関数
- グループチャット/プライベートチャット
- グループを作成する/グループチャットに参加する/あいまい検索グループ
- 友達の追加/友達のあいまい検索
- ユーザー名/アバターのアップロードを変更する
- 絵文字
- メッセージのページネーション
v2.0.0インターフェース
v3.0.0
関数
- グループチャット/プライベートチャット
- グループを作成する/グループチャットに参加する/あいまい検索グループ
- 友達の追加/友達のあいまい検索
- 画像のアップロード/画像の貼り付け送信/画像プレビュー
- ユーザー名/アバターのアップロードを変更する
- 絵文字
- メッセージのページネーション
v3.0.0インターフェース
v2.0.0と同じ
v4.0.0
関数
- グループチャット/プライベートチャット
- グループを作成する/グループチャットに参加する/あいまい検索グループ
- 友達の追加/友達のあいまい検索
- 画像のアップロード/画像の貼り付け送信/画像プレビュー
- ユーザー名/アバターのアップロードを変更する
- 絵文字
- メッセージのページネーション
- モバイル対応
v4.0.0インターフェース
v2.0.0と同じ
v5.0.0
関数
- グループチャット/プライベートチャット
- グループの作成/グループチャットに参加/グループから脱退/あいまい検索グループ
- 友達追加/友達削除/友達のあいまい検索
- 画像のアップロード/画像の貼り付け送信/画像プレビュー
- ユーザー名/アバターのアップロードを変更する
- 絵文字
- メッセージのページネーション
- モバイル対応
- オンライン人口統計
- 再接続リマインダー
v5.0.0インターフェース
v6.0.0
関数
- モバイル対応
- ユーザー情報（アバター/ユーザー名/パスワード）の変更
- グループチャット/プライベートチャット
- グループの作成/グループに参加/グループから脱退/あいまい検索グループ
- 友達追加/友達削除/あいまい検索ユーザー
- メッセージのページネーション
- 絵文字
- 画像送信/画像プレビュー
- オンライン人口統計
- カスタムテーマ
- 再接続リマインダー
v6.0.0インターフェース
著者
ギットハブ：エジソン
寄稿者リスト
mtnbgx、BoBoooooo、Nyaasu66、BeanCookie (順不同)
導入方法
鉄腕アトム チャット ルームの展開手順
さらに詳しく
Typescript を使用して強力な Web チャット ルームを作成する
