WebSocket を使ったサンプルプログラムを作りました

1. はじめに

WebSocket を使ったサンプルページを作りました。Node.js を使っています。

ソースコードは以下に置いてあります。

• laboradian/websocket-server-sample001

この中の、src/ws-server.js が本体です。

2. スクリーンショット

3. 動作

やっていることを簡単に説明します。

1. Node.js に組み込まれている httpモジュールを使って、Webサーバー(ポート番号は8080)を作成します。
2. websockets/ws を使って、WebSocketサーバー(ポート番号は8081)を作成します。
3. Webサーバーを開始します。
4. Webブラウザで、http://localhost:8080 にアクセスします。
5. テキストフィールドに何か入力して、「WebSocketサーバーに送る」ボタンをクリックします。
6. WebSocket サーバーは、クライアントからメッセージを受け取ったら、「次のメッセージを受け取りました： {受け取ったメッセージ}」という文字列をクライアントに返してきます。
7. Webブラウザでは WebSocketサーバーが送ってきたメッセージを、「サーバーからのメッセージ」の下に表示していきます。

※ WebSocketの通信は継続されたままになっています。

4. 大まかな動作イメージ

Webブラウザは、まず Webサーバにアクセスします。
それから、画面上のボタンを押すことによって、WebSocketサーバに文字列を伝達します。
WebSocketサーバーから返事がきます。このやり取りは、WebSocket通信をつないだまま何度も行うことができます。

もう少し細かい図も書きました。こちらでは、ソースコードも交えて説明しています。