質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • JavaScript

    17531questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Chrome

    641questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

  • mbed

    23questions

    mbed(エンベッド)は、Webサイト上でC++を使って開発を行う、ワンボードマイコンのプロトタイピングツールです。PCに開発環境をインストールする必要がなく、Webにアクセスできればどこにいても開発を行うことができます。

Server-Sent Eventでイベントが発火しない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 166

drao0113

score 3

SSEを使用して、ブラウザ上のWebページの値をリアルタイムで変更したいのですが、
ブラウザ上の表示が変わりません。

サーバのIPアドレスは192.168.100.109で、GR-LYCHEEというmbedのボードです。

chromeのconsoleで確認すると、
openイベント、messageイベント等、一切認識することができていませんでした。

何が悪いか推測できませんか?

上のコードが、HTML
下のコードが、mbedのコードです

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.3, user-scalable=yes">
    <title>Server-Sent Events Test</title>
    <script type="text/javascript">
        var source = new EventSource('http://192.168.100.109');
        source.onmessage = function(event) {
            console.log("msg");
        }
        source.addEventListener('msg_1', function (event) {
            var ms1 = document.getElementById('msgs1');
            ms1.innerHTML = event.data;
            console.log("msg_1");
            console.log(event.data);
        });
        source.addEventListener('msg_2', function (event) {
            var ms2 = document.getElementById('msgs2');
            ms2.innerHTML = event.data;
            console.log("msg_2");
            console.log(event.data);
        });
        source.addEventListener('error', function (event) {
            source.close();
            console.log("close");
        });
        source.addEventListener('open', function(event) {
              console.log("Connection was opened.");
        });
        source.addEventListener("message",function(e){
            console.log("message");
        });
    </script>
</head>

<body>
    <FONT size="4">
        analog A0
        <div id="msgs1">msg1</div>
        <br> analog A1
        <div id="msgs2">msg2</div>
</body>

</html>
#include "mbed.h"
#include "ESP32Interface.h"
#include "TCPServer.h"
#include "TCPSocket.h"
#include <stdio.h>
#include <string>
#include <sstream>

#include "SdUsbConnect.h"
#define MOUNT_NAME             "storage"

using namespace     std;

ESP32Interface wifi(P5_3, P3_14, P7_1, P0_1, false);


void DATA_Output(TCPSocket& client);
void sendSSE(TCPSocket& client);
void DATA_Close(TCPSocket& client);

void wifi_init()
{
    printf("NetworkSocketAPI Example\r\n");

    wifi.connect("xxx", "xxxx");
    printf("IP address: %s\n", wifi.get_ip_address());
    printf("MAC address: %s\n", wifi.get_mac_address());

    TCPSocket socket(&wifi);
    socket.connect("4.ifcfg.me", 23);

    char buffer[64];
    int count = socket.recv(buffer, sizeof(buffer));
    buffer[count]='\0';
    printf("public IP address is: %.15s\n", &buffer[15]);

    socket.close();

    printf("Done\n");
}


string PASSWORD =   "secret";    // change as you like
string              httpContent;    // HTTP content

/*
    -1 invalid password
    -2 no command given but password valid
    -3 just refresh page
    0 switch off
    1 switch on
*/

int8_t analyseURL(string& url)
{
    if(url.substr(5, PASSWORD.size()) != PASSWORD)
        return(-1);

    uint8_t pos = 5 + PASSWORD.size();

    if(url.substr(pos, 1) == " ")
        return(-2);

    if(url.substr(pos++, 1) != "/")
        return(-1);

    string  cmd(url.substr(pos, 5));

    if(cmd == "?sw=0")
        return(0);

    if(cmd == "?sw=1")
        return(1);

    return(-3);
}

string& movedPermanently(uint8_t flag)
{
    if(flag == 1)
        httpContent = "/" + PASSWORD + "/";
    else
        httpContent = "";

    httpContent += "<h1>301 Moved Permanently</h1>\r\n";

    return(httpContent);
}

string& showWebPage(uint8_t status)
{
    FILE *fp;
    size_t size;
    long length;
    char *buffer;

    printf("File Parsing:\n");

    fp = fopen("/"MOUNT_NAME"/storage/index2.html", "r");

    if (fp == NULL) {
        printf("fopen error\n");
    }

    /* ファイルサイズの取得 */
    if (fseek(fp, 0, SEEK_END) != 0) {
        printf("seek error\n");
    }
    length = ftell(fp);
    printf("length:%d\n", length);

    if (fseek(fp, 0L, SEEK_SET) != 0) {
        printf("seek error\n");
    }

    /* ファイル全体を格納するメモリを割り当てる */
    buffer = (char*) malloc(length);
    if (buffer == NULL) {
        printf("malloc error\n");
    }

    size = fread(buffer, 1, length, fp);
    printf("size:%d\n", size);

    if (length != size) {
        printf("fread error\n");
    }

    buffer[size] = '\0';
    //printf(buffer);
    //printf("\n");

    fclose(fp);

    httpContent = string(buffer);

    return httpContent;
}

