WebSocketで双方向通信する方法（Arduinoプログラミング）

#include <M5StickCPlus2.h>
#include <WebSocketsServer.h> // WebSocket通信用
#define LED 19 // 本体LED

M5Canvas canvas(&M5.Lcd); // メモリ描画領域表示（スプライト）のインスタンスを作成
WebSocketsServer webSocket = WebSocketsServer(81); // WebSocketサーバーをポート81で準備

// 変数宣言
bool state = false;       // ボタン状態確認用
bool led_state = false;   // LED状態確認用
float battery;            // バッテリー残量表示用
String client_text = "";  // クライアントからのテキスト格納用
String send_message = ""; // クライアントへの送信情報表示用

// ローカルWi-Fi接続実行関数 *****************************************************
void localWifiConnect() {
  // ローカルWi-Fi接続先設定
  const char ssid[] = "自宅のWi-Fi接続先を設定";      //接続先SSID
  const char pass[] = "Wi-Fi接続先のパスワードを設定"; //接続先パスワード

  // Wi-Fi接続確認（IPアドレスの取得で確認）
  M5.Lcd.println("Wi-Fi Search!");
  while (WiFi.localIP()[0] == 0) { // IPアドレスが取得されるまで繰り返し
    WiFi.begin(ssid, pass);        //ローカル Wi-Fi接続実行
    M5.Lcd.print(". ");
    delay(3000); // 再接続待ち
  }
  Serial.println(WiFi.SSID()); // シリアル出力
  Serial.println(WiFi.localIP());
}
// クライアントへメッセージを送信する関数 ********************************************
void sendMessage(String message) {
  uint8_t clientNum = webSocket.connectedClients(); // 現在の接続クライアント数を取得
  if (clientNum) { // クライアントからの接続があれば
    Serial.printf("Send Message [%s] to %d Client\n", message, clientNum);
    webSocket.sendTXT(0, message);
    send_message = "Send: " + message; // 通信情報格納
  } else {         // クライアントからの接続がなければ
    Serial.println("No cliant!");
    send_message = "No Client!";       // 通信情報格納
  }
}
// Webscketのイベント設定関数 *****************************************************
void webSocketEvent(uint8_t client_num, WStype_t type, uint8_t * payload, size_t length) {
  switch (type) {
    case WStype_DISCONNECTED: // クライアントとの接続が遮断された時の処理
      Serial.printf("[%u] Disconnected!\n", client_num);
      break;

    case WStype_CONNECTED: {  // サーバー接続時処理
      IPAddress ip = webSocket.remoteIP(client_num); // クライアントのIPアドレスを取得
      Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", client_num, ip[0], ip[1], ip[2], ip[3], payload);
      client_text = (char*)payload; // 受信テキスト取得
      sendMessage("connected!");
      break;
    }
    case WStype_TEXT:         // テキストメッセージ受信時の処理
      Serial.printf("[%u] get Text: %s\n", client_num, payload); // 受信したメッセージ（payload）を表示
      client_text = (char*)payload; // 受信テキスト取得
      break;
    
    case WStype_BIN:          // バイナリデータ受信時の処理
      Serial.printf("[%u] get binary length: %u\n", client_num, length);
      // payload と length を使用してバイナリデータを扱う（今回未使用）
      break;
  }
}
// 初期設定 -----------------------------------------
void setup() {
  auto cfg = M5.config(); // 本体初期設定
  StickCP2.begin(cfg);
  Serial.begin(9600);     // シリアル出力初期化

  // 出力端子設定
  pinMode(LED, OUTPUT);   // 本体LED赤
  digitalWrite(LED, LOW); // 本体LED初期値OFF（LOW）

  // ベース画面の初期設定
  M5.Lcd.fillScreen(BLACK); // 背景色
  M5.Lcd.setRotation(1);    // 画面向き設定（USB位置基準 0：下/ 1：右/ 2：上/ 3：左）
  M5.Lcd.setTextSize(1);    // 文字サイズ（整数倍率）
  M5.Lcd.setFont(&fonts::Font4); // フォント
  canvas.setTextWrap(false); // 改行をしない（画面をはみ出す時自動改行する場合はtrue。書かないとtrue）
  canvas.createSprite(M5.Lcd.width(), M5.Lcd.height()); // canvasサイズ（メモリ描画領域）設定（画面サイズに設定）

  localWifiConnect(); // Wi-Fi接続実行

  // WebSocketサーバー設定
  webSocket.begin();                 // WebSoket通信の初期化
  webSocket.onEvent(webSocketEvent); // WebSocketのイベントのハンドラ設定
}
// メイン -----------------------------------------
void loop() {
  webSocket.loop(); // WebSocketによるイベント処理を行う
  M5.update();      //　本体ボタン状態更新

  // ボタンA処理
  if (M5.BtnA.wasPressed()) {  // ボタンAが押されたら
    state = true;  // ボタン状態true
    StickCP2.Speaker.tone(4000, 100); // ブザーON（周波数 Hz, 発音時間 ms)
    sendMessage("BtnA ON!"); // クライアント番号0へテキスト送信
  }
  if (M5.BtnA.wasReleased()) { // ボタンA離されたら
    state = false; // ボタン状態false
    sendMessage("BtnA OFF!");// クライアント番号0へテキスト送信
  }
  // クライアントからの受信情報処理
  if (client_text == "LED ON" && led_state == false) { // 受信テキストが「LED ON」でLED状態がfalseなら
    led_state = true;        // LED状態確true
    digitalWrite(LED, HIGH); // 本体LED赤点灯
    sendMessage("LED ON!");  // クライアント番号0へテキスト送信
  }
  if (client_text == "LED OFF" && led_state == true) { // 受信テキストが「LED OFF」でLED状態がtrueなら
    led_state = false;       // LED状態確false
    digitalWrite(LED, LOW);  // 本体LED赤消灯
    sendMessage("LED OFF!"); // クライアント番号0へテキスト送信
  }
  // バッテリー残量取得（パーセント）
  battery = StickCP2.Power.getBatteryLevel();  // 0〜100％ で取得

  // LCD表示処理
  canvas.fillScreen(BLACK);              // 画面初期化
  canvas.setFont(&fonts::Font4);         // フォント
  canvas.setCursor(5, 0);                // 座標設定(x, y)
  canvas.setTextColor(WHITE, BLACK);     // (文字色, 背景)
  canvas.print("SSID : " + WiFi.SSID()); // SSID表示
  canvas.setCursor(5, 25);
  canvas.print("IP : " + WiFi.localIP().toString()); // IPアドレス表示
  canvas.setCursor(5, 50);
  canvas.setTextColor(ORANGE, BLACK);
  canvas.print("WebSocket Info :");
  canvas.setCursor(5, 75);
  canvas.print(client_text);  // 受信テキスト表示
  canvas.setCursor(5, 100);
  canvas.setTextColor(CYAN, BLACK);
  canvas.print(send_message); // 送信メッセージ表示
  canvas.setTextFont(2);      // フォント
  canvas.setCursor(202, 120);
  canvas.setTextColor(GREENYELLOW, BLACK);
  canvas.printf("%.0f%%", battery); // バッテリー残量パーセント表示

  // メモリ描画領域を座標を指定して一括表示（スプライト）
  canvas.pushSprite(&M5.Lcd, 0, 0); // (0, 0)座標に一括表示実行
  delay(200); // 遅延時間（ms）
}

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Socket Test</title>
  <style>
    body { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0; }
    #messageContainer {margin: 5px;}
  </style>
