Docs/Core concepts/Presence

Presence

Presence channels track who is subscribed, with a live member set and join/leave events.

Concept· 5 min read

What presence adds

A presence channel is an authenticated channel that also tracks who is subscribed. Subscribers get a live member set plus join and leave events — EmitWave pushes join/leave to every subscriber and lets them read the current member set.

Authorizing a presence channel

The channel-auth callback must return the member's identity. That identity is embedded (server-signed) in the subscription token, so it always comes from your server — never the client.

channels.php

Emitwave::channel('presence-room.{room}', fn ($user, $room) => [
    'id' => (string) $user->id,
    'info' => ['name' => $user->name],
]);

A truthy value alone is not enough for presence — EmitWave needs an id to populate the member set. Return at least { id }, optionally with an info object.

Reading the member set

The members property is only available on presence channels. Use it to render the current roster and identify the local user with members.me.

presence.ts

const room = await emitwave.subscribe('presence-room.lobby')

room.members.each((member) => console.log(member.id, member.info))
console.log(room.members.count, room.members.me)

room.member_added((member) => console.log('joined', member))
room.member_removed((member) => console.log('left', member))

Join & leave events

Bind member_added and member_removed to update your UI as people come and go. members.count stays in sync.

In Vue

The Vue SDK wraps all of this in a usePresence composable that returns reactive members and count.

Room.vue

<script setup lang="ts">
import { usePresence } from '@emitwave/vue'

const { members, count, error } = usePresence('presence-room.lobby')
</script>

<template>
  <p>{{ count }} online</p>
  <ul>
    <li v-for="m in members" :key="m.id">{{ m.info?.name ?? m.id }}</li>
  </ul>
</template>

← Previous

Events

Publishing