この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
こんにちは！たぬきうどんです！
私は2018年に非IT業界から未経験でエンジニアに転職し、現在までエンジニアとして働いています。
この記事はSocket.IO + Express + TypeScriptを使用したリアルタイム通信のハンズオンとなっています。
Socket.IO + Express + TypeScriptの雰囲気を掴みたいという方は、ぜひ御覧ください！
Socket.IOとは
Socket.IOはクライアントとサーバー間の低遅延、双方向、イベントベースの通信を可能にするライブラリです。
WebSocketプロトコルが基盤となっています。
実行環境構築
今回は同じプロジェクト内にサーバーとクライアントのプログラムを作成し、実行するように構築します。
環境
この記事の環境は以下です。
- Windows OS
- Node
v16.17.1 - npm
v8.15.0
１．必要パッケージのインストール
それではパッケージをインストールしていきます。
まずはpackage.jsonの初期化を行います。
npm init続いて必要パッケージのインストールです。
npm install typescript express socket.io socket.io-client ts-node今回はSocket.IO＋Express＋TypeScript環境で実行していくので、socket.io、express、typescriptをインストールします。
socket.io-clientはSocket.IOのクライアントライブラリです。後から使うので、先にインストールしておきましょう。
また、TypeScriptのまま実行したいので、ts-nodeもインストールしておきます。
さらに、型定義もインストールしておきます。
npm install -D @types/express @types/node２．サーバー側の設定
まずは型定義を作成します。
型定義用ファイルmodels.tsを作成し、型を定義しましょう。
/**
* イベントの送信およびブロードキャスト時に使用される型定義
*/
export type ServerToClientEvents = {
hello: (message: string) => void;
};
/**
* イベント受信時に使用する型定義
*/
export type ClientToServerEvents = {
message: (message: string) => void;
};続いてサーバー側ファイルserver.tsを作成します。
import express from "express";
import { createServer } from "http";
import { Server } from "socket.io";
import { ClientToServerEvents, ServerToClientEvents } from "./models";
const app = express();
const httpServer = createServer(app);
const io = new Server<ClientToServerEvents, ServerToClientEvents>(httpServer);
// コネクション確立
io.on("connection", (socket) => {
console.log(socket.id);
// イベント発行
socket.emit("hello", "from server");
// イベント受信
socket.on("message", (message) => {
console.log(`from client: ${message}`);
});
// 切断イベント受信
socket.on("disconnect", (reason) => {
console.log(`user disconnected. reason is ${reason}.`);
});
});
// サーバーを3000番ポートで起動
httpServer.listen(3000, () => {
console.log("Server start on port 3000.");
});サーバー起動用コマンドをpackage.jsonのscriptsセクションに定義しておきます。
"scripts": {
"server": "ts-node server.ts"
}これで、npm run serverでサーバーを起動できるようになりました。
３．クライアント側設定
続いてクライアント側の設定を行っていきます。
client.tsを作成します。
import { io, Socket } from "socket.io-client";
import { ClientToServerEvents, ServerToClientEvents } from "./models";
const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
// サーバーのURLを指定
"http://localhost:3000"
);
socket.on("connect", () => {
console.log(socket.connected);
});
socket.on("hello", (message) => {
console.log(message);
});
socket.emit("message", "hello world");クライアント側も実行コマンドをpackage.jsonのscripts部分に定義しておきましょう。
"scripts": {
"server": "ts-node client.ts"
}４．実行
それでは実行してみましょう。
まずはnpm run serverコマンドでサーバーを起動します。
サーバーの起動が完了したら、クライアント側をnpm run clientで実行します。
実行できたら以下のようなコンソールログが出力されます。
ocBRYWWKCEiiQ9KMAAAB
from client: hello worldtrue
from serverサーバー側のコンソールログにはセッションIDとクライアント側から送られてきたhello worldメッセージが、
クライアント側のコンソールログには接続できたかのbool値とサーバ側から送られてきたfrom serverメッセージが出力されます。
最後にクライアント側をctrl + cで切断してみましょう。
サーバ側のコンソールログにuser disconnected. reason is ...が出力されます。
以上でハンズオンは終了です。
おわりに
以上がSocket.IO + Express + TypeScriptを使用したリアルタイム通信のハンズオンでした。
この記事が皆さんの助けになれば幸いです！
最後まで読んでいただき、ありがとうございました！
