Skip to content

vespaengine/formableView

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

67 Commits
 
 
 
 
 
 
 
 

Repository files navigation

formableView

🌱概要

グループチャットができるアプリケーション

✨デモ

output

📝説明

このアプリケーションは、グループチャットができるアプリケーションです。

グループチャットができるアプリケーションと言えば、日本ではLINEやKakaoTalkなどが有名ですね。

このアプリケーションでは、例に挙げたアプリケーションのメイン機能であるリアルタイムでのグループチャットを楽しむことができます!

アプリケーションは簡単に起動でき、友達を招待してすぐにグループチャットを始めることができます。

アプリケーションの実行には、ターミナルという黒い画面にコマンドを入力します。

基本的な機能として、チャットルームの作成/参加/ユーザー同士でのグループチャットができます。

補足

説明で登場する用語について補足します。

用語の意味がわからない時は、下記表を確認してください。

用語 意味
ターミナル コンピュータに対してテキストベースのコマンド入力と出力を行うインターフェースのことです。
このインターフェースは、コマンドラインインターフェース(CLI)とも呼ばれます。
デモで表示されている黒い画面のことです。
コマンド コンピュータに対して特定の操作を実行するよう指示するテキストベースの命令です。
コマンドを入力することで、コンピュータは、コマンドの意味を読み取りアクションをおこします。

🧰前提条件

このアプリケーションを実行するには、下記ソフトウェアを事前にインストールしておく必要があります。

インストールされていない場合は、インストール/使用方法/使用例で記載されているコマンドが実行できませんので

必ずインストールしてから進めてください。

Git

Gitがインストールされていない場合は、下記手順でインストールしてください。

  1. ターミナルを起動する。
    使用するOSによりターミナルの名称が異なりますので注意してください。
    (例. Windows:コマンドプロンプト,mac:ターミナル)

  2. Gitがインストールされているか確認する。
    git version 2.34.1 のように表示された場合は、Gitがインストールされています。
    以降の手順はスキップしてください。
    また、ターミナルは引き続き使用しますので開いたままにしてください!

git --version
  1. システムを更新する
sudo apt-get update
  1. Gitをインストールする
sudo apt install git
  1. Gitがインストールされたことを確認する。
    git version 2.34.1 のように表示されていれば、Gitのインストールは完了です!
git --version

Python 3.x

Pythonの公式サイトからあなたのPCのOSに合わせて、ダウンロードしてください。

ダウンロードしたファイルを使用してインストールできます。

Pythonがインストールされているかは、下記コマンドで確認することができます。

Python 3.10.12のように表示されていれば、Pythonはインストールされています。

python3 --version

🍴インストール

クローン

このアプリケーションをあなたのPCで実行するために、クローンします。

クローンとは、このアプリケーションの実行に必要なファイル(リポジトリのコンテンツ)をあなたのPCのローカル環境へコピーすることです。

下記手順でクローンしてください。

  1. リポジトリをクローンする
git clone https://github.com/Recursion-Group-Backend-c/CaseCompass.git
  1. クローンしたリポジトリへ移動する
cd CaseCompass

🚀使用方法

  1. ターミナルを3つ起動します。
    起動した3つのターミナルについては、以降の手順では下記名称で呼ぶこととします。
ターミナル 名称
ターミナル1 サーバ用ターミナル
ターミナル2 クライアント用ターミナル1
ターミナル3 クライアント用ターミナル2
  1. サーバ用ターミナルに下記コマンドを入力する
python3 server.py
  1. クライアント用ターミナル1に下記コマンドを入力する
python3 client.py
  1. クライアント用ターミナルに表示される指示に従い、チャットルームを作成する
  2. クライアント用ターミナル2に下記コマンドを入力する
python3 client.py
  1. クライアント用ターミナルに表示される指示に従い、手順4.で作成したチャットルームに参加する
  2. ユーザー同士でグループチャットを楽しむ
  3. グループチャットを終了したい場合は、クライアント用ターミナル1にexitと入力して終了する

