WebSocket★超簡単!Node.jsとwsライブラリによる通信アプリ

2022年5月14日

WebSocketを実装する方法は色々あると思いますが、Node.jsとwsライブラリを用いたシンプルな方法でWebSocketを作ってみます。

実行環境

OSとNodeのバージョンは次の通りです。

  • OS:Ubuntu 18.04.5 LTS
  • Node.js:12.20.1
  • npm:6.14.11

wsライブラリ

wsライブラリとは

WebSocketを実現させる為のとってもシンプルなNode.jsライブラリです。

wsライブラリのインストール

npmを使ってwsライブラリのインストールを行います。

npm install ws

WebSocketのコーディング

構成

ファイルを二つしか使わないとってもシンプルな構成でWebSocketを実現させます。

server.jsサーバー側
WebSocketServerクラスを用いて受信・送信処理
client.htmlクライアント側
WebSocketオブジェクトを用いて各イベント(送信・受信・エラー・クリック)登録

コード解説

コードの全容

コードの全容は次の通りです。

  • サーバー側
const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({ port: 3000 });

wss.on('connection', ws_client => {

  ws_client.send('おはよう');

  ws_client.on('message', data => {
    console.log('送られてきたデータ: %s', data);
    ws_client.send('データ受信しました:' + data);
  });
});
  • クライアント側
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    WebSocket 送受信テスト

    <!-- 送信ボタン -->
    <input type='button' id='send_server' value='送信ボタン' />

    <script>
        // WebSocketのクライアントの生成 接続を作成
        const ws = new WebSocket('ws://localhost:3000')
 
        // 接続が確率した時のイベント
        ws.onopen = e => {
            console.log('こんにちは Server!')
        }

        // メッセージの待ち受けイベント
        ws.onmessage = e => {
            console.log('メッセージ受信:%s',e.data)
            console.log(e)
        }


        // エラー発生時のイベント
        ws.onerror = e => {
            console.log('接続に失敗:${e.data}')
            console.log(e)
        }

        // ボタンクリック時にデータ送信
        document.getElementById('send_server').addEventListener('click', () => {
            ws.send('ボタンからこんにちは')
        })
        
    </script>
</body>
</html>

サーバー側の処理

処理の流れとしては

  1. WebSocketServerクラスのインスタンス化
  2. 'connection’で接続処理
  3. 'message’でデータを受信し、内容を送り返す

といった感じです。では個々に見ていきましょう。

1.wsライブラリの呼び出し
const WebSocketServer = require('ws').Server;

require('ws’)でwsライブラリを読み込み、.Serverではlib/websocket-server.jsのWebSocketServerクラスを読み込んでいます。

どうしてrequire('ws’).websocket-serverではなくrequire('ws’).Serverとして読み込んでるかというと、wsライブラリのindex.jsの中で次のように定義している為です。

WebSocket.Server = require('./lib/websocket-server');

このように定義してある為、.websocket-serverではなく.Serverとして読み込むことが出来ます。

2.WebSocketServerのインスタンス化
const wss = new WebSocketServer({ port: 3000 });

WebSocketServerのインスタンス化を行っています。port番号は通常は80ですが私の環境では3000なのでそれに対応させました。各環境に合わせた番号を指定します。

WebSocketServerはport番号以外にも沢山のオプションを指定できます。

クラス WebSocketServer(options[, callback])

3.接続処理
wss.on('connection', ws_client => {});

.onはNodeのEventEmitterクラスのonメソッドでconnectionイベントを追加しています。これによりクライアントとの接続が行われます。

emitter.on(eventName, listener)メソッド

connectionイベントを追加することでコールバック関数でws_client(WebSocketクラス)が使えるようになります。ws_clientという名前は任意です、好きな名前で構いません。

イベント: 'connection’

4.データの送信
ws_client.send('おはよう');

ws_client.sendにてクライアントへデータの送信を行います。ここでは文字列の送信を実行します。

WebSocket.send()メソッド

この関数自体はwss.on('connection’, ws_client => {});の接続処理の中の関数なので接続時にデータが送信されることになります。

5.データの受信
ws_client.on('message', data => {
  console.log('送られてきたデータ: %s', data);
  ws_client.send('データ受信しました:' + data);
});

NodeのEventEmitterクラスの.onメソッドによってmessageイベントを追加しています。つまり、クライアントからメッセージを受信した際に実行されます。

WebSocket: message イベント

dataはサーバーが受信したデータを指します。

data => {}はメッセージを受信した時の処理になります。console.logはサーバー側でdataの表示、ws_client.sendはクライアント側へ文字列とdataの送信を行います。

クライアント側の処理

処理の流れとしては

  1. WebSocketオブジェクトのインスタンス化
  2. 接続・受信・エラーイベントの登録
  3. クリックイベントの登録とデータ送信処理の追加

といった感じです。

1.WebSocketのインスタンス化
const ws = new WebSocket('ws://localhost:3000')

new WebSocket('ws://localhost:3000’)でWebSocketオブジェクトのインスタンス化を行っています。これによりサーバーへの接続が可能になります。

引数にはhttp://ではなくWebSocket用のプロトコルを指定する為ws://を使用してサーバーのアドレスを指定しています。今回のサーバーアドレスはlocalhostでポート番号は3000です。

WebSocketオブジェクト

2.接続イベント
ws.onopen = e => {
    console.log('こんにちは Server!')
}

onopenにより、サーバーとの接続確立時に処理するイベントを登録します。

WebSocket.onopenイベントハンドラープロパティ

3.メッセージ受信イベント
ws.onmessage = e => {
    console.log('メッセージ受信:%s',e.data)
    console.log(e)
}

onmessageにより、メッセージ受信時のイベントを登録します。

WebSocket.onmessageイベントハンドラープロパティ

4.エラー発生時イベント
ws.onerror = e => {
    console.log('接続に失敗:${e.data}')
    console.log(e)
}

onerrorにより、エラー発生時のイベントを登録します。

WebSocket.onerrorイベントハンドラープロパティ

5.クリックイベントの登録
document.getElementById('send_server').addEventListener('click', () => {
    ws.send('ボタンからこんにちは')
})

getElementByIdにより要素のElementオブジェクトを取得し、addEventListenerによりclickイベントを登録してクリック時に処理する関数を登録します。登録している関数は() => {}です。コールバック関数内ではsendによりサーバーへデータの送信を行っています。

Document.getElementById()メソッド

EventTarget.addEventListener()メソッド

WebSocket.send()メソッド

WebSocketの起動と動作確認

WebSocket起動方法

  • サーバー側の起動
node server.js
  • クライアント側の起動

HTMLファイルをブラウザで開きます。

動作確認

クライアント側のブラウザでF12ボタンを押して開発ツールを開きコンソールのタブをクリックします。その中でサーバーとクライアントのやり取りが確認できると思います。

以上です、お疲れ様でした。