void sendHTTP(TCPSocket& client, string& header, string& content)
{
    char    content_length[5] = { };

    header += "\r\nContent-Type: text/html\r\n";
    header += "Content-Length: ";
    sprintf(content_length, "%d", content.length());
    header += string(content_length) + "\r\n";
    header += "Pragma: no-cache\r\n";
    header += "Connection: About to close\r\n";
    header += "\r\n";

    string  webpage = header + content;
    client.send((char*)webpage.c_str(), webpage.length());
    printf("HTTP sent.\n\r");

    client.close();
    printf("socket close\n\r");
}



int main(void)
{
#define HTTP_OK         "HTTP/1.1 200 OK"
#define MOVED_PERM      "HTTP/1.1 301 Moved Permanently\r\nLocation: "
#define UNAUTHORIZED    "HTTP/1.1 401 Unauthorized"

    TCPServer           server;
    TCPSocket           clientSocket;
    SocketAddress       clientAddress;
    char                receiveBuf[1024] = { };
    string              httpHeader;     // HTTP header
    static int Java_on = false;

    SdUsbConnect storage(MOUNT_NAME);
    printf("Finding storage..");

    storage.wait_connect();
    printf("done\n");

    wifi_init();

    server.open(&wifi);
    printf("server.open\n");

    server.bind(wifi.get_ip_address(), 80);
    printf("Bind the HTTP port (TCP 80) to the server\n");

    server.listen(5);
    printf("Can handle 5 simultaneous connections\n");

    while(true) {
        printf("=========================================\r\n");
        printf("Ready to serve clients.\r\n");
        server.accept(&clientSocket, &clientAddress);
        printf("Connection succeeded!\n\rIP: %s\n\r", clientAddress.get_ip_address());
        clientSocket.recv(receiveBuf, 1023);
        printf("Recieved Data: %d\n\r\n\r%.*s\n\r", strlen(receiveBuf), strlen(receiveBuf), receiveBuf);


        string  received(receiveBuf);

        if(received.substr(0, 3) != "GET") {
            httpHeader = HTTP_OK;
            httpContent = "<h1>200 OK</h1>";
            sendHTTP(clientSocket, httpHeader, httpContent);
            continue;
        }

        if(received.substr(0, 6) == "GET / ") {
            httpHeader = HTTP_OK;
            httpContent = "<p>Usage: Type http://ip_address/password/ into your web browser and hit ENTER</p>\r\n";
            sendHTTP(clientSocket, httpHeader, httpContent);
            continue;
        }

        int cmd = analyseURL(received);

//        if(cmd == -2) {
//
//            // redirect to the right base url
//            httpHeader = MOVED_PERM;
//            sendHTTP(clientSocket, httpHeader, movedPermanently(1));
//            continue;
//        }
//
//        if(cmd == -1) {
//            httpHeader = UNAUTHORIZED;
//            httpContent = "<h1>401 Unauthorized</h1>";
//            sendHTTP(clientSocket, httpHeader, httpContent);
//            continue;
//        }
//
//        if(cmd == 1) {
//            printf("SW:ON\n");
//        }
//
//        if(cmd == 0) {
//            printf("SW:OFF\n");
//        }

        if(Java_on==false) {
            httpHeader = HTTP_OK;
            sendHTTP(clientSocket, httpHeader, showWebPage(0));
            wait(3);
            Java_on = true;
        } else {
            sendSSE(clientSocket);
            for(int i=0; i<100; i++) {
                DATA_Output(clientSocket);
                wait(1);
            }
            DATA_Close(clientSocket);
            Java_on = false;
        }
    }
}


void sendSSE(TCPSocket& client)
{
    string header = "";
    header = "HTTP/1.1 200 OK\r\n";
    header += "Content-Type: text/event-stream\r\n";
    header += "Cache-Control: no-cache\r\n";
    header += "\r\n";
    client.send((char*)header.c_str(), header.length());
    printf("SSE sent.\n\r");
}

void DATA_Close(TCPSocket& client)
{
    string content = "";

    content ="event: msg_1\r\n";
    content += "data:EventSource.  Close\r\n";
    content += "\r\n";
    content += "event: msg_2\r\n";
    content += "data:EventSource.  Close\r\n";
    content += "\r\n";
    content += "event: close\r\n";
    printf("DATA_Output:CLose\n");
    client.send((char*)content.c_str(), content.length());

    wait_ms(1);

    client.close();
    printf("client disconnected\n");

}

void DATA_Output(TCPSocket& client)
{
    string content = "";

    content = "event: msg_1\r\n";
    content += "data: 1\r\n";
    content += "\r\n";

    content += "event: msg_2\r\n";
    content += "data: 2\r\n";
    content += "\r\n";

    client.send((char*)content.c_str(), content.length());
    printf("DATA_Output\n");
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17531questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Chrome

    641questions

    Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

  • mbed

    23questions

    mbed(エンベッド)は、Webサイト上でC++を使って開発を行う、ワンボードマイコンのプロトタイピングツールです。PCに開発環境をインストールする必要がなく、Webにアクセスできればどこにいても開発を行うことができます。