</head>
<body>
  <h1>Web Socket Test</h1>
  <form name="form" id="id_form" onsubmit="return startWebSocket(event)" action="">
    <input name="textBox" id="input_IP" type="text" value="" placeholder="サーバーIPアドレス" />
  </form>
  <div id="messageContainer">Please Input IP Address & Enter Key</div>
  <div>
    <button onclick='buttonOn()'>ON</button>
    <button onclick='buttonOff()'>OFF</button>
  </div>

  <script>
    let socket; // グローバル変数としてsocketを宣言
    let messageElement = document.getElementById('messageContainer'); // メッセージ表示部の要素を取得

    function startWebSocket(event) { // WebSocketの開始      
      let ip_addr = document.getElementById('input_IP').value;
      console.log(ip_addr);
      socket = new WebSocket(`ws://${ip_addr}:81`); // WebSocketインスタンスを作成し、指定されたホストとポートに接続する

      socket.addEventListener('open', (event) => { // 接続が開いた時の処理
        console.log('WebSocket opened');
        socket.send('Opened!');
      });
      socket.addEventListener('message', (event) => { // メッセージを受信した時の処理
        console.log(`Received response: ${event.data}`);
        messageElement.textContent = event.data;
      });
      socket.addEventListener('close', (event) => { // 接続が閉じられた時の処理
        console.log('Connection closed!');
        messageElement.textContent = 'Connection closed!';
      });
      return false; // 必要な場合、フォームの送信をキャンセルする
    }
    // メッセージ送信
    function sendMessage(message) {
      if (socket && socket.readyState === WebSocket.OPEN) {
        socket.send(message); // メッセージ送信
      } else {
        console.log('WebSocket is not connected!');
      }
    }
    // ボタンON時メッセージ送信
    function buttonOn() { sendMessage('LED ON'); }
    // ボタンOFF時メッセージ送信
    function buttonOff() { sendMessage('LED OFF'); }

  </script>
