I have a bit of a mystery on my hands and would appreciate some assistance debugging this. I have this script: That opens up an event stream with this PHP file: All of this was working perfectly before and, to my knowledge, I haven't changed a thing with either portion but for some reason my .onmessage function doesn't execute anymore.

Server sent events stopped (was previously working) reaching the browser

I have a bit of a mystery on my hands and would appreciate some assistance debugging this.

I have this script:

//------------ Server sent event stream for sensor events---------------- 
var evtSource = new EventSource("event_manager.php");
evtSource.onmessage = function(e) 
{
    var newElement = document.createElement("li");

    console.log(e.data);
    newElement.innerHTML = e.data;
    eventList.appendChild(newElement);

    //------------ Splits received event data for further use ----------------
    var split_data = e.data.split(" ");
    if (split_data[3] == "Potentiometer")
    {
        document.getElementById("livingRoomTemp").innerHTML = split_data[4] + "°";
    }

    //------------ Keeps event list scrolled to the latest event ----------------
    var objDiv = document.getElementById("eventBar");
    objDiv.scrollTo(0, objDiv.scrollHeight);
}

That opens up an event stream with this PHP file:

<?php

header("Content-Type: text/event-streamnn");
require("../includes/config.php"); 

while (1) {

    $rows = query("SELECT * FROM `event_log` WHERE `displayed` = 0");

    foreach ($rows as $event)
    {
        echo "time:"  . $event["time"]  . "controller:" . $event["controller"]  . "sensor:" .$event["sensor"]  . "data:" .$event["data"]  . " " ."nn";

        query("UPDATE `event_log` SET `displayed` = 1 WHERE `id` = ?", $event["id"]);
    }

    ob_end_flush();
    flush();
    sleep(1);
}

?>

All of this was working perfectly before and, to my knowledge, I haven’t changed a thing with either portion but for some reason my .onmessage function doesn’t execute anymore.

I can curl into the event stream PHP file and watch it working as intended, sending the echo to my terminal but for whatever reason the browser just does nothing. The query function you see there simply sends a SQL query to MySQL. The SSE is clearly running since the query functions are having the intended effect on the MySQL table. I see no errors in the network log of the browser (Iceweasel)and no logs to the console as I would expect. I can even see the network log updating the SSE at the interval that I specified. It’s driving me insane.

I have no idea to fix (unbreak) this and would really appreciate your help.

Extra info:

LAMP server on a Raspberry Pi 2

Raspbian (Jessie, I think. The latest regardless)

Browser: Iceweasel (firefox)

The Pi functions as both UI and server for a DIY home automation system that communicates with Arduino microcontrollers (only one at the moment) that are also set up as servers controlling lights, reading from sensors etc. The data from the arduino is sent to a MySQL database and the SSE above polls that database to see if the latest reading has been displayed in the UI and if not sends it to the browser and updates it as sent.

This was one of the first things I set up in this project and was working as intended until earlier today. Please let me know if I left out any important data and I’ll rectify that immediately.

Answer

Solved it.

Tore the site down to nothing but a div, the script and PHP file and the problem persisted.

Turns out that this was the culprit:

echo "time:" . $event["time"]...

The first part of the response needed to be prefaced with:

echo "data:" . $event["time"]...

Why? I’m not sure. I need to educate myself more on SSEs.

Regardless, the root of the problem here was careless coding. I made a change in anticipation of another feature and didn’t check that it still worked afterwards. I then got sidetracked with something else and forgot about the change I made. This was compounded by the fact that I didn’t keep a whole project backup.

Advertisement

Answer