【typescript】socket.ioでサーバー-クライアント間のやり取りを簡単に行う

socket.ioって何？

socket.ioとは、Node.jsサーバーとクライアント間のWebSocket通信を簡単に行うためのライブラリ。

単純にWebSocketを使うだけではなく必要に応じてpolling等の別の最適な形式に切り替える機能や、ルーム機能・全クライアントへのブロードキャスト処理等が含まれている。

これを用いてクライアント・サーバー間の送受信処理を作成してみる。

以下のようにnpm installし導入する。

npm install socket.io
npm install socket.io-client

まずはhttpモジュールからサーバーを立てる

まずはNode.jsのサーバーとしてhttpオブジェクトを用いる。以下のようにimport、サーバーの作成を行う。

server.ts

import http from 'http';

const server: http.Server = http.createServer();

socket.ioでsocketサーバーの作成+接続を行う

今度はsocket.ioモジュールからsocketサーバの作成を行う。httpサーバーのlisten関数を動かし、待ち受け状態にする。

server.ts

import { Server, Socket }  from 'socket.io';
const io = new Server(server, {
    /*
    // cors設定はこれ
    cors:{
        origin: ["http://xxxx"]
    }
    */
});

server.listen(port, () => console.log('app listening on port ' + port));

クライアント側ではsocket.io-clientモジュールを読み込んで接続を行う。

client.ts

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

const socket = io('http://localhost:' + 5000);

// 接続時にこのイベントが発火する
socket.on('connect', () => console.log('connect'));

接続成功時には、サーバー側は'connection'イベントが発火し、socketオブジェクトを受け取る。

server.ts

io.on('connection', (socket: Socket)=>{
    console.log('connection');
})

socketオブジェクトを使う

socketオブジェクトに対してイベントを登録していくことで処理を作っていく。この際の登録の方法はEventEmitterの使い方に従う。

server.ts

io.on('connection', (socket: Socket)=>{

    // "clientMessage"イベントを作成、登録する
    socket.on("clientMessage", (message)=>{
        console.log('client -> server: ' + message);
    })
    
    // "serverMessage"イベントを動かす
    socket.emit("serverMessage", "hello from server");

    // これだと全クライアントに行く
    io.emit("serverMessage", "hello from server to everyone");
    let id = socket.id;

    // これだと指定したidの人間のみに行く
    io.to(id).emit("serverMessage", "hello from server to only you");


})
// client.tsによって以下の出力を受け取る
// client -> server: hello from client

client.ts

// "clientMessage"イベントを動かす
socket.emit("clientMessage", "hello from client");

// "serverMessage"イベントを作成、登録する
socket.on("serverMessage", (msg: any)=>{
    console.log('server -> client: ' + msg);
})
// server.tsによって以下の出力を受け取る
// server -> client: hello from server
// server -> client: hello from server to everyone
// server -> client: hello from server to only you

こちらの記事↓のような関数があるため、必要に応じて使っていく。
https://qiita.com/uranesu/items/8ee0dbe4e472f9fffa49