import { WsKit } from "websocketkit";
import Pusher from 'pusher-js';
 
declare module 'websocketkit' {
  interface ChannelRegistry {
    'chats.$chatId': {
      type: 'presence';
      params: {
        chatId: string;
      };
      events: {
        messageSent: {
          userId: string,
          message: string,
          timestamp: string,
        }
      };
      whispers: {
        userIsTyping: {
          userId: string
        }
      }
    };
  }
}
 
const pusher = new Pusher('TEST', {cluster: 'mt1'});
const wskit = new WsKit(pusher);
// ---cut---
 

Presence channel

Presence channels build on the security of Private channels and expose the additional feature of an awareness of who is subscribed to that channel.

Subscribe

Create a subscription to a specific channel. Provide any required parameters for public, private or presence channels.

const sub = wskit.subscribe('chats.$chatId', {
  type: 'presence', params: { chatId: '7onDwfuO6MkXNtLXby1Gg' }
});

Unsubscribe

Stop receiving events and clear all listeners from the subscription.

sub.dispose();

Events

Listen for an event

Subscribe to a specific event on the channel.

sub.on('messageSent', (event) => {
  /** Hover over `event` to view its inferred type */
})

Stop listening for an event

Remove a specific listener using either the returned unsubscribe function or the original callback reference.

const unsub = sub.on('messageSent', (event) => {
  /** Hover over `event` to view its inferred type */
})
 
//Later
unsub();

/** You have to explicitly define the type of the event **/
const messageSentHandler = (event: { userId: string, message: string }) => {
  /** Do something with the event **/
}
 
const unsub = sub.on('messageSent', messageSentHandler)
 
//Later
sub.off('messageSent', messageSentHandler);

Notifications

Listen for a notification

Listen for .Illuminate\\Notifications\\Events\\BroadcastNotificationCreated event on a channel.

sub.notification((notif) => {
  /** Do something with a notification event **/
});

Stop listening for a notification

// Using returned unsubscribe function
const unsub = sub.notification((notif) => {
  /** Do something with a notification event **/
});
 
unsub()

Client Events

Communicate directly with other subscribers on the channel.

Send a whisper

sub.whisper('userIsTyping', { userId: '019a3266-c935-7a3c-8659-fc3167baf68d' });

Listen for a whisper

sub.listenForWhisper('userIsTyping', (event) => {
  /** Do something with the event **/
})

Stop listening for a whisper

const unsub = sub.listenForWhisper('userIsTyping', (event) => {
  /** Do something with the event **/
});
 
unsub();

/** You have to explicitly define the type of the event **/
const userIsTypingHandler = (event: { userId: string }) => {
  /** Do something with the event **/
}
 
sub.listenForWhisper('userIsTyping', userIsTypingHandler);
 
// Later
sub.stopListeningForWhisper('userIsTyping', userIsTypingHandler);

Presence Events

Presence channels have a number of pre-defined events that can be bound to in order to notify a connected client about users joining or leaving the channel.

Here

The here callback will be executed immediately once the channel is joined successfully, and will receive an array containing the user information for all of the other users currently subscribed to the channel.

sub.here((members) => {
  /** Do something with the event **/
})

Joining

Triggered when someone joins the channel.

sub.joining((member) => {
  /** Do something with the event **/
})

Leaving

Triggered when someone leaves the channel.

sub.leaving((member) => {
  /** Do something with the event **/
})

Internal Events

Subscription succeeded

Triggered when the subscription is successfully established.

sub.subscribed(() => {
  /** Do something after successful subscription **/
})

Subscription error

Triggered when authorization fails for private or presence channels. Internally, this listens for the pusher:subscription_error event .

sub.error((error) => {
  /** Handle subscription error **/
})