2023/06/14 (更新日: 2023/06/26)

【Node.js】Socket.IO / Express / TypeScriptでリアルタイム通信を実現するソケットサーバー構築

Node.js

こんにちは、やまだゆうです。

今回はNode.jsの環境でチャットなどのリアルタイム通信を実現するソケットサーバーを構築する例をご紹介します。

かなりシンプルな構成で作りますので、これからNode.jsでソケットサーバーを作ってみたい多くの方の参考になると思います。

この記事の内容

概要
ライブラリのインストール
ソケットサーバーの構築
クライアント側の構築
参考資料

概要

実行環境

開発マシン：MacBook Air (Retina, 13-inch, 2020)
OS：Monterey バージョン12.6.2（21G320）
npm：8.11.0
node：v16.16.0

プロジェクトの全体図

プロジェクトの全容は以下のようになります。

.
├── client
│   └── index.ts // クライアント側のプログラム
├── server
│   └── index.ts // サーバー側のプログラム
├── node_modules
├── package-lock.json
└── package.json

この記事の内容はソケットサーバー構築がメインですが、動作確認用にクライアント側も作成します。

ここで紹介するプロジェクトはぼくのGit hubリポジトリに公開しています。良かったらご覧ください。（随時更新しているのでこの記事の内容とは変わっている可能性があります。）

TypeScriptの採用理由

個人的に以前から触ってみたかったので、挑戦の意味も込めてTypeScriptでソケットサーバーを構築することにしました。

静的型付け言語ってかっこよくないですか？

ライブラリのインストール

まずは必要なライブラリのインストールをします。

インストールするのは以下のライブラリです。

typescript（typescriptでコードを書いていくため）
express（サーバーとして機能させるため）
socket.io（今回の主役ライブラリ）
socket.io-client（クライアント用）
ts-node（typescriptのままテスト実行するため）

ターミナルで以下のコマンドを実行します。

npm install typescript express socket.io socket.io-client ts-node

npm install -D @types/express @types/node

ソケットサーバーの構築

いよいよサーバーを構築します。

Socket.ioのドキュメントに記載されている例を参考にして、expressとhttpを組み合わせて作ります。

import express from "express";
import { createServer } from "http";
import { Server } from "socket.io";

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, { path: "/socket/" });

app.get("/", (req: express.Request, res: express.Response) => {
  res.json({
    message: "root path"
  });
});

io.on("connection", (socket) => {
  console.log("connected");
});

httpServer.listen(3000, () => {
  console.log("Chat server listening on port 3000");
});

サーバーを起動するためのコマンドのショートカット用スクリプトをpackege.jsonに追加します。

{
  "name": "socket-practice",
  "version": "1.0.0",
  "description": "",
  "main": "server/index.ts",
  "scripts": {
    "server": "ts-node server/index.ts" // 追加
  }, (以下省略)
}

サーバーを起動してみましょう！

npm run server

クライアント側の構築

次はクライアント側を構築します。

import { io } from "socket.io-client";

const socket = io("http://localhost:3000", { path: "/socket/" });

socket.on("connect", () => {
  console.log("client connected");
});

先ほどと同じようにクライアントを実行するコマンドのショートカットスクリプトをpackage.jsonに追加します。

{
  "name": "socket-practice",
  "version": "1.0.0",
  "description": "",
  "main": "server/index.ts",
  "scripts": {
    "server": "ts-node server/index.ts",
    "client": "ts-node client/index.ts" // 追加
  }, (以下省略)
}

クライアントも起動してみましょう。

npm run client

先に起動させておいたサーバーもクライアントとつながって、”connected”のログが出力されました！

本記事の続編を投稿しました。ターミナル上で動作するチャットアプリにまで発展させます！

参考資料

アイキャッチ画像：Nodejs icon by Icons8

yamaday0uを応援お願いします！あなたの１クリックが励みになります。
>> にほんブログ村