as the tcp plugin is not yet ‘capacitor’ enabled, I need to use the cordova version.
I have it installed.
now… how do I reference a cordova plugin in my script?
I am missing the understanding of some import… the plugin says
none of the examples show this detail.
I see this in the runtime,
V/Capacitor/Plugin: To native (Cordova plugin): callbackId: ChromeSocketsTcp38916293, service: ChromeSocketsTcp,
how do I access that in my code?
I see this in ionic capacitor build android
capacitor sync android
✔ Copying web assets from dist to android/app/src/main/assets/public in 140.01ms
✔ Copying native bridge in 1.18ms
✔ Copying capacitor.config.json in 1.11ms
Found 4 Cordova plugins for android
cordova-chrome-sockets-tcp (1.4.0)
cordova-plugin-chrome-apps-common (1.0.7)
cordova-plugin-chrome-apps-sockets-tcp (1.3.7)
cordova-plugin-chrome-apps-sockets-tcpserver (1.2.4)
✔ copy in 224.49ms
✔ Updating Android plugins in 9.71ms
Found 1 Capacitor plugin for android:
capacitor-udp (0.2.0)
Found 4 Cordova plugins for android
cordova-chrome-sockets-tcp (1.4.0)
cordova-plugin-chrome-apps-common (1.0.7)
cordova-plugin-chrome-apps-sockets-tcp (1.3.7)
cordova-plugin-chrome-apps-sockets-tcpserver (1.2.4)
Found 1 incompatible Cordova plugin for android, skipped install
cordova-plugin-chrome-apps-iossocketscommon (1.0.2)
✔ update android in 38.97ms
so it knows they are installed…
As far as capacitor is concerned, installing the plugins via npm should be all you need. Capacitor’s cli will know how to copy it over.
For the actual plugin itself, you’d just reference the plugin off the global object it is attached to. That or use something like Ionic Native and it’s ES2015 output.
what is that ? and how would I know?
section Adding A Non Capacitor Plugin
it says ‘window’, but window is not set
i get this error at runtime on the physical device
sockets failure=TypeError: Cannot read property 'chrome' of undefined
my old angular version does this
(<any>window).chrome.sockets.tcpServer.create(p,
but the < any > confuses the compiler
/home/sam/ionic/config/src/services/networkservice.js: Unexpected token, expected "}" (104:35)
102 | (<any>window).cordova.plugins.chrome.sockets.tcpserver.create(p,
103 | function (createInfo) {
> 104 | console.log("socket created");
|
col 35 is after " (window).cordova.plug"
I see where he did the ‘window’ thing for the capacitor plugin, but he didn’t mention that for cordova plugin
What Plugin are you using? Got a link to the repo itself?
Try…(window as any).chrome.sockets...
I will note that, both of those plugins are very old and may not be up to date with the latest native code updates.
understood on the age, but there is nothing comparable , there is for udp… not for tcp…and I need the server side as the remote side will call back
/home/sam/ionic/config/src/services/networkservice.js: Unexpected token, expected "," (102:12)
100 |
101 |
> 102 | (window as any).chrome.sockets.tcpserver.create(p,
Can you share a more complete example here? The error message you provided and the line it’s pointing to doesn’t seem to match up.
error message off… u bet, very confusing
my startup page component
<template>
<!--
Generated template for the StartupPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header >
<ion-title style="text-align:center;"> Mirror Discovery</ion-title>
</ion-header>
<ion-content padding>
<div style="text-align:center;">Mirror Discovery in progress, please wait...</div>
</ion-content>
</template>
<script>
import { IonContent, IonHeader, IonTitle,
} from "@ionic/vue";
import NetworkService from "../services/networkservice.js";
export default {
name: "Startup",
components: {
IonContent,
IonHeader,
IonTitle,
},
//its: ["changepage"],
methods: {},
created(){
console.log("calling network service find")
NetworkService.findserverAddress(window, "192.168.2.106", (address)=> {
console.log("server at "+address)
})
},
props: {
isInOutlet: {
type: Boolean,
default: function() {
return false;
}
}
,
registerIonPage : {
type: Function,
default: function() {
return ()=>{console.log("")};
}
}
}
};
</script>
which calls the library to locate the server
this is services/networkservice.js
import Vue from 'vue';
import {
modalController,
} from "@ionic/vue";
import {
Plugins
} from '@capacitor/core';
export default {
ReceiverPort: 8100,
BROADCAST_ADDR: "192.168.2.255",
MirrorRequest: "DISCOVER_MIRRORSERVER_REQUEST:",
expectedResponse: "DISCOVER_MIRRORSERVER_RESPONSE:",
amountReceived: 0,
counter: 0,
serverAddress: "",
timeoutHandle: 0,
discoveryTimeout: 5000,
UdpPlugin: 0,
async findserverAddress(window, ip) {
return new Promise((resolve, reject) => {
try {
const p = {
persistent: false
};
window.chrome.sockets.tcpServer.create(p,
function (createInfo) {
console.log("socket created");
try {
window.chrome.sockets.tcpServer.listen(createInfo.socketId, ip, 0, 1,
function (result) {
console.log("get socket info=" + JSON.stringify(result));
window.chrome.sockets.tcpServer.getInfo(this.socketId,
function (info) {
console.log("socket info =" + JSON.stringify(info));
//this.port=info.localPort
console.log("using port=" + info.localPort);
const ha = this.handleAccept;
console.log(" handleaccept function =" + ha);
window.chrome.sockets.tcpServer.onAccept.addListener(ha);
window.chrome.sockets.tcp.onReceive.addListener((data, socketId1) => {
this.recvListener(data, socketId1, resolve, reject)
});
window.chrome.sockets.tcp.onReceiveError.addListener(
function (info) {
console.log("socket error=" + JSON.stringify(info));
}
);
//console.log("sockets="+JSON.stringify(.chrome.sockets));
this.timeoutHandle = setTimeout(
function () {
// if we timed out,return null so caller can address the issue
reject("timeout");
},
this.discoveryTimeout
);
for (let q = 0; q < 3; q++)
this.sendTo(this.MirrorRequest + info.localPort, this.ReceiverPort, this.BROADCAST_ADDR);
}
)
}.bind({
socketId: createInfo.socketId
})
)
} catch (ex) {
console.log("listen failed=" + ex);
}
}
)
console.log("after create");
} catch (ex) {
console.log("sockets failure=" + ex);
}
})
},
sendTo(){console.log("")},
handleAccept(){console.log("")},
}
SO… you have to use the right names… duh
while the plugins are called lower case chrome.sockets.tcpserver, its actually chrome.sockets.tcpServer
and its directly off window
so, window.chrome.sockets.tcpServer and window.chrome.sockets.tcp (all lower case)
found this by dumping out keys in window object
AND this is in a library service… NOT the component, so ‘window’ doesn’t point to anything useful…
had to pass it from the component
Note: editing above posts code to show working solution