プログラミング

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

投稿日:2017年7月18日 更新日:

1. はじめに

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

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

この中の、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通信をつないだまま何度も行うことができます。

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

📂-プログラミング

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPress

WordPressのソースコード。HTMLにPHPを埋め込むスタイル。

WordPress本体のPHPソースコードや、テーマに含まれているPHPのソースコードを見ると、やたらと PHPの開始タグ(<?php)と終了タグ(?>)が埋め込まれています。 例えば、こ …

時間とともに風景画像の色を変化させるサンプルページを作りました

時間とともに風景画像の色を変化させるサンプルページを作りました。 夕方や夜に変化する効果を狙っています。 目次1. スクリーンショット2. デモ3. ソースコード4. メモ 1. スクリーンショット …

JavaScript

JavaScript で URL を扱う場合の処理

JavaScript で URL文字列に関する処理を行う場合、セキュリティの観点から、URL()コンストラクタを使うことが推奨されます。URL()コンストラクタによって URLオブジェクトを生成し、そ …

WSL のターミナルから vagrant.exe up がエラーになる場合の対処法

目次1. 問題となった現象2. 対処法3. 補足 1. 問題となった現象 WSL (Windows Subsystem for Linux) のターミナルから、Windows用にインストールした va …

Milkcocoa のチュートリアルを試す

Milkcocoa のチュートリアルをやってみました。 目次Milkcocoa とは?チュートリアル1. アカウント登録する2. ログインする3. アプリを作成する4. スマートフォン側のWebページ …