🙋使用例

一通りの手順のイメージはデモを参考にしてください。

  1. ターミナルを3つ起動します。
    起動した3つのターミナルについては、以降の手順では下記名称で呼ぶこととします。
ターミナル 名称
ターミナル1 サーバ用ターミナル
ターミナル2 クライアント用ターミナル1
ターミナル3 クライアント用ターミナル2
  1. サーバ用ターミナルに下記コマンドを入力する
python3 server.py
  1. クライアント用ターミナル1に下記コマンドを入力する
python3 client.py
  1. クライアント用ターミナルに表示される指示に従い、チャットルームを作成する。
    チャットルームの作成に必要な入力は、下記のように入力しました。
    表示される指示については、ユーザー入力についてを確認してください。
    Input user name(Up to 10 characters) : user1
    Input operation(choose 1 or 2) : 1
    Input room name(Up to 8 characters) : room1
    Password conditions.
    Must be between 6 and 11 characters and include the following characters.
    ・Uppercase letters
    ・Lowercase letters
    ・NumbersInput
    Input password : Abc123
    Input room name size (Range 0 to 255): 2
    入力が完了すると、room created!と表示されたので、チャットルームの作成に成功しました。
  2. クライアント用ターミナル2に下記コマンドを入力する
python3 client.py
  1. クライアント用ターミナルに表示される指示に従い、手順4.で作成したチャットルームに参加する。
    チャットルームの参加に必要な入力は、下記のように入力しました。
    表示される指示については、ユーザー入力についてを確認してください。
    Input user name(Up to 10 characters) : user2
    Input operation(choose 1 or 2) : 2
    Input room name(Up to 8 characters) : room1
    Password conditions.
    Must be between 6 and 11 characters and include the following characters.
    ・Uppercase letters
    ・Lowercase letters
    ・NumbersInput
    Input password : Abc123
    Input host token : 858e85fc-6143-4086-99d2-4205135ae259
    入力が完了すると、Chat room: room1 successfully createdと表示されたので、チャットルームに参加することができました。
  2. ユーザー同士でグループチャットを楽しむ。
    クライアント用ターミナル1とクライアント用ターミナル2でグループチャットができる状態になりました。
    試しにグループチャットを利用してみます。
    クライアント用ターミナル2(user2) : Hello!
    クライアント用ターミナル1(user1) : Nice to meet you!
    どちらのクライアント用ターミナルも入力したメッセージが共有されています!
  3. グループチャットを終了したい場合は、クライアント用ターミナル1にexitと入力して終了する。
    終了したいので、クライアント用ターミナル1にexitと入力しました。
    以降に何か入力してもメッセージが共有されなくなりました。
    グループチャットが利用できなくなったのがわかります。

ユーザー入力について

用語 意味
Input user name(Up to 10 characters) : ユーザー名を入力して下さい。
文字数は、最大10文字までです。
入力例. user1
Input operation(choose 1 or 2) : チャットルームを作成するか参加するか選択してください。
・1 : チャットルームを作成する
・2 : チャットルームに参加する
入力例. 1
Input room name(Up to 8 characters) : room1 チャットルーム名を入力してください。
文字数は、最大8文字までです。
入力例. room1
Password conditions.
Must be between 6 and 11 characters and include the following characters.
・Uppercase letters
・Lowercase letters
・NumbersInput
Input password :
パスワードを設定してください。
6~11文字で下記の文字を含めてください。
・アルファベットの大文字
・アルファベットの小文字
・数字
入力例. Abc123
Input room name size (Range 0 to 255): チャットルームの最大人数を入力してください。
人数は、0~255人です。
入力例. 2
Input host token : ホストトークンを入力してください。
この指示は、Input operation(choose 1 or 2) :で2を入力した後に、表示されます。
チャットルームが作成された時に、トークンが表示されているはずなのでコピーして貼り付けてください。
入力例. 858e85fc-6143-4086-99d2-4205135ae259

