背景
仕事でTypescriptを使用する機会が出てきたので、使い方を調査した
記事の目的
TypescriptでSocketIO通信を実装する
Typescript
ここでは、Typescriptについて記載する。
Typescriptとは
Typescriptはマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語である。TypeScriptはJavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えた厳密なスーパーセットとなっている。C#のリードアーキテクトであり、DelphiとTurbo Pascalの開発者でもあるアンダース・ヘルスバーグがTypeScriptの開発に関わっている。TypeScriptはクライアントサイド、あるいはサーバサイド (Node.js) で実行されるJavaScriptアプリケーションの開発に利用できる。
利点
- 型チェックが強力で柔軟であるため、型の間違いによるバグを抑制できる
- VSCodeなどで入力補完が利用でき、JSDocでコメントを作成しておくとドキュメントが不要
テンプレートのパッケージ構成
Typescriptでnodeモジュールを作成するための最小構成
$ tree
.
├── dist #トランスパイル済みJavascriptファイルの格納先
├── node_modules # npm installでインストールした依存関係のあるnodeモジュールの格納先
├── package-lock.json # npm installでインストールしたnodeモジュール情報（自動で生成される）
├── package.json # このモジュールの情報
├── param # パラメータファイルの格納先（オプショナル）
│ └── log-config.json # log4js（ロガーモジュール）の設定ファイル
├── src # ソースファイルの格納場所
│ └── app.ts # mainのTypescriptファイル
├── test # テストコードの格納場所
│ └── app.test.ts # app.tsのテストコード
├── tsconfig.json # Typescriptの設定ファイル
└── tslint.json # ts-lint(Typescriptのlintツール)の設定ファイル
package.json
テンプレートのpackage.jsonファイルを記載する。
{
"name": "sample_app",(mainのファイル名)
"version": "1.0.0",(バージョン)
"description": "This is sample code",(モジュールの説明)
"main": "dist/app.js",(mainファイル)
"directories": {(ディレクトリ構成)
"src": "src",
"dist": "dist",
"param": "param",
"test": "test"
},
"scripts": {(スクリプトの設定)
"start": "npm run build && npm run watch", (ビルドして実行)
"build": "npm install && npm run build-ts && npm run tslint",(ビルド)
"serve": "nodemon dist/src/index.js",(サービスとして実行)
"watch": "npm install concurrently && concurrently -k -p \"[{name}]\" -n \"Typescript,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run serve\"",(ビルドしつつウォッチ)
"test": "npm run build && jest --forceExit --detectOpenHandles",(テストコード実行)
"test-ci": "jest --coverage --forceExit --runInBand",(テストコード実行し、コードカバレッジを表示)
"build-ts": "tsc",(Typescriptのビルド)
"watch-ts": "tsc -w",(Typescriptのウォッチ)
"tslint": "tslint -c tslint.json -p tsconfig.json"(ts-lintを実行)
},
"author": "EmptySet",(作成者)
"license": "MIT",(ライセンス)
"devDependencies": {(依存モジュール、バージョン。npm install -Dでインストールされる)
"@babel/core": "*",
"@babel/preset-env": "*",
"@babel/preset-react": "*",
"@babel/preset-typescript": "*",
"@types/jest": "*",
"@types/uuid": "^7.0.2",
"async-mutex": "^0.1.4",
"babel-jest": "*",
"jest": "^25.2.6",
"log4js": "^6.1.2",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0",
"ts-jest": "^25.3.0",
"tslint": "6.1.0",
"typescript": "3.8.3"
},
"dependencies": {(依存モジュール、バージョン。npm installでインストールされる)
"@types/express": "^4.17.4",
"@types/jest": "^25.1.5",
"@types/node": "^13.9.5",
"@types/socket.io": "^2.1.4",
"@types/socket.io-client": "^1.4.32",
"express": "^4.17.1",
"jest-cli": "^25.2.6",
"log4js": "6.1.2",
"tsc": "^1.20150623.0",
"uuid": "^7.0.2"
},
"jest": {(jest(テストツール)の設定)
"transform": {
"^.+\\.ts$": "ts-jest"
},
"testMatch": [
"**/test/**/*.test.ts"
],
"moduleFileExtensions": [
"ts",
"js"
],
"globals": {
"ts-jest": {
"tsConfig": "tsconfig.json"
}
}
}
}
tsconfig.json
tsconfig.jsonファイルを記載する。
{
"compilerOptions": {
"module": "commonjs",(モジュールコードのバージョン)
"target": "es2017",(ECMAScriptのバージョン)
"noImplicitAny": true,(Any型を許容しない)
"moduleResolution": "node",(構造の単位)
"sourceMap": true,(tsファイルとjsファイル間のマップファイルを作成)
"outDir": "./dist",(ビルド後のファイルの格納先)
"baseUrl": ".",(ソースファイルのベースのパス)
"rootDir":"./src",(ルートディレクトリ)
"paths": {(パスの定義)
"*": [
"node_modules/*",
"src/*",
"test/*"
]
}
},
"include": [(includeするファイル)
"src/**/*"
]
}
tslint.json
tslint.jsonファイルを記載する。
{
"rules": {
"class-name": true,
"comment-format": [
true,
"check-space"
],
"indent": [
true,
"spaces"
],
"one-line": [
true,
"check-open-brace",
"check-whitespace"
],
"no-var-keyword": true,
"quotemark": [
true,
"double",
"avoid-escape"
],
"semicolon": [
true,
"always",
"ignore-bound-class-methods"
],
"whitespace":[
true,
"check-branch",
"check-decl",
"check-operator",
"check-module",
"check-separator",
"check-type"
],
"typedef-whitespace": [
true,
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
],
"no-internal-module": true,
"no-trailing-whitespace": true,
"no-null-keyword": true,
"prefer-const": true,
"jsdoc-format": true
}
}
/src/app.ts
app.tsを記載する。
/**
* SocketIO sample
* @summary This is socketIO sample code (get rtt)
* @author EmptySet
* @version 1.0
* @todo Something
*/
// ロガーモジュール
import * as Logger from "log4js";
Logger.configure("./param/log-config.json");
// SocketIOのモジュール
import * as socketio_client from "socket.io-client";
import * as socketio from "socket.io";
// UUID作成モジュール
import * as UUID from "uuid";
// Expressモジュール(サーバアプリ)
import * as express from "express";
// HTTPサーバモジュール
import * as http from "http";
// データの型を設定
/**
* Header in data
*/
interface Header {
"type": string;
"uuid": string;
"version": number;
"time_stamp": string;
}
/**
* Body in data
*/
interface Body {
"time_stamp": Array<number>;
}
/**
* Data format
*/
export interface Data {
"header": Header;
"body": Body;
}
/**
* SocketIOクライアントクラス
*/
class Client {
// ロガー
protected logger: Logger.Logger;
// SocketIOクライアント
protected io: SocketIOClient.Socket;
// SocketIOのパラメータ
protected url: string;
protected port: number;
protected token: string;
protected namespace: string;
// 接続状態フラグ(true: 接続, false: 未接続)
protected is_connection: boolean;
// コンストラクタ
/**
* Set parameters of socketIO
* @param url Server URL (e.g. azure.com)
* @param port Port number (e.g. 80)
* @param token Token in query
* @param namespace Socket namespace
*/
constructor(url: string, port: number, token: string, namespace: string) {
// ロガー名を設定
this.set_logger("client");
// クライアントのパラメータを設定
this.url = url;
this.port = port;
this.token = token;
this.namespace = namespace;
// 接続状態を初期化
this.is_connection = false;
}
/**
* Check connection status
* @param class_name Please set class name
*/
set_logger(class_name: string) {
this.logger = Logger.getLogger(class_name);
}
/**
* Check connection status
* @return Connect(true) or not(false)
*/
protected check_connection(): boolean {
return this.is_connection;
}
/**
* Set connection status
* @param flg Connect(true) or not(false)
*/
protected set_connection(flg: boolean) {
this.is_connection = flg;
}
/**
* Connect to server
*/
protected connect() {
this.logger.info("Try connect to server");
// 接続重複時に、前の接続を切断
if (this.check_connection()) {
this.logger.warn("Connection is duplicated. Disconnect from old connection.");
this.disconnect();
}
// サーバーに接続
const uri: string = `http://${this.url}:${this.port}/${this.namespace}`;
try {
this.io = socketio_client.connect(uri, {
transports: ["websocket"],
forceNew: true,
reconnection: true,
query: {
token: this.token
}
});
} catch (e) {
this.logger.error(`Cannot connect to server ${e}`);
}
}
/**
* Disconnect from server
*/
protected disconnect() {
this.logger.info("Disconnect from server");
// サーバーから切断
try {
this.io.disconnect();
} catch (e) {
this.logger.error(`Cannot disconnect from server. ${e}`);
} finally {
this.set_connection(false);
}
}
/**
* Run client module.
* Connect to server and set events
*/
async run () {
this.connect();
this.io.on("connect", (socket: socketio.Socket) => {
this.set_connection(true);
this.logger.info(`Connected to server. id: ${this.io.id}`);
// 接続したソケットに対して、コールバックイベントを設定
this.set_event(socket);
});
// 切断イベントを設定
this.io.on("disconnect", (socket: socketio.Socket) => {
this.set_connection(false);
this.logger.info(`Disconnected from server. id: ${this.io.id}`);
});
}
/**
* Set callback events
* @param socket socket instance
*/
async set_event(socket: socketio.Socket) {}
}
/**
* SocketIO server class
*/
export class Server {
// ロガー名を設定
protected logger: Logger.Logger;
// SocketIOサーバー関連
protected server: http.Server;
protected io: SocketIO.Server;
protected nsp_1: SocketIO.Namespace;
protected nsp_2: SocketIO.Namespace;
// SocketIOサーバーのパラメータ
protected url: string;
protected port: number;
protected token: string;
protected namespace: Array<string>;
// 接続数
protected number_of_connection: number;
// コンストラクタ
/**
* Set parameters of socketIO
* @param url Server URL (e.g. azure.com)
* @param port Port number (e.g. 80)
* @param token Token in query
* @param namespace Socket namespace
*/
constructor(url: string, port: number, token: string, namespace: ArrayArray<string>) {
// ロガーを設定
this.set_logger("server");
// パラメータを設定
this.url = url;
this.port = port;
this.token = token;
this.namespace = namespace;
// 接続数を設定
this.number_of_connection = 0;
// サーバーを設定
const app: express.Express = express();
this.server = http.createServer(app);
this.io = socketio(this.server, {
pingInterval: 1000,
pingTimeout: 5000
});
}
/**
* Check connection status
* @param class_name Please set class name
*/
protected set_logger(class_name: string) {
this.logger = Logger.getLogger(class_name);
}
/**
* Check connection status
* @return Connect(true) or not(false)
*/
protected check_connection(): number {
return this.number_of_connection;
}
/**
* Add number of connection
*/
protected add_connection() {
this.number_of_connection ++;
this.logger.debug(`Number of connection is ${this.number_of_connection}`);
}
/**
* Add number of connection
*/
protected remove_connection() {
if (this.number_of_connection == 0) {
this.logger.error("Number of connection is invalid");
return;
}
this.number_of_connection --;
this.logger.debug(`Number of connection is ${this.number_of_connection}`);
}
protected listen() {
this.server.listen(this.port, this.url);
}
/**
* Disconnect from server
*/
protected disconnect(socket: socketio.Socket) {
this.logger.info("Disconnect from server");
// 切断処理
try {
socket.disconnect();
this.logger.info(`Disconnected from server. (ID: ${socket.id})`);
} catch (e) {
this.logger.error(`Cannot disconnect from server. ${e}`);
}
}
/**
* Run server module.
* Listen and set events
*/
async run () {
this.listen();
// 接続イベント
this.io.on("connect", (socket: socketio.Socket) => {
this.logger.info(`Connected to client. id: ${socket.id}`);
this.add_connection();
});
// 切断イベント
this.io.on("disconnect", (socket: socketio.Socket) => {
this.logger.info(`disconnected from client. id: ${socket.id}`);
this.remove_connection();
});
// 独自のイベントを設定
this.set_event();
}
/**
* Set callback events
* @param socket socket instance
*/
async set_event() {
// Namespace: this.namespace[0]のイベント設定
this.io.of(this.namespace[0]).on("connect", (socket: socketio.Socket) => {
this.logger.info(`Connected to client. id: ${socket.id}`);
// this.namespace[0]のその他イベント設定
socket.on("ping_", (msg: Data) => {
this.logger.info(`Get ping. msg: ${JSON.stringify(msg)}`);
const data: Data = msg;
// 時刻取得
const d = new Date();
data.header.time_stamp = d.toISOString();
data.body.time_stamp.push(d.getTime() / 1000);
this.io.of(this.namespace[1]).json.emit("ping_", data);
});
});
// Namespace: this.namespace[1]のイベント設定
this.io.of(this.namespace[1]).on("connect", (socket: socketio.Socket) => {
this.logger.info(`Connected to client. id: ${socket.id}`);
// this.namespace[1]のその他イベント設定
socket.on("pong_", (msg: Data) => {
this.logger.info(`Get pong. msg: ${JSON.stringify(msg)}`);
const data: Data = msg;
// 時刻取得
const d = new Date();
data.header.time_stamp = d.toISOString();
data.body.time_stamp.push(d.getTime() / 1000);
this.io.of(this.namespace[0]).json.emit("pong_", msg);
});
});
}
}
// Ping送信クラス(Clientクラスを継承)
/**
* Ping class
*/
export class Ping extends Client {
private socket: socketio.Socket;
/**
* Emit ping
*/
ping() {
this.logger.info("Ping");
// 接続状態をチェック
if (!this.check_connection()) {
this.logger.warn("Has not connect to server.");
return;
}
// 時刻を取得
const d = new Date();
// 送信するデータを定義
const data: Data = {
header: {
type: "PingPong",
time_stamp: d.toISOString(),
uuid: UUID.v4(),
version: 0
},
body: {
time_stamp: [
d.getTime() / 1000
]
}
};
// データを送信
try {
this.io.compress(true).emit("ping_", data);
this.logger.info("Emit ping data");
this.logger.debug(`Ping data: ${JSON.stringify(data)}, ${this.io.nsp}`);
} catch (e) {
this.logger.error(`Cannot emit pong. ${e}`);
}
}
// pongデータを受信し、RTTを算出
/**
* Get pong data and calculate RTT
* @param msg Pong message
*/
protected get_rtt(msg: Data): number {
const data: Data = msg;
// 時刻を算出
const d = new Date();
data.header.time_stamp = d.toISOString();
data.body.time_stamp.push(d.getTime() / 1000);
// RTTを算出
const rtt: number = data.body.time_stamp[data.body.time_stamp.length - 1] - data.body.time_stamp[0];
this.logger.info(`RTT: ${rtt} [s]`);
return rtt;
}
/**
* Set callback events
* @param socket socket instance
*/
async set_event (socket: socketio.Socket) {
// ロガー名を設定
this.socket = socket;
this.io.on("pong_", (msg: Data) => {
this.get_rtt(msg);
});
}
}
// Pong返信クラス(Clientクラスを継承)
/**
* Pong class
*/
export class Pong extends Client {
/**
* Get ping message and emit pong message
* @param msg Ping message
*/
protected pong(msg: Data, socket: socketio.Socket) {
this.logger.info("Pong");
const data: Data = msg;
// 時刻を取得
const d = new Date();
data.header.time_stamp = d.toISOString();
data.body.time_stamp.push(d.getTime() / 1000);
// Pongデータを送信
try {
this.io.compress(true).emit("pong_", data);
this.logger.info("Emit pong data");
this.logger.debug(`Pong data: ${data}`);
} catch (e) {
this.logger.error(`Cannot emit pong. ${e}`);
}
}
/**
* Set callback events
* @param socket socket instance
*/
async set_event (socket: socketio.Socket) {
// ロガー名を設定
this.io.on("ping_", (msg: Data) => {
this.pong(msg, socket);
});
}
}
// Sleep関数
/**
* Sleep function
* @param milliseconds Sleep time [ms]
*/
function sleep(milliseconds: number) {
return new Promise<void>(resolve => {
setTimeout(() => resolve(), milliseconds);
});
}
// main関数(async: 非同期)
async function main() {
const logger: Logger.Logger = Logger.getLogger("system");
const server = new Server("localhost", 10000, "secret", ["ping", "pong"]);
server.run();
// await: 同期待ち
await sleep(1000);
const ping = new Ping("localhost", 10000, "secret", "ping");
ping.set_logger("ping");
ping.run();
await sleep(1000);
const pong = new Pong("localhost", 10000, "secret", "pong");
pong.set_logger("pong");
pong.run();
await sleep(1000);
ping.ping();
}
exports.main = main;
if (require.main == module) {
main();
}
/test/app.test.ts
テストコードapp.test.tsを記載する。
/**
* SocketIO sample test
* @summary This is socketIO sample test code (get rtt)
* @author EmptySet
* @version 1.0
* @todo Something
*/
// app.tsをインポート
import * as rtt from "../src/app";
// ロガーのインポート
import * as Logger from "log4js";
Logger.configure("./param/log-config.json");
const logger = Logger.getLogger("test");
describe("Ping class module test", () => {
const ping = new rtt.Ping("localhost", 10000, "secret", "ping");
it("Set parameters", () => {
expect(ping["url"]).toBe("localhost");
expect(ping["port"]).toBe(10000);
expect(ping["token"]).toBe("secret");
expect(ping["namespace"]).toBe("ping");
});
it("Check connection status function", () => {
expect(ping["check_connection"]()).toBe(false);
ping["set_connection"](true);
expect(ping["check_connection"]()).toBe(true);
ping["set_connection"](false);
expect(ping["check_connection"]()).toBe(false);
});
it("Check rtt calculation function", () => {
const d = new Date();
const data = {
header: {
type: "PingPong",
time_stamp: "2020-04-01T00:00:00.000Z",
uuid: "test",
version: 0
},
body: {
time_stamp: [
d.getTime() / 1000,
1500000000,
1500000001
]
}
};
expect(ping["get_rtt"](data)).toBeLessThanOrEqual(0.01);
});
});
実行時
$npm run start
...
10:39:17 PM - Starting compilation in watch mode...
[Typescript]
[Node] [nodemon] 2.0.2
[Node] [nodemon] to restart at any time, enter `rs`
[Node] [nodemon] watching dir(s): *.*
[Node] [nodemon] watching extensions: js,mjs,json
[Node] [nodemon] starting `node dist/src/index.js dist/src/app.js`
[Node] [2020-04-05T22:39:19.023] [INFO] ping - Try connect to server
[Node] [2020-04-05T22:39:19.066] [INFO] server - Connected to client. id: 9tfP7UDHqlCblBzRAAAA
[Node] [2020-04-05T22:39:19.067] [DEBUG] server - Number of connection is 1
[Node] [2020-04-05T22:39:19.076] [INFO] server - Connected to client. id: /ping#9tfP7UDHqlCblBzRAAAA
[Node] [2020-04-05T22:39:19.077] [INFO] ping - Connected to server. id: /ping#9tfP7UDHqlCblBzRAAAA
[Node] [2020-04-05T22:39:20.041] [INFO] pong - Try connect to server
[Node] [2020-04-05T22:39:20.044] [INFO] server - Connected to client. id: wTjYvamapXXZV1yDAAAB
[Node] [2020-04-05T22:39:20.045] [DEBUG] server - Number of connection is 2
[Node] [2020-04-05T22:39:20.046] [INFO] server - Connected to client. id: /pong#wTjYvamapXXZV1yDAAAB
[Node] [2020-04-05T22:39:20.047] [INFO] pong - Connected to server. id: /pong#wTjYvamapXXZV1yDAAAB
[Node] [2020-04-05T22:39:21.044] [INFO] ping - Ping
[Node] [2020-04-05T22:39:21.046] [INFO] ping - Emit ping data
[Node] [2020-04-05T22:39:21.046] [DEBUG] ping - Ping data: {"header":{"type":"PingPong","time_stamp":"2020-04-05T13:39:21.044Z","uuid":"cb6087b4-68d1-447a-b4d2-8e1271b9f735","version":0},"body":{"time_stamp":[1586093961.044]}}, /ping
[Node] [2020-04-05T22:39:21.048] [INFO] server - Get ping. msg: {"header":{"type":"PingPong","time_stamp":"2020-04-05T13:39:21.044Z","uuid":"cb6087b4-68d1-447a-b4d2-8e1271b9f735","version":0},"body":{"time_stamp":[1586093961.044]}}
[Node] [2020-04-05T22:39:21.050] [INFO] pong - Pong
[Node] [2020-04-05T22:39:21.051] [INFO] pong - Emit pong data
[Node] [2020-04-05T22:39:21.051] [DEBUG] pong - Pong data: [object Object]
[Node] [2020-04-05T22:39:21.051] [INFO] server - Get pong. msg: {"header":{"type":"PingPong","time_stamp":"2020-04-05T13:39:21.050Z","uuid":"cb6087b4-68d1-447a-b4d2-8e1271b9f735","version":0},"body":{"time_stamp":[1586093961.044,1586093961.048,1586093961.05]}}
[Node] [2020-04-05T22:39:21.052] [INFO] ping - RTT: 0.00800013542175293 [s]
[Typescript]
...
まとめ
- TypescriptでSocketIOの通信モジュールを実装し、nodeで実行する方法を調査、記載した
参考文献
変更履歴
- 2020/04/05: 新規作成