</body>
</html>

#include <M5StickCPlus2.h>    // 
#include <WebSocketsServer.h> // WebSocket通信用

WebSocketsServer webSocket = WebSocketsServer(81); // WebSocketサーバーをポート81で準備

void setup() {
  // WebSocketサーバー設定
  webSocket.begin();                 // WebSoket通信の初期化
  webSocket.onEvent(webSocketEvent); // WebSocketのイベントのハンドラ設定
}

// Webscketのイベント設定関数 *****************************************************
void webSocketEvent(uint8_t client_num, WStype_t type, uint8_t * payload, size_t length) {
  switch (type) {
    case WStype_DISCONNECTED: // クライアントとの接続が遮断された時の処理
      Serial.printf("[%u] Disconnected!\n", client_num);
      break;

    case WStype_CONNECTED: {  // サーバー接続時処理
      IPAddress ip = webSocket.remoteIP(client_num); // クライアントのIPアドレスを取得
      Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", client_num, ip[0], ip[1], ip[2], ip[3], payload);
      client_text = (char*)payload; // 受信テキスト取得
      sendMessage("connected!");
      break;
    }
    case WStype_TEXT:         // テキストメッセージ受信時の処理
      Serial.printf("[%u] get Text: %s\n", client_num, payload); // 受信したメッセージ（payload）を表示
      client_text = (char*)payload; // 受信テキスト取得
      break;
    
    case WStype_BIN:          // バイナリデータ受信時の処理
      Serial.printf("[%u] get binary length: %u\n", client_num, length);
      // payload と length を使用してバイナリデータを扱う（今回未使用）
      break;
  }
}

// クライアントへメッセージを送信する関数 ********************************************
void sendMessage(String message) {
  uint8_t clientNum = webSocket.connectedClients(); // 現在の接続クライアント数を取得
  if (clientNum) { // クライアントからの接続があれば
    Serial.printf("Send Message [%s] to %d Client\n", message, clientNum);
    webSocket.sendTXT(0, message);
    send_message = "Send: " + message; // 通信情報格納
  } else {         // クライアントからの接続がなければ
    Serial.println("No cliant!");
    send_message = "No Client!";       // 通信情報格納
  }
}

