stencil-socket.io v2.2.2

Description 📄

Install 📦️

npm i stencil-socket.io

How to use ✏️

In the shared directory, create a file with the following code :

// socket.ts
import { StencilSocket } from 'stencil-socket.io';

export const socket = StencilSocket('foo.bar');

In a component or class:

import { Component, h, State } from '@stencil/core';
import { Socket } from 'socket.io-client';
import { IoEmmiter } from 'stencil-socket.io';
import { socket } from 'shared/socket';

@Component({
  tag: 'some-component'
})
export class SomeComponent {

  private socketIsConnected: boolean = false;

  @State() data: number = 0;

  @socket.Instance() socket: Socket;

  @socket.Emit('socket:event') emmiter: IoEmmiter<number>;

  @socket.Receive('socket:event') onReceive(data: number): void {
    this.data = data;
  }

  @socket.Connect() onConnect(): void {
    this.socketIsConnected = true;
  }

  @socket.Disonnect() ondisconnect(): void {
    this.socketIsConnected = false;
  }

  /** alternative to @Connect and @Disconnect */
  @socket.Status() onSocketstatusChange(connected: boolean): void {
    this.socketIsConnected = connected;
  }

  private emit(): void {
    this.emmiter.emit(this.data);
  }

  render() {
    // Render a beautiful component
  }
}