How to import this plugin in ionic project

[Phoenix-Alpha]

Hi. I want to know how to import this plugin in ionic angular project. I tried the following but it sometimes causes error.

import { CordovaWebsocketPlugin } from "cordova-plugin-advanced-websocket/www/plugin.js"; declare const CordovaWebsocketPlugin: CordovaWebsocketPlugin;

Is there ionic native wrapper in this plugin?

[EinfachHans]

There is no Wrapper for this Plugin. You can use it simple by:

// @ts-ignore
CordovaWebsocketPlugin.wsSend(...);

The ts-ignore is necessary for me as my idea doesn't know this Object at this Point.

[imranaalam]

an example would be very helpful. core.js:4127 ERROR Error: Uncaught (in promise): ReferenceError: CordovaWebsocketPlugin is not defined ReferenceError: CordovaWebsocketPlugin is not defined

[raphrmx]

Hi guy,

Install my sub-package types and use direct it in your project but be careful, you must specify window object before call CordovaWebsocketPlugin.

npm i cordova-plugin-advanced-websocket-types --save-dev

Example:

import {Injectable} from '@angular/core';
...
@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor() {}

  connect() {
    window.CordovaWebsocketPlugin.wsConnect(options, receiveCallback, successCallback, failureCallback);
  }
...

Enjoy :)

[chax]

There is no official wrapper for this plugin, but i made one for my project. I can put it in wiki.

[chax]

https://github.com/HomeControlAS/cordova-plugin-advanced-websocket/wiki/ionic-typescript-wrapper

[G-Cyrille]

Hello, I have been struggling to make this work for the past day so I gently ask for some help here. If I should start a new thread let me know (I believe I have the same problem as the original author but there is no definitive answer from him as to what he did). The more I look into it the more I feel I am missing some elephant configuration in the room, any help is really appreciated !

NB: I have this Stackoverflow running for the same question : https://stackoverflow.com/questions/69950489/how-can-i-use-cordova-plugin-advanced-websocket-with-capacitor

I tried to create a new ionic project with both capacitor and cordova but I end up with the same errors : ionic start websocket-test cd websocket-test ionic build ionic cordova platform add android ionic cordova plugin add cordova-plugin-advanced-websocket ionic serve

Then add the following into the src/app/home/home.page.ts constructor:

const wsOptions = {
  url: 'wss://echo.websocket.org'
};

window.CordovaWebsocketPlugin.wsConnect(
  wsOptions,
  event => { // CordovaWebsocketEvent
    console.log(`Received callback from WebSocket: ${event?.callbackMethod}`);
  },
  success => { // CordovaWebsocketSuccess
    console.log(`Connected to WebSocket with id: ${success.webSocketId}`);
  },
  error => { // CordovaWebsocketError
    console.log(`Failed to connect to WebSocket: code: ${error?.code}, reason: ${error?.reason}`, error?.exception);
  }
);

With:

• CordovaWebsocketPlugin.wsConnect(...) (with or without // @ts-ignore) -> I get the error: Cannot find name 'CordovaWebsocketPlugin'.
• window.CordovaWebsocketPlugin.wsConnect(...) -> I get the error: Property 'CordovaWebsocketPlugin' does not exist on type 'Window & typeof globalThis'.

Oh, and I have no more luck after installing the types plugin : https://github.com/raphrmx/cordova-plugin-advanced-websocket-types

[chax]

@G-Cyrille did you try to import it after installing types:

import {
  CordovaWebsocketOptions
} from 'cordova-plugin-advanced-websocket-types';

and declare CordovaWebsocketPlugin as type any;

declare let CordovaWebsocketPlugin: any;

[G-Cyrille]

Hello @chax Thank you for answering, I have just tried on my empty cordova project (with the installation described in my previous comment) to change the home.page.ts with :

import { Component } from '@angular/core';
import {
  CordovaWebsocketOptions
} from 'cordova-plugin-advanced-websocket-types';

declare let CordovaWebsocketPlugin: any;

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor() {

const wsOptions: CordovaWebsocketOptions = {
  url: 'wss://echo.websocket.org'
};

CordovaWebsocketPlugin.wsConnect(
  wsOptions,
  event => { // CordovaWebsocketEvent
    console.log(`Received callback from WebSocket: ${event?.callbackMethod}`);
  },
  success => { // CordovaWebsocketSuccess
    console.log(`Connected to WebSocket with id: ${success.webSocketId}`);
  },
  error => { // CordovaWebsocketError
    console.log(`Failed to connect to WebSocket: code: ${error?.code}, reason: ${error?.reason}`, error?.exception);
  }
);
  }

}

I still get the error on starting the web application; ERROR Error: Uncaught (in promise): ReferenceError: CordovaWebsocketPlugin is not defined

In order to help reproduce, I published the "mock" project on my github : https://github.com/G-Cyrille/websocket-test