5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Socket.io学習① 簡単なチャットアプリの構築1

Last updated at Posted at 2023-01-13

マルチプレイのオンラインゲーム開発に向けてsocket.ioの勉強をしている。
その中で見つけた良い参考動画がこちら

これを参考にして簡単なチャットアプリを構築しつつ、socket.ioとnode.jsの勉強をしていこうと思った。

まず、ネックになるのはそもそもnpmが何なのかである。
node.jsなどを始める際に必要になるパッケージ管理システムであるがそのインストール方法は複雑に見えた。
さらにMacについての説明は多く見られたがWindows用を探すのにも一苦労した。

結局こちらのサイト

を参考にしてインストールした。割と簡単で

こちらのサイトからインストーラー(nvm-setup.zip)をダウンロードして実行すれば良い。

そうすれば最低限の動作はするようになった。

そして、socket.ioについていよいよやっていくことになる。

公式のドキュメントと先ほど例に示した動画を用いれば難なく実行することができると思うが少々手こずった部分だけ解説していく。

まず、clientディレクトリ上にnext.jsの新しいApp(プロジェクト)を作成する。

その際、

npx create-next-app@latest ./

最後の./を追加することで新しいプロジェクトの雛形をclientのディレクトリの直下に作成することが出来る。
私はこれを入力せず、一つ下の階層にプロジェクトを作成したため途中少々つまずいた。

npm i express nodemon socket.io

そして、この部分は最初呪文かと思ったが、必要になるパッケージがexpressとnodemonとsocket.ioであるため同時にインストールしているだけであった。

さらに、serverディレクトリ内のpackage.jsonファイル内の"scripts"の部分に"start":"nodemon index.js"と書き加えるのは、データに更新があった時自動でサーバーを再起動させるためである。

少々時間が無いので続きは明日書く。

5
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
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?