Awesome

websocket

Basic, cross-platform native websocket implementation for Capacitor/Ionic.

iOS/Swift implmentation uses StarScream
Android/Java uses NV/NeoVisionaries Websocket Client
Web implementation uses web native websockets

Install

npm install @miaz/capacitor-websocket
npx cap sync

Usage

Rather than overriding Capacitor's addListener and notifyListener under the hood, create specific event names to the source they're coming from, separated with a colon and then the event name itself.

type EventSourceNames = "chat" | "live";

addListener<EventSourceNames>("chat:message", ...);
addListener<EventSourceNames>("live:message", ...);

API

<docgen-index>

connect(...)
disconnect(...)
send(...)
applyListeners(...)
build(...)
addListener(${T}:message, ...)
addListener(${T}:connected, ...)
addListener(${T}:disconnected, ...)
addListener(${T}:statechange, ...)
addListener(${T}:closeframe, ...)
addListener(${T}:connecterror, ...)
addListener(${T}:error, ...)
addListener(${T}:messageerror, ...)
addListener(${T}:senderror, ...)
addListener(${T}:textmessageerror, ...)
addListener(${T}:textmessage, ...)
Interfaces
Type Aliases

</docgen-index> <docgen-api>

connect(...)

connect(options: ConnectOptions) => Promise<void>

Param	Type
`options`	<code><a href="#optionsbase">OptionsBase</a></code>

disconnect(...)

disconnect(options: DisconnectOptions) => Promise<void>

Param	Type
`options`	<code><a href="#optionsbase">OptionsBase</a></code>

send(...)

send(options: SendOptions) => Promise<void>

Param	Type
`options`	<code><a href="#sendoptions">SendOptions</a></code>

applyListeners(...)

applyListeners(options: ApplyListenersOptions) => Promise<void>

Param	Type
`options`	<code><a href="#optionsbase">OptionsBase</a></code>

build(...)

build(options: BuildOptions) => Promise<void>

Param	Type
`options`	<code><a href="#buildoptions">BuildOptions</a></code>

addListener(`${T}:message`, ...)

addListener<T extends string>(eventName: `${T}:message`, listenerFunc: (event: MessageEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:message`</code>
`listenerFunc`	<code>(event: <a href="#messageevent">MessageEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:connected`, ...)

addListener<T extends string>(eventName: `${T}:connected`, listenerFunc: (event: ConnectedEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:connected`</code>
`listenerFunc`	<code>(event: <a href="#connectedevent">ConnectedEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:disconnected`, ...)

addListener<T extends string>(eventName: `${T}:disconnected`, listenerFunc: (event: DisconnectedEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:disconnected`</code>
`listenerFunc`	<code>(event: <a href="#disconnectedevent">DisconnectedEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:statechange`, ...)

addListener<T extends string>(eventName: `${T}:statechange`, listenerFunc: (event: StateChangedEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:statechange`</code>
`listenerFunc`	<code>(event: <a href="#statechangedevent">StateChangedEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:closeframe`, ...)

addListener<T extends string>(eventName: `${T}:closeframe`, listenerFunc: (event: CloseFrameEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:closeframe`</code>
`listenerFunc`	<code>(event: <a href="#closeframeevent">CloseFrameEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:connecterror`, ...)

addListener<T extends string>(eventName: `${T}:connecterror`, listenerFunc: (event: ConnectErrorEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:connecterror`</code>
`listenerFunc`	<code>(event: <a href="#connecterrorevent">ConnectErrorEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:error`, ...)

addListener<T extends string>(eventName: `${T}:error`, listenerFunc: (event: ErrorEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:error`</code>
`listenerFunc`	<code>(event: <a href="#errorevent">ErrorEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:messageerror`, ...)

addListener<T extends string>(eventName: `${T}:messageerror`, listenerFunc: (event: MessageErrorEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:messageerror`</code>
`listenerFunc`	<code>(event: <a href="#messageerrorevent">MessageErrorEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:senderror`, ...)

addListener<T extends string>(eventName: `${T}:senderror`, listenerFunc: (event: SendErrorEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:senderror`</code>
`listenerFunc`	<code>(event: <a href="#senderrorevent">SendErrorEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:textmessageerror`, ...)

addListener<T extends string>(eventName: `${T}:textmessageerror`, listenerFunc: (event: TextMessageErrorEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:textmessageerror`</code>
`listenerFunc`	<code>(event: <a href="#textmessageerrorevent">TextMessageErrorEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

addListener(`${T}:textmessage`, ...)

addListener<T extends string>(eventName: `${T}:textmessage`, listenerFunc: (event: TextMessageEvent) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Param	Type
`eventName`	<code>`${T}:textmessage`</code>
`listenerFunc`	<code>(event: <a href="#textmessageevent">TextMessageEvent</a>) => void</code>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>> & <a href="#pluginlistenerhandle">PluginListenerHandle</a></code>

Interfaces

PluginListenerHandle

Prop	Type
`remove`	<code>() => Promise<void></code>

Type Aliases

ConnectOptions

<code><a href="#optionsbase">OptionsBase</a></code>

OptionsBase

<code>{ name: string, }</code>

DisconnectOptions

<code><a href="#optionsbase">OptionsBase</a></code>

SendOptions

<code><a href="#optionsbase">OptionsBase</a> & { data: any }</code>

ApplyListenersOptions

<code><a href="#optionsbase">OptionsBase</a></code>

BuildOptions

<code><a href="#optionsbase">OptionsBase</a> & { url: string, headers?: { [headerKey: string]: string, } }</code>

MessageEvent

<code>{ data: string }</code>

ConnectedEvent

<code>{ headers: { [x: string]: string[] } }</code>

DisconnectedEvent

<code>{ closedByServer: boolean, serverCloseFrame: string, clientCloseFrame: string }</code>

StateChangedEvent

<code>{ state: string }</code>

CloseFrameEvent

<code>{ frame: string }</code>

ConnectErrorEvent

<code>{ exception: string }</code>

ErrorEvent

<code>{ cause: string }</code>

MessageErrorEvent

<code>{ cause: string, frame: string }</code>

SendErrorEvent

<code>{ cause: string, frame: string }</code>

TextMessageErrorEvent

<code>{ data: string, cause: string }</code>

TextMessageEvent

<code>{ data: string }</code>

</docgen-api>