こんにちは、yamaday0uです。
今回はNode.jsの環境でチャットなどのリアルタイム通信を実現するソケットサーバーを構築する例をご紹介します。
かなりシンプルな構成で作りますので、これからNode.jsでソケットサーバーを作ってみたい多くの方の参考になると思います。
※2022年から技術系の記事は個人ブログにも投稿しております。個人ブログの記事は適宜修正しておりますのでぜひこちらもご覧ください→yamaday0u Blog
プロジェクトの構成
プロジェクトの全容は以下のようになります。
.
├── client
│ └── index.ts // クライアント側のプログラム
├── server
│ └── index.ts // サーバー側のプログラム
├── node_modules
├── package-lock.json
└── package.json
この記事の内容はソケットサーバー構築がメインですが、動作確認用にクライアント側も作成します。
ここで紹介するプロジェクトはぼくのGithubリポジトリに公開しています。良かったらご覧ください。（随時更新しているのでこの記事の内容とは変わっている可能性があります。）
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
clientがserverとつながりました。
先に起動させておいたサーバーもクライアントとつながって、”connected”のログが出力されました！
server側でもclientとつながりました