void loop() {
  webSocket.loop(); // WebSocketによるイベント処理を行う
}

#include <M5StickCPlus2.h>
#include <WebServer.h>        // サーバー設定用
#include <WebSocketsServer.h> // WebSocket通信用

#define LED 19 // 本体LED

M5Canvas canvas(&M5.Lcd); // メモリ描画領域表示（スプライト）のインスタンスを作成
WebServer server(80);                              // Webサーバーをポート80で準備
WebSocketsServer webSocket = WebSocketsServer(81); // WebSocketサーバーをポート81で準備

// 変数宣言
bool state = false;       // ボタン状態確認用
bool led_state = false;   // LED状態確認用
float battery;            // バッテリー残量表示用
String client_text = "";  // クライアントからのテキスト格納用
String client_info = "";  // クライアントからの受信情報表示用
String send_message = ""; // クライアントへの送信情報表示用

// htmlメイン画面データ　※R"この中の文字列は改行は無視され連続した文字列として扱われる"
char html[] = R"(
<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Socket Demo</title>
  <style>
    body { display: flex; justify-content: center; align-items: center; flex-direction: column; margin: 0; }
    .button {width: 100px;height: 55px;border-radius: 5px;margin: 10px;cursor: pointer;font-size: 20px;font-weight: bold;color: white;text-align: center;line-height: 50px;}
    #on-button {background-color: green;}
    #off-button {background-color: red;}
  </style>
</head>
<body>
  <h1>Web Socket Demo</h1>
  <div id="messageContainer">Please wait...</div>
  <div>
    <button onclick='buttonOn()' id="on-button" class="button">ON</button>
    <button onclick='buttonOff()' id="off-button" class="button">OFF</button>
  </div>

  <script>
    let socket; // グローバル変数としてsocketを宣言
    let messageElement = document.getElementById('messageContainer');
    // サーバー側IPアドレスの取得
    async function getIPAddress() {
      const response = await fetch("/get/ip");
      const text = await response.text();
      console.log("Server IPAddress : " + text);
      return text;
    }
    // WebSocketの開始
    async function startWebSocket() {
      let host = await getIPAddress(); // WebSocketサーバーのIPアドレス取得
      let port = 81;                   // WebSocketサーバーのポート番号
      console.log('WebSocket Ready...');
      socket = new WebSocket(`ws://${host}:${port}`); // WebSocketを作成
      
      socket.addEventListener('open', (event) => {    // 接続が開いた時の処理
        console.log('WebSocket opened');
      });
      socket.addEventListener('message', (event) => { // メッセージを受信した時の処理
        console.log(`Received response: ${event.data}`);
        messageElement.textContent = event.data;
      });
      socket.addEventListener('close', (event) => {   // 接続が閉じられた時の処理
        console.log('Connection closed!');
        messageElement.textContent = 'Connection closed!';
      });
    }
    // ボタンON時メッセージ送信
    function buttonOn() { socket.send('LED ON'); }
    // ボタンOFF時メッセージ送信
    function buttonOff() { socket.send('LED OFF'); }
    
    startWebSocket(); // WebSocketの開始
  </script>
</body>
</html>
)";

// サーバーリクエスト時処理関数 **************************************************
void handleRoot() {     // ルートアクセス時の応答関数
  server.send(200, "text/html", html); //レスポンス200を返しhtml送信
}
void getIpAddress() {   // IPアドレスリクエスト時処理
  server.send(200, "text/plane", WiFi.localIP().toString()); //レスポンス200を返しIPアドレスを送信
}
void handleNotFound() { // エラー（Webページが見つからない）時の応答関数
  server.send(404, "text/plain", "404 Not Found!");  // レスポンス404を返し、エラーメッセージ送信
}

