[ golang ] GO言語で認証機能つきのチャットアプリを作ってみた。

[ golang ]  GO言語で認証機能つきのチャットアプリを作ってみた。

こんばんは、七色メガネです。

前回までの記事で、WebSocketを使ったチャット機能とgomniauthを使用した認証機能が作成できたので、今回はそれらを統合してチャットアプリを作成してみたいと思います。

なお今回の実装は下記の書籍を参考にしています。
がチャット画面などはアレンジしているので、出来上がりは書籍のものとは多少異なったものになっているのでご了承ください。

 

技術のおさらい

WebSocket を使用したチャット機能の実装

よければ以下の記事をご覧ください。

[ golang ] WebSocketを使ったチャット機能を実装してみる。

gomniauth を使用した認証機能の実装

よければ以下の記事をご覧ください。

[ golang ] GO言語でgomniauth を使用して認証機能を実装してみる。

仕様

今回作るチャットアプリは、次の仕様に基づくものとします。

  • アプリはログイン処理を行うログイン画面と、チャット処理を行うチャット画面の2画面を持つものとする。
  • ユーザはチャット画面に遷移する前に、ログイン画面で認証を行うものとする。過去に行った認証データが消去されていなければ、ログイン画面には遷移せずチャット画面に遷移するものとする。
  • ログイン画面では、GitHubあるいはGoogleアカウントを使用して認証を行うものとする。
  • チャット画面では、認証を行ったプロバイダから取得されるユーザ情報を取得して表示するものとする。
  • チャット画面では、WebSocketを使用したチャット処理が行われるものとする。
  • チャット画面では、チャットを入力した後、発言したユーザ情報に続けてチャット内容が表示されるものとする。

処理イメージの図解と解説

処理イメージを図解します。毎度手書きでごめんなさい…。

  1. サーバ側のmainが起動すると、各種ハンドラの起動とchatroomモデルの生成 (あとは図には無いですがサーバの起動) が行われます。
  2. ユーザが localhost:8080/ にアクセスすると、”/” に対するハンドラが起動します。このハンドラはユーザの認証情報の有無を見極め、認証情報がなければ “/login” へ、過去の認証情報が有れば “/chat” へとリダイレクトを行います。
  3. “/login” へリダイレクトされると、ユーザに “login.html” がサーブされます。ユーザはここで、認証に用いるプロバイダを選択します。
  4. login.html でプロバイダが選択されると、”/auth” へアクセスが行われ、gomniauthを使用した認証処理が行われます。認証後、”/chat” へとリダイレクトされます。
  5. 認証情報が存在する状態で “/chat” へ到達すると、ユーザに “chat.html” が提供されます。この時 chat.html 内部のscript により、サーバとのWebSocket 回線が開通されます。同時に、サーバのchatroomモデルにユーザの情報 (socket情報) が登録されます。
  6. ユーザが chat.html 上でメッセージを入力し送信ボタンを押すと、開通されたwebsocket経由でサーバにメッセージが送られ、chatroomモデルのメッセージ・チャネルにメッセージが到達します。
    このメッセージ・チャネルでは到達したメッセージを、登録されているユーザ全てに送信します。
  7. サーバのメッセージ・チャネルからpushされたメッセージが開通されたwebsocketを通りユーザのブラウザに到達し、ユーザのチャット画面に表示されます。

実装

ではここから実装していきます。
量がちょっと多いのですが、復習の目的もあるので全ソースを簡単に解説していきます。
興味ない方は読み飛ばしてしまってください。
ソース自体は次のurlに置いてあります。

https://github.com/NanairoMegane/chatAppNeo

main.go

  • 各種ハンドラを起動する。
  • チャットルーム・モデルを作成して起動させる。
  • Webサーバを起動する。
main.go

 

handler.go

  • 認証以外に用いるハンドラを定義する。
handler.go

 

client.go

  • クライアントモデルの構造体を定義する。所属するルーム情報、開設されたソケット情報、メッセージ情報をもつ。
  • ソケットへの情報送信のメソッドをもつ。
  • ソケットからの情報受信のメソッドをもつ。
client.go

 

chatroom.go

  • チャットルームの構造体を定義する。
  • チャットルームの生成メソッドを定義する。
  • チャットルームの起動メソッドを定義する。
chatroom.go

 

message.go

  • 送受信するメッセージの構造体を定義する。
message.go

 

templates/login.html

  • ログイン画面。
login.html

 

templates/chat.html

  • チャット画面。
  • ユーザ情報は、クッキーに保存されている情報を引き出して表示する。
  • ソケットへの情報到達をイベントで監視し、受信したらチャットスペースに随時更新をかける。
chat.html

 

auth/auth.go

  • 認証に関するモデルの生成メソッドを定義する。
  • 認証に関する処理を行うハンドラを定義する。
auth.go

 

auth/info.go

  • 各プロバイダとの認証を行うためのキー情報などを格納する。

 

 

テスト

では実際に動かしてみます。

  1. 2つのブラウザを用意します。今回はChromeとVivaldiです。
  2. それぞれのブラウザで localhost:8080/ にアクセスします。ログイン画面に遷移するので、一方ではGithubを、もう一方ではGoogleを選択します。認証では各プロバイダが用意する認証ページに遷移し、認証に同意すると、指定したコールバック関数が呼び出されてチャット画面に移行します。
  3. 認証が終了するとチャット画面に遷移するので、それぞれのプロバイダに登録された情報が表示されていることを確認します。
  4. それぞれのブラウザでチャットを入力し、送信ボタンを押します。これによりsocketを介してルーム・モデルにメッセージが到達し、ルームは登録されているユーザ・モデルにメッセージを送信します。
  5. きた!
  6. ログアウトボタンを押すと、ログインページに遷移することを確認します。

まとめ

  • WebSocketを使用することで、簡単に双方向の通信が実現できる。
  • gomniauthを使用することで、簡単にプロバイダ認証を行うことができる。
  • html のスタイルに bootstrap を使うと、労せずいい感じなクール感が演習できる。
  • Cookie の勉強ができた。
  • 通信の勉強ができた。
  • GOの練習になった。
  • 意図せずhtml/css/jqueryの勉強ができた。

今回使用したsrc

https://github.com/NanairoMegane/chatAppNeo

参考

「GO言語によるWebアプリケーション開発」

golangカテゴリの最新記事