WebSocket の使い方 - Node.js

2020年5月22日 23:15

Node.jsの「WebSocket」の使い方をまとめました。「Unity版」のサンプルと通信できます。

1. WebSocket

Webアプリで双方向通信を実現するための技術規格。
文字列とバリナリデータを送受信することが可能。

2. プロジェクトの作成

プロジェクトの作成方法は、次のとおり。

$ mkdir websocketex
$ cd websocketex
$ npm init -y
$ npm install ws --save

3. サーバの作成

WebSocketのサーバのコードは、次のとおり。

◎ server.js

// WebSocketのサーバの生成
let ws = require('ws')
var server = new ws.Server({port:5001});

// 接続時に呼ばれる
server.on('connection', ws => {
    // クライアントからのデータ受信時に呼ばれる
    ws.on('message', message => {
        console.log(message);

        // クライアントにデータを返信
        server.clients.forEach(client => {
            client.send(message);
        });
    });

    // 切断時に呼ばれる
    ws.on('close', () => {
        console.log('close');
    });
});

◎ Serverの生成
引数port付きでServerクラスを生成します。

◎ Serverのイベント
Serverのイベントは次の1つです。
・connection: 接続時に呼ばれる。

◎ WebSocketのメソッド
WebSocketのメソッドは次の2つです。

・send(data): クライアントへのデータの送信。
・close(): クライアントとの切断。

◎ WebSocketのイベント
WebSocketのイベントは次の4つです。

・open: 接続時に呼ばれる。
・message: データ受信時に呼ばれる。
・close: 切断時に呼ばれる。
・error: エラー時に呼ばれる。

4. クライアントの作成

WebSocketのクライアントのコードは、次のとおり。

◎ index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!-- 送信ボタン -->
    <input type="button" id="send_button"" value="送信">

    <script>
        // WebSocketのクライアントの生成
        let ws = new WebSocket('ws://localhost:5001')
 
        // 接続時に呼ばれる
        ws.addEventListener('open', e => {
            console.log('open')
        })

        // サーバからのデータ受信時に呼ばれる
        ws.addEventListener('message', e => {
            console.log(e.data)
        })

        // ボタンクリック時に呼ばれる
        document.getElementById('send_button').addEventListener('click', e => {
            // サーバへのデータ送信
            ws.send('hello')
        })
    </script>
</body>
</html>

◎ WebSocketの生成
引数URL付きでWebSocketを生成します。

5. 実行

サーバーは以下のコマンドで実行し、クライアントはブラウザで実行。

$ node server.js