// ローカルWi-Fi接続実行関数 *****************************************************
void localWifiConnect() {
  // ローカルWi-Fi接続先設定
  const char ssid[] = "自宅のWi-Fi接続先を設定";  //接続先SSID
  const char pass[] = "Wi-Fi接続先のパスワードを設定"; //接続先パスワード

  // Wi-Fi接続確認（IPアドレスの取得で確認）
  M5.Lcd.println("Wi-Fi Search!");
  while (WiFi.localIP()[0] == 0) { // IPアドレスが取得されるまで繰り返し
    WiFi.begin(ssid, pass);        //ローカル Wi-Fi接続実行
    M5.Lcd.print(". ");
    delay(3000); // 再接続待ち
  }
  Serial.println(WiFi.SSID()); // シリアル出力
  Serial.println(WiFi.localIP());
}

// Webscketのイベント設定関数 *****************************************************
void webSocketEvent(uint8_t client_num, WStype_t type, uint8_t * payload, size_t length) {
  char buff[50]; // 通信情報格納バッファ
  switch (type) {
    case WStype_DISCONNECTED: // クライアントとの接続が遮断された時の処理
      Serial.printf("[%u] Disconnected!\n", client_num);
      sprintf(buff, "[%u]Disconnected!", client_num); // 受信情報整理
      client_info = buff;                             // 通信情報格納
      break;

    case WStype_CONNECTED: {  // サーバー接続時処理
      IPAddress ip = webSocket.remoteIP(client_num);  // クライアントのIPアドレスを取得
      Serial.printf("[%u] Connected from %d.%d.%d.%d url: %s\n", client_num, ip[0], ip[1], ip[2], ip[3], payload);
      webSocket.sendTXT(client_num, "connected!");    // クライアントにメッセージを送信
      sprintf(buff, "[%u]%d.%d.%d.%d", client_num, ip[0], ip[1], ip[2], ip[3]);    // 受信情報整理
      client_info = buff;                             // 通信情報格納
      break;
    }
    case WStype_TEXT:         // テキストメッセージ受信時の処理
      Serial.printf("[%u] get Text: %s\n", client_num, payload); // 受信したメッセージ（payload）を表示
      sprintf(buff, "[%u]%s", client_num, payload);   // 受信情報整理
      client_text = (char*)payload;                   // 受信テキスト取得
      client_info = buff;                             // 通信情報格納
      break;
    
    case WStype_BIN:          // バイナリデータ受信時の処理
      Serial.printf("[%u] get binary length: %u\n", client_num, length);
      // payload と length を使用してバイナリデータを扱う
      break;
  }
}
// クライアントへメッセージを送信する関数 ******************************************************
void sendMessage(String message) {
  uint8_t clientNum = webSocket.connectedClients(); // 現在の接続クライアント数を取得
  if (clientNum) { // クライアントからの接続があれば
    Serial.printf("Send Message [%s] to %d Client\n", message, clientNum);
    for (int i = 0; i < clientNum; i++) { // 接続クライアント数分繰り返し
      webSocket.sendTXT(i, message);      // クライアントにメッセージを送信（クライアント番号は0から始まる） 
    }
    send_message = "Send: " + message; // 通信情報格納
  } else {         // クライアントからの接続がなければ
    Serial.println("No cliant!");
    send_message = "No Client!";       // 通信情報格納
  }
}
// 初期設定 -----------------------------------------
void setup() {
  auto cfg = M5.config(); // 本体初期設定
  StickCP2.begin(cfg);
  Serial.begin(9600);     // シリアル出力初期化

  // 出力端子設定
  pinMode(LED, OUTPUT);   // 本体LED赤
  digitalWrite(LED, LOW); // 本体LED初期値OFF（LOW）

  // ベース画面の初期設定
  M5.Lcd.fillScreen(BLACK); // 背景色
  M5.Lcd.setRotation(1);    // 画面向き設定（USB位置基準 0：下/ 1：右/ 2：上/ 3：左）
  M5.Lcd.setTextSize(1);    // 文字サイズ（整数倍率）
  M5.Lcd.setFont(&fonts::Font4); // フォント

  canvas.setTextWrap(false); // 改行をしない（画面をはみ出す時自動改行する場合はtrue。書かないとtrue）
  canvas.createSprite(M5.Lcd.width(), M5.Lcd.height()); // canvasサイズ（メモリ描画領域）設定（画面サイズに設定）

  localWifiConnect(); // Wi-Fi接続実行

  // Webサーバー設定
  server.on("/", handleRoot);         // ルートアクセス時の応答関数を設定
  server.on("/get/ip", getIpAddress); // IPアドレスを返す
  server.onNotFound(handleNotFound);  // Webページが見つからない時の応答関数を設定
  server.begin();                     // Webサーバー開始

  // WebSocketサーバー設定
  webSocket.begin();                  // WebSoket通信の初期化
  webSocket.onEvent(webSocketEvent);  // WebSocketのイベントのハンドラ設定
}

