Skip to main content
Categories
フロントエンド・フレームワーク中級の学習学習

チャットアプリ作成 その① 作り直します

  • Post Author
    By pitang1965
  • Post Date
    Fri May 14 2021
pexels-photo-6457544

はじめに

以前作ったチャットアプリに不具合があったので、GraphQLTailwind CSSを使って作り直すことにします。その過程をメモします。

以前のやつは、Node.js + Express.js + React で作成していてHerokuにデプロイしていたのですが、不具合があったのでしょう。いつの間にかアプリケーションエラーとなって動かない状態になっていました(涙)。

これを復活させてもよいのですが、新たに作り直すことにしました。

参考にしたのは以下の動画です。以下の動画はTailwind CSSは使用していません。

Realtime Chat App | React, GraphQL & Websockets

この動画では Webpack 5 Module Federation というとても興味深い技術が紹介されていました。フロントエンドを複数のWebpackビルドしたモジュール間で、片方向あるいは双方向に呼び出せるようになっていて、全体で一枚岩にみえるようになるというものです。

同じようなやつを作って動いたには動いた(実験)のですが、CSSをうまく当てられず、またチャットを作るという目的には必須ではないので省きました。また、CSSは今回 Tailwind CSS を練習のため使うことにしました。

今回使うライブラリ等

クライアント側

  1. React (GatsbyやNext.js、create-react-app は今回使いません)
  2. @apollo/client
  3. graphql
  4. subscriptions-transport-ws
  5. tailwindcss

サーバー側

  1. graphql-yoga

デプロイの方法

最初、Vercelにデプロイしようと思ったのですが方法がわからなかったので、最終的にクライアントとサーバーを分離して次のようにデプロイしました。

クライアント側

  • Netlifyにデプロイしました。こちら
    • 現在、サーバーが無料枠のHerokuのためかスリープ後の起動に時間がかかります(参考:Heroku(無料)を寝かさない方法)。
    • Webpackの設定は、開発環境と本番環境の共通部分と差分の3つのファイルに分けました。(参考:Production
    • Netlifyのビルドの設定は次にしました。サーバーも収容したリポジトリのURLを指定しています。
Build settings
現状のチャットクライアント

サーバー側

現状のサーバーのURLにアクセスしたところ

現状の問題点

まず、Herokuの無料枠を使っているからか、起動に時間がものすごくかかる場合があります。他にもざっと次の改良が思いつきました。

  1. Herokuに待たされる間のローディング表示
  2. スクロールが必要なくらいメッセージがある場合に、常に最新が表示されるための自動スクロール
  3. 「ピータン」を「ピー」と2文字だけ表示していて、省略しない名前がわからない件
  4. ログイン機能の追加(現在のユーザ名のテキストボックスは廃止)
  5. SNS認証の追加
  6. 汚い言葉は入力できないようにする
  7. 特定のキーワードに反応するようにする
  8. 現在だれがログインしているかわかるようにする
  9. 複数の部屋を追加する
  10. 永続化(現在はメモリ上)