Skip to content

送信したメッセージに後からタグ付けできるチャットツール

Notifications You must be signed in to change notification settings

ut-code/postput

Repository files navigation

PostPut

送信したメッセージを後からチャンネル(タグ)に割り振ることができるチャットツールです。 Slackの代替として使えるようにすることを目指しています。

screenshot

Features

  • slackのチャンネル機能の代わりとして、タグでメッセージを振り分けることができます
  • 1つのメッセージに複数のタグをつける(=複数のチャンネルに送信する)ことができます
  • すでに送ったメッセージのタグをつけ直すことができます (間違ったチャンネルに話題を送ってしまっても訂正できる)
  • タグを検索し、選んだタグのついたメッセージのみ表示できます
  • ユーザーごとに頻繁に見るタグをサイドバーに登録しておくことができます(=チャンネルにスターをつける機能)
  • ユーザーごとに後で確認したいメッセージを保存しておくことができます(=ブックマーク機能)

Try

  • https://postput-test-server.onrender.com/ にデプロイしてあります
  • 一度も使われていないユーザー名であれば任意のパスワードでログイン(サインアップ)できます

環境構築

まずは Git で管理するためのディレクトリを作成し、VSCode で開きます。ターミナルを開き、次のコマンドを実行しましょう。

git init
git remote add origin [email protected]:ut-code/ut-communication.git
git switch -c main
git pull origin main
npm install

作業するときは作業用のブランチを作りましょう

git switch -c ブランチ名

作業をしたら、

git add -A
git commit -m コミットメッセージ
git push origin ブランチ名

(VSCodeなどでやってもよい)でpushをし、GitHubでPull Requestを作成しましょう

フロントエンド

npm run dev

をして、表示されるurl(http://localhost:5173/ など)をブラウザで開く

src/ 以下のファイルを編集しましょう

バックエンド

.envというファイルを作成し、以下の内容にしてください

DATABASE_URL="postgres://..."

実際のurlはここには書かないのでslackを見て

その後

npm run update-db
npm run server

で起動します

WebSocket

App.jsxを編集するとき以下を参考にしてください

フロントエンド側はsocket.jsxに実装されている。App.jsxからは

const socket = useSocket();

で使える(すでに書いてあるのでok)

(サーバー側はsocket.jsに実装されており、データベースとのやり取りはdatabase.js)

  • (ログイン)
     {"username": "a", "password": "a"}
    をPOST -> {"status": "success", "sid": sid}を取得
  • (WebSocketに接続する)
    • App.jsx: socket.setSid(sid); & socket.connect();
    • WebSocket: ws://localhost:3000/?sid=${sid}に接続
  • 自分のユーザー名, ユーザーid
    • App.jsx: socket.username -> "a", socket.userId -> 0
    • WebSocket: {type: "user", userId: 0, username: "a"}
    • database.js: getUser("a");, getUserById(0);
  • メッセージの送信
    • App.jsx: socket.send({text: "a", tags["a", "b"]});
    • WebSocket: {type: "createMessage", text: "a", tags:["a", "b"]}
    • database.js: createMessage({userId: 0, text: "a", tags: ["a", "b"]}, onError);
  • メッセージの取得
    • 現在見ているタグをsubscribeするとそのタグのメッセージが得られる、という形になっている
      1. subscribe
      • App.jsx: socket.subscribe(["a", "b", ...]);
        • useEffectでcurrentTagsが更新されたとき自動でsubscribeするようにしてあるのであまり気にする必要はない
      • WebSocket: {type: "subscribe", tags: ["a", "b", ...]}
      1. メッセージ取得
      • App.jsx: socket.messages -> subscribeしたタグに該当するメッセージのみが以下の形で得られる
       [
       	{
       		"id": 0,
       		"user": {"username": "a"},
       		"text": "a",
       		"sendTime": "date",
       		"updateTime": "date",
       		"tags": ["a", "b"],
       		"replyNum": 5,
       	},
       ]
      • WebSocket:
        • 初回 {type: "messageAll", messages: [...]}
        • 新規メッセージ追加時 {type:"messageAdd", message: {...}}
      • database.js:
        • 初回 getMessageAll(onError);
        • 新規メッセージ追加時 createMessageの戻り値
  • メッセージにタグを追加・削除
    • App.jsx: socket.updateMessage(メッセージid, ["a", ...]);
    • WebSocket: {type: "updateMessage", mid: メッセージid, tags: ["a", ...]}
    • database.js: updateMessage(mid, tags, onError);
  • 全タグの一覧
    • 消しました
  • 全タグを最近更新された順に一覧
    • App.jsx: socket.recentTags -> [{id: 0, name: "a", createTime: "date", updateTime: "date"}, ...]
    • WebSocket: {type: "tagRecentUpdate", tags: [...]}
    • database.js: getTagRecentUpdate(onError);
  • ユーザーの固定タグ
    • App.jsx: socket.favoriteTags -> [{name: "a"}, ...]
    • WebSocket: {type: "tagFavorite", favoriteTags: [...]}
    • database.js: userと同じ
  • 固定タグを設定
    • App.jsx: socket.setFavoriteTags(["a", "b", ...]) または socket.setFavoriteTags([{name: "a"}, {name: "b"}, ...])
      • なんでfavoriteTagsの取得と仕様違うんだ
      • ちなみにsocket.jsx内では名前被りを解決するためfavoriteTagsのセッター関数がsetFavoriteTagsLocalになっているのもややこしい
    • WebSocket: {type: "setFavoriteTags", favoriteTags: [...]}
      • なんでこっちはsetTagFavoriteじゃないんだ
    • database.js: updateFavoriteTags(userId, favoriteTags);
      • なんでこれだけsetじゃなくてupdateなんだ
  • 保留メッセージの数(#.keep-${userId}のメッセージ数)
    • App.jsx: socket.keepNum -> 0
    • WebSocket: {type: "keepNum", keepNum: 0}
    • database.js: getMessageAllからfilterする
  • 保留メッセージの設定
    • updateMessageでやる

タグ

  • 各メッセージに1つまたは複数のタグがつく
  • タグは #aaa のような形式
  • #を除いた部分がタグ名
  • .で始まるタグ名(#.ではじまるタグ)は使用できない&非表示
    • #.keep-${userId}: そのユーザーの保留メッセージ
      • 他のユーザーは見れない
    • #.reply-${messageId}: そのメッセージへの返信スレッド