// メイン -----------------------------------------
void loop() {
  server.handleClient(); //クライアントからのアクセス確認
  webSocket.loop();      // WebSocketによるイベント処理を行う
  M5.update();           //本体ボタン状態更新

  // ボタンA処理
  if (M5.BtnA.wasPressed()) { // ボタンAが押されたら
    state = true;                     // ボタン状態true
    StickCP2.Speaker.tone(4000, 100); // ブザーON（周波数 Hz, 発音時間 ms)
    sendMessage("BtnA ON!");          // WebSocketでテキスト送信
  }
  if (M5.BtnA.wasReleased()) {// ボタンA離されたら
    state = false;                    // ボタン状態false
    sendMessage("BtnA OFF!");         // WebSocketでテキスト送信
  }
  // クライアントからの受信情報処理
  if (client_text == "LED ON" && led_state == false) { // 受信テキストが「LED ON」でLED状態がfalseなら
    digitalWrite(LED, HIGH); // 本体LED赤点灯
    sendMessage("LED ON!");  // WebSocketでテキスト送信
    led_state = true;        // LED状態true
  }
  if (client_text == "LED OFF" && led_state == true) { // 受信テキストが「LED OFF」でLED状態がtrueなら
    digitalWrite(LED, LOW);  // 本体LED赤消灯
    sendMessage("LED OFF!"); // WebSocketでテキスト送信
    led_state = false;       // LED状態false
  }
  // バッテリー残量取得（パーセント）
  battery = StickCP2.Power.getBatteryLevel();  // 0〜100％ で取得

  // LCD表示処理
  canvas.fillScreen(BLACK);              // 画面初期化
  canvas.setFont(&fonts::Font4);         // フォント
  canvas.setCursor(5, 0);                // 座標設定(x, y)
  canvas.setTextColor(WHITE, BLACK);     // (文字色, 背景)
  canvas.print("SSID : " + WiFi.SSID()); // SSID表示
  canvas.setCursor(5, 25);
  canvas.print("IP : " + WiFi.localIP().toString()); // IPアドレス表示
  canvas.setCursor(5, 50);
  canvas.setTextColor(ORANGE, BLACK);
  canvas.print("WebSocket Info :");
  canvas.setCursor(5, 75);
  canvas.print(client_info);  // 通信情報表示
  canvas.setCursor(5, 100);
  canvas.setTextColor(CYAN, BLACK);
  canvas.print(send_message); // 通信情報表示
  canvas.setTextFont(2); // フォント
  canvas.setCursor(202, 120);
  canvas.setTextColor(GREENYELLOW, BLACK);
  canvas.printf("%.0f%%", battery); // バッテリー残量パーセント表示

  // メモリ描画領域を座標を指定して一括表示（スプライト）
  canvas.pushSprite(&M5.Lcd, 0, 0); // (0, 0)座標に一括表示実行
  delay(200); // 遅延時間（ms）
}