Vue.js勉強中に、ふとDiscordのクローンを作ってみたいと思ったので実際にやってみました。

vue.jsで作ったdiscord-clone

#本家とクローンを比較

本家のスクショが以下（ブラウザ版）

そして今回作ったクローンのスクショが以下

チャットのリアルタイム送受信が行えます
Discord本家はWebSocketは使っていないみたいですが、私はWebSocketのほうが使い慣れてるのでSocket.IOを採用してみました。

フロントはVue.jsとVuetifyですが、Discord風のUIに寄せるためにけっこうscssを書きました。

#レスポンシブにも対応
本家はスマホ向けアプリがあるのでレスポンシブではありませんがレスポンシブにしてみました。

スマホ表示のときはVuetifyのv-navigation-drawerコンポーネントにサイドメニューを格納するようにしました。

#アバター変更機能

なんとなく実装。
ただしリロードしないとメンバーリストやチャット上では変更が適用されませんTT

需要のかけらもありませんが、やっぱ自分が作りたいものを作るのが最高です