https://github.com/cheesegrinder/stencil-socket.io
Tool adding decorators in StencilJS to interface more easily socket.io.
https://github.com/cheesegrinder/stencil-socket.io
decorators front-end socket-io stenciljs typescript
Last synced: 8 months ago
JSON representation
Tool adding decorators in StencilJS to interface more easily socket.io.
- Host: GitHub
- URL: https://github.com/cheesegrinder/stencil-socket.io
- Owner: CheeseGrinder
- License: mit
- Archived: true
- Created: 2021-04-09T17:49:23.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-02T14:56:05.000Z (about 5 years ago)
- Last Synced: 2025-02-01T19:45:25.489Z (over 1 year ago)
- Topics: decorators, front-end, socket-io, stenciljs, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/stencil-socket.io
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Helper to use socket.io on StencilJS
## Description 📄
Stencil-socket.io is a helper for using socket.io with Stencil
## Install 📦️
```bash
npm i stencil-socket.io
```
## How to use ✏️
In the shared directory, create a file with the following code :
```ts
// socket.ts
import { StencilSocket } from 'stencil-socket.io';
export const socket = StencilSocket('foo.bar');
```
In a component or class:
```tsx
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;
@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
}
}
```