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

2022年1月1日2022年5月14日

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

1. 実行環境
2. wsライブラリ
- 2.1. wsライブラリとは
- 2.2. wsライブラリのインストール
3. WebSocketのコーディング
- 3.1. 構成
- 3.2. コード解説
4. WebSocketの起動と動作確認
- 4.1. WebSocket起動方法
- 4.2. 動作確認

実行環境

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

OS：Ubuntu 18.04.5 LTS
Node.js：12.20.1
npm：6.14.11

wsライブラリ

wsライブラリとは

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

GitHub - websockets/ws: Simple to use, blazing fast and thoroughly tested WebSoc

Simple to use, blazing fast and thoroughly tested WebSocket client and server for Node.js - GitH ...

https://github.com/websockets/ws#ws-a-nodejs-websocket-libra...

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

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

npm install ws

WebSocketのコーディング

構成

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

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

コード解説

コードの全容

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

サーバー側

server.js

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);
  });
});

クライアント側

client.html

<!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>

サーバー側の処理

処理の流れとしては

WebSocketServerクラスのインスタンス化
'connection’で接続処理
'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の送信を行います。

クライアント側の処理

処理の流れとしては

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

といった感じです。

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ボタンを押して開発ツールを開きコンソールのタブをクリックします。その中でサーバーとクライアントのやり取りが確認できると思います。

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

Node.jsJavaScript,WebSocket

Posted by Bright_Noah