💾使用技術

カテゴリ 技術スタック
開発言語 Python
インフラ Ubuntu
VirtualBox
その他 Git
Github

👀機能一覧

サーバ用ターミナル

image

クライアント用ターミナル1(user1)

image

クライアント用ターミナル2(user2)

image

機能 内容
メッセージの表示 アプリケーションの進行に必要なメッセージを表示します。
TCP チャットルームの作成と参加について チャットルームの作成と参加については、シーケンス図を作成しました。
チャットルーム作成と参加で取りうるパターンを確認してください。
チャットルームの作成に必要な入力の要求 チャットルームの作成に必要な入力をユーザーに求めます。
チャットルームの参加に必要な入力の要求 チャットルームの参加に必要な入力をユーザーに求めます。
チャットルームの作成 チャットルームの作成に必要な入力が完了すると、クライアントはサーバへTCPR(カスタムプロトコル)を送信します。
TCPRの構成については、headerについてを確認してください。
サーバは、TCPRからデータを取得し、チャットルームを作成します。
チャットルームが作成中ということがわかるように処理が進むごとにチャットルームの作成状況(state)をクライアントへ送信します。
stateの内容は、下記のようになります。
0 : ルーム作成要求
1 : ルーム作成中
2 : ルーム作成完了
チャットルームの作成が完了すると、クライアントへ完了通知を送信します。
クライアントは、サーバから完了通知を受け取ると、ターミナルにroom created!と表示します。
ホストトークンの発行 チャットルームの作成が完了すると、サーバは、ホストトークンを発行します。
ホストトークンの発行が完了すると、クライアントへ通知を送信します。
クライアントは、サーバから通知を受け取ると、ターミナルにホストトークンと注記を表示します。
チャットルームの参加 チャットルームの参加に必要な入力が完了すると、クライアントはサーバへTCPR(カスタムプロトコル)を送信します。
サーバは、TCPRからデータを取得し、チャットルームに参加できるかチェックします。
チャットルームの参加が完了すると、クライアントへ完了通知を送信します。
クライアントは、サーバから完了通知を受け取ると、ターミナルにChat room: [roomname] successfully createdと表示します。
また、下記の場合は、チャットルームに参加することができません。
1.ユーザーが入力した、ホストトークンが存在しない
2.チャットルームの許容人数に達している
3.ユーザーが入力した、パスワードが正しくない
メンバートークンの発行 チャットルームの参加が完了すると、サーバは、メンバートークンを発行します。
メンバートークンの発行が完了すると、クライアントへ通知を送信します。
TCPコネクションの終了 TCPコネクションは、下記どちらかの処理が完了した場合は、終了します。
・チャットルームの作成とホストトークンの発行
・チャットルームの参加とメンバートークンの発行
UDP グループチャットでの会話 グループチャットには、UDPを利用しています。
チャットルーム内のユーザー同士でメッセージを送受信しやり取りを行います。
例えば、ユーザーが4人いた時、ユーザー1がメッセージが送信すると、メンバー全員のターミナルにユーザー1が送信したメッセージが共有されます。
送受信には、クライアントとサーバでデータをパケットとして共有しています。
パケットの構成については、UDP通信の下記項目を確認してください。
・クライアントからサーバに送信するパケット
・サーバからクライアントに送信するパケット
リレーシステムの削除 チャットルーム内のユーザーはリストで管理しています。
メッセージの共有は、リレー形式になっており、ユーザーが退出すると、退出したユーザーにはメッセージが共有されなくなります。
リレーシステムの削除されるパターンは、下記の2通りがあります。
1.一定時間メッセージを送信していない
2.ユーザーが自ら退出したい
チャットルームの有効期間 チャットルームはホストが退出することにより自動的に閉じられます。
閉じられたチャットルームには参加することはできません。

