Arduino for ESP 8266&ESP 32対応ライブラリESPAsyncWebServer:WebSocketおよびEventSource

文書ディレクトリ

目的

WebSocket

使用方法

プレゼンテーション

を使用

詳細

EventSource

使用方法

プレゼンテーション

を使用

詳細

まとめ

目的
WebSocketとEventSourceはHTML 5から提供される機能です.WebSocketは、単一のTCP接続上でフルデュプレクス通信を行うことができる.EventSourceは、サーバからクライアントにメッセージをプロアクティブに送信できます.2つの機能は、Webアプリケーションのデータインタラクションのパフォーマンスを大幅に向上させることができます.この記事では、ESPAsyncWebServerライブラリの2つの機能の使い方について説明します.
本明細書における各ルーチンのデモは、ESP 32において行われる.
WebSocket
使用方法
WebSocketの使用は複雑ではありません.通常の宣言とAsyncWebServerオブジェクトの初期化に加えて、次の手順に従います.

AsyncWebSocketオブジェクトとURLを宣言する.

AsyncWebSocketオブジェクトイベントコールバック関数をバインドする.

は、AsyncWebSocketオブジェクトをサーバに追加する.

プレゼンテーションの使用
次のコードを使用してテストします.#include #include // const char *ssid = "********"; const char *password = "********"; // String indexhtml = String("") + "
" + "
" + "
" + "
" + "
"</span> <span class="token operator">+</span> <span class="token string">" var ws;
"</span> <span class="token operator">+</span> <span class="token string">" if (\"WebSocket\" in window) {
"</span> <span class="token operator">+</span> <span class="token string">" ws = new WebSocket(\"ws://\" + window.location.host + \"/\"); // WebSocket
"</span> <span class="token operator">+</span> <span class="token string">" ws.onopen = function () { //
"</span> <span class="token operator">+</span> <span class="token string">" document.getElementById(\"info\").innerHTML += \"WebSocket ！\" + \"<br>\";
"</span> <span class="token operator">+</span> <span class="token string">" ws.send(\"connect ok!\"); //
"</span> <span class="token operator">+</span> <span class="token string">" };
"</span> <span class="token operator">+</span> <span class="token string">" ws.onmessage = function (evt) { //
"</span> <span class="token operator">+</span> <span class="token string">" document.getElementById(\"info\").innerHTML += evt.data + \"<br>\";
"</span> <span class="token operator">+</span> <span class="token string">" };
"</span> <span class="token operator">+</span> <span class="token string">" ws.onerror = function () { //
"</span> <span class="token operator">+</span> <span class="token string">" document.getElementById(\"info\").innerHTML += \" ！\" + \"<br>\";
"</span> <span class="token operator">+</span> <span class="token string">" };
"</span> <span class="token operator">+</span> <span class="token string">" ws.onclose = function () { //
"</span> <span class="token operator">+</span> <span class="token string">" document.getElementById(\"info\").innerHTML += \"WebSocketTest ！\" + \"<br>\";
"</span> <span class="token operator">+</span> <span class="token string">" };
"</span> <span class="token operator">+</span> <span class="token string">" }
"</span> <span class="token operator">+</span> <span class="token string">" else {
"</span> <span class="token operator">+</span> <span class="token string">" document.getElementById(\"info\").innerHTML = \" WebSocket！\";
"</span> <span class="token operator">+</span> <span class="token string">" }
"</span> <span class="token operator">+</span> <span class="token string">" function sned() {
"</span> <span class="token operator">+</span> <span class="token string">" ws.send(\"hahaha~~~\"); //
"</span> <span class="token operator">+</span> <span class="token string">" }
"</span> <span class="token operator">+</span> <span class="token string">"
" + "
" + "
" + "
" + "
" + "
" + "