0
1

目次

1. 概要
2. 背景
3. 技術スタック
4. アプリの詳細
5. GitHubリポジトリ
6. まとめ

はじめに

 このアプリはGolangWebsocketによる双方向通信を学びたいというモチベーションのもと、唐突な思いつきで作成したアプリです。(現在もまだ修正中。最終的には一時的にでもデプロイしたい。)
やさしい目で見てもらえると嬉しいです。
 とりあえずアプリの発信のために本記事を書いてます。
(※使用する場合はリポジトリの注意書きを参照して下さい。)

 また双方向通信やGolangについてはまた別でまとめられればと思ってます。
(現状あまりやる気が...)

1. 概要

 みなさん、こんな経験ないですか?

学校で、授業中寝てる友達に先生が気づくように、音を立てて先生の注目を引いたりして、どうにか友達をチクりたい!

みたいな経験ありませんか?(周りにはないと言われてしまった...)
そんなふざけ合いや、チクリ合いをアプリという形で行えるものになります!

2. 背景

 初めはただただGolangとWebsocketを触ってみたいというモチベーションからはじまりました。
 僕は何か新しい言語やライブラリ、技術を触る際は実際にやってみるとりあえず何か作ってみるというのが性に合っているので今回もとりあえず何か作ってみるか精神でした。
 ただチャットアプリなどはあり触れてたのでもう少し違うものが作りたいとなり今回のアプリを作成しました。

3. 技術スタック

大まかなスタックは以下の通りです。(詳細はリポジトリを見てみて下さい。)

  • Frontend

    • TypeScript
    • Next.js
    • React
    • Recoil
    • Websocket client
    • daisyUI!
  • Backend

    • Golang
    • gin
    • gorilla/websocket
    • Swaggo

4. アプリの詳細

  • 前提

    本アプリはまだローカルでしか使用できません。(これからデプロイやその他諸々やっていくつもりです。)
    また、本アプリは座席番号が振られた席などについていることを想定しています。

 まずは以下のホーム画面で自身の座席番号を入力してログインします。
home.png

 ログイン後は以下の画面に遷移します。
基本的にアプリからのメッセージや通知はサイドにあるヒストリーにて表示されます。
スクリーンショット 2024-05-14 23.10.06.png

 その後は同様にログインしている他の席の人の席番号を指定して密告ボタンを押すことで密告対象とされたユーザーの画面にモーダルが表示されます。
この密告し、対象ユーザーにモーダルを出す部分や密告する部分にてWebsocket通信を用いています。
send-alert.png

タイムオーバーになった場合は、以下の画像のように接続されている密告対象以外のユーザーへ寝ていることがブロードキャストされてしまいます。😱
(通知はサイドにあるヒストリーにて表示されるが、いずれはタイマーオンを鳴らすなどを検討したい)
密告後のブロードキャストログの画像

5. GitHubリポジトリ

よかったらリポジトリも覗いてみて下さい。
(あまり参考にはなりません...)

6. まとめ

今回はGolang、Websocket通信を触りたいから始まり、よくわからんアプリを作るまでのお話でした。
まだまだバグや未完成部分が多いことやコードが汚すぎるのでこれから直しつつ、できればデプロイまでしてみなさんに遊んでいただけるようにしたいです。
(できるように頑張れ、わい)

また、中身のGolang、Websocketについてはまた別でまとめたいと考えてます。
(気が向いた時にやるお)

ここまで読んでくださった方、長々とお付き合いありがとうございました。
(何かあればコメントください。)

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1