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

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>
サーバー側の処理
処理の流れとしては
- 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という名前は任意です、好きな名前で構いません。
4.データの送信
ws_client.send('おはよう');
ws_client.sendにてクライアントへデータの送信を行います。ここでは文字列の送信を実行します。
この関数自体はwss.on('connection’, ws_client => {});の接続処理の中の関数なので接続時にデータが送信されることになります。
5.データの受信
ws_client.on('message', data => {
console.log('送られてきたデータ: %s', data);
ws_client.send('データ受信しました:' + data);
});
NodeのEventEmitterクラスの.onメソッドによって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です。
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によりサーバーへデータの送信を行っています。
EventTarget.addEventListener()メソッド
WebSocketの起動と動作確認
WebSocket起動方法
- サーバー側の起動
node server.js
- クライアント側の起動
HTMLファイルをブラウザで開きます。
動作確認
クライアント側のブラウザでF12ボタンを押して開発ツールを開きコンソールのタブをクリックします。その中でサーバーとクライアントのやり取りが確認できると思います。

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