Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Another potential 4.3 bug; Messaging broken?

ANSWERED

Hello, has anyone gotten messaging to work in 4.3?

 

I would use 4.2, but I am on the web version. When I try the example settings app, it seems to work as expected, but the message never arrives.

 

If I change the import statement to match the others like so...

import messaging from messaging
//instead of 
import * as messaging from messaging

then I get the following error...

Unhandled exception: TypeError: Cannot read property 'peerSocket' of undefined
? at app/index.js:7,1

This is true of the app I am working on as well as the sample messaging app (once I change the files to work with 4.3.

Does anyone have any advice as to how to proceed?

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

So,

I fell victim to the one change allowing me forget workarounds for other changes. I had forgotten that there is a crucial step missing from the messaging tutorial. 

I have this working now...

 

Here is the code for the sample. 

For app/index.js

import document from "document";
import * as messaging from "messaging";

let background = document.getElementById("background");
//First We Need to Open the Socket  <--- This is missing in the tutorial.
messaging.peerSocket.onopen = function() {
  // Ready to send or receive messages
}

// Now, we can see if a message is received
messaging.peerSocket.onmessage = evt => {
  console.log(`App received: ${JSON.stringify(evt)}`);
  if (evt.data.key === "color" && evt.data.newValue) {
    let color = JSON.parse(evt.data.newValue);
    console.log(`Setting background color: ${color}`);
    background.style.fill = color;
  }
};

// Message socket opens
messaging.peerSocket.onopen = () => {
  console.log("App Socket Open");
};

// Message socket closes
messaging.peerSocket.onclose = () => {
  console.log("App Socket Closed");
};

companion/index.js

import * as messaging from "messaging";
import { settingsStorage } from "settings";

// Message socket opens
messaging.peerSocket.onopen = () => {
  console.log("Companion Socket Open");
  restoreSettings();
};

// Message socket closes
messaging.peerSocket.onclose = () => {
  console.log("Companion Socket Closed");
};

// A user changes settings
settingsStorage.onchange = evt => {
  let data = {
    key: evt.key,
    newValue: evt.newValue
  };
  sendVal(data);
};

// Restore any previously saved settings and send to the device
function restoreSettings() {
  for (let index = 0; index < settingsStorage.length; index++) {
    let key = settingsStorage.key(index);
    if (key) {
      let data = {
        key: key,
        newValue: settingsStorage.getItem(key)
      };
      sendVal(data);
    }
  }
}

// Send data to device using Messaging API
function sendVal(data) {
  if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
    messaging.peerSocket.send(data);
  }
}

settings/index.jsx

function mySettings(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Demo Settings</Text>}>
        <Toggle
          settingsKey="toggle"
          label="Toggle Switch"
        />
        <ColorSelect
          settingsKey="color"
          colors={[
            {color: "tomato"},
            {color: "sandybrown"},
            {color: "#FFD700"},
            {color: "#ADFF2F"},
            {color: "deepskyblue"},
            {color: "plum"}
          ]}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(mySettings);

View best answer in original post

Best Answer
0 Votes
1 REPLY 1

So,

I fell victim to the one change allowing me forget workarounds for other changes. I had forgotten that there is a crucial step missing from the messaging tutorial. 

I have this working now...

 

Here is the code for the sample. 

For app/index.js

import document from "document";
import * as messaging from "messaging";

let background = document.getElementById("background");
//First We Need to Open the Socket  <--- This is missing in the tutorial.
messaging.peerSocket.onopen = function() {
  // Ready to send or receive messages
}

// Now, we can see if a message is received
messaging.peerSocket.onmessage = evt => {
  console.log(`App received: ${JSON.stringify(evt)}`);
  if (evt.data.key === "color" && evt.data.newValue) {
    let color = JSON.parse(evt.data.newValue);
    console.log(`Setting background color: ${color}`);
    background.style.fill = color;
  }
};

// Message socket opens
messaging.peerSocket.onopen = () => {
  console.log("App Socket Open");
};

// Message socket closes
messaging.peerSocket.onclose = () => {
  console.log("App Socket Closed");
};

companion/index.js

import * as messaging from "messaging";
import { settingsStorage } from "settings";

// Message socket opens
messaging.peerSocket.onopen = () => {
  console.log("Companion Socket Open");
  restoreSettings();
};

// Message socket closes
messaging.peerSocket.onclose = () => {
  console.log("Companion Socket Closed");
};

// A user changes settings
settingsStorage.onchange = evt => {
  let data = {
    key: evt.key,
    newValue: evt.newValue
  };
  sendVal(data);
};

// Restore any previously saved settings and send to the device
function restoreSettings() {
  for (let index = 0; index < settingsStorage.length; index++) {
    let key = settingsStorage.key(index);
    if (key) {
      let data = {
        key: key,
        newValue: settingsStorage.getItem(key)
      };
      sendVal(data);
    }
  }
}

// Send data to device using Messaging API
function sendVal(data) {
  if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
    messaging.peerSocket.send(data);
  }
}

settings/index.jsx

function mySettings(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Demo Settings</Text>}>
        <Toggle
          settingsKey="toggle"
          label="Toggle Switch"
        />
        <ColorSelect
          settingsKey="color"
          colors={[
            {color: "tomato"},
            {color: "sandybrown"},
            {color: "#FFD700"},
            {color: "#ADFF2F"},
            {color: "deepskyblue"},
            {color: "plum"}
          ]}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(mySettings);
Best Answer
0 Votes