📜作成の経緯

Recursionというプラットフォームを通じて、コンピュータサイエンスとネットワークの基礎を学びました。

この学びを実際のプロジェクトに活かすため、同じ目的を持つユーザーとチームを組んで、アプリケーション開発に取り組むことにしました。

私たちは、メンバー間での詳細な議論を経て、学んだネットワークの知識を活用するのに最適なチャットアプリケーションをPythonで開発することを決定しました。

⭐️こだわった点

TCP通信

TCPは、新規チャットルームの作成または既存のチャットルームの参加という機能に利用しています。

headerについて

クライアントとサーバ間では、下記byte表のような、TCPR(カスタムプロトコル)を送受信してデータを共有しています。

image

byte表の各byteの情報は、下記のようになります。

image

チャットルーム作成と参加で取りうるパターン

チャットルーム作成と参加で取りうるパターンについて検討し、実装しました。

クライアントとサーバ間では、下記のようなパターンが必要になります。

image

取りうるパターンをもとにシーケンス図を作成しました。

シーケンス図には、下記のような情報を記載しています。

  • クラインアントとサーバ間でやりとりされるヘッダーの情報
  • TCP通信接続要求、許可、確率のタイミング
  • クライアントからサーバへのリクエストの内容
  • サーバからクライアントへのレスポンスの内容
  • サーバが実行する処理
  • TCPコネクション終了のタイミング
  • UDPへ切り替えるタイミング
パターン1.チャットルームの作成

image

パターン2.チャットルームの参加_成功時

image

パターン3.チャットルームの参加_失敗時

image

UDP通信

UDPは、グループチャットでの会話やリレーシステムの削除、チャットルームの有効期間の管理に利用しています。

グループチャットでの会話には、クライアントとサーバ間で、データをパケットとして共有しています。

パケットの構成について仕様をもとに必要なデータを整理した結果、クライアント→サーバサーバ→クライアントの2つに分けて、それぞれ下記のようなデータサイズの配分でパケットとして送信することとしました。

クライアントからサーバに送信するパケット

データ データサイズ(全体:4096byte)
token 32byte
user_name 255byte
message 3,809byte

サーバからクライアントに送信するパケット

データ データサイズ(全体:4094byte)
user_name 255byte
message 3,839byte

チーム開発

チーム開発を実施する場合は、各メンバー間でのコミュニケーションは不可欠です。

コミュニケーションツールとして、下記のようなアプリケーションを利用しました。

アプリケーション 目的
Discord チャットでの連絡ややりとり
GitHubのissue 課題管理
Ovice ミーティング

ミーティングでは、チーム開発が順調か、困りごとや改善点がないかなどを確認しました。

ミーティング実施後は、アクションの確認や議論の内容を見返すために議事録を作成しました。

議事録には、3つの項目について定期的にチームでミーティングを開催し議論した内容を記載しています。

項目 内容
やったこと(その週に実装した内容) 前回のミーティング以降に各メンバーで実施した内容を共有します。
計画通りに進められているか確認します。
計画から遅れている場合は、各メンバーの進捗と合わせて検討し、マイルストーンを後ろにずらすか他メンバーで作業を巻き取るかなどを議論します。
直面した問題 仕様の確認や設計、実装時にでた不明点や問題、困りごとを共有します。
共有することで、再発防止やメンバー同士の共通認識の確認、改善点などがわかります。
今後の課題 次回のミーティングまでに、各メンバーが実施する内容を記載しています。
ここで決めた内容が、次回のミーティングまでの各メンバーのアクションになります。

議事録は、下記リンクから確認してください。

dev-log

📮今後の実装したいもの

  • デスクトップアプリケーションとして利用できるようにする

📑参考文献

公式ドキュメント

参考にしたサイト

About

ジェスチャーによる移動、拡大縮小、回転ができるViewを作ってます。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages