07-31-2021 09:13
07-31-2021 09:13
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?
Answered! Go to the Best Answer.
07-31-2021 16:35
07-31-2021 16:35
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);
07-31-2021 16:35
07-31-2021 16:35
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);