Using cordova plugin in Vue app

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?


repo

repo

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