Framework Hooks — React, Vue, and Svelte

Installation

npm install atmosphere.js

import { ... } from 'atmosphere.js/react'; // React 18+
import { ... } from 'atmosphere.js/vue'; // Vue 3
import { ... } from 'atmosphere.js/svelte'; // Svelte 4/5

React

AtmosphereProvider

import { AtmosphereProvider } from 'atmosphere.js/react';
function App() {
 return (
 <AtmosphereProvider config={{ logLevel: 'info' }}>
 <Chat />
 </AtmosphereProvider>
 );
}

<AtmosphereProvider instance={myAtmosphere}>

useAtmosphere

import { useAtmosphere } from 'atmosphere.js/react';
function Notifications() {
 const { data, state, push, error } = useAtmosphere<Notification>({
 request: { url: '/atmosphere/notifications', transport: 'websocket' },
 });
 if (state === 'connected' && data) {
 return <div>{data.text}</div>;
 }
 return <div>Connecting...</div>;
}

useRoom

import { useRoom } from 'atmosphere.js/react';
interface ChatMessage {
 text: string;
}
function Chat() {
 const { joined, members, messages, broadcast, sendTo, error } = useRoom<ChatMessage>({
 request: { url: '/atmosphere/room', transport: 'websocket' },
 room: 'lobby',
 member: { id: 'alice', metadata: { name: 'Alice' } },
 });
 return (
 <div>
 <p>{joined ? `Online: ${members.length}` : 'Joining...'}</p>
 <ul>
 {messages.map((m, i) => (
 <li key={i}><b>{m.member.id}</b>: {m.data.text}</li>
 ))}
 </ul>
 <button onClick={() => broadcast({ text: 'Hello!' })}>Send</button>
 </div>
 );
}

usePresence

import { usePresence } from 'atmosphere.js/react';
function OnlineIndicator() {
 const { members, count, isOnline } = usePresence({
 request: { url: '/atmosphere/room', transport: 'websocket' },
 room: 'lobby',
 member: { id: currentUser.id },
 });
 return (
 <div>
 <span>{count} online</span>
 {isOnline('bob') && <span>Bob is here!</span>}
 </div>
 );
}

Vue

useAtmosphere

<script setup lang="ts">
import { useAtmosphere } from 'atmosphere.js/vue';

const { data, state, push } = useAtmosphere<ChatMessage>({
 url: '/atmosphere/chat',
 transport: 'websocket',
});
</script>
<template>
 <div>State: {{ state }}</div>
 <div v-if="data">{{ data }}</div>
 <button @click="push(JSON.stringify({ text: 'Hello' }))">Send</button>
</template>

useRoom

<script setup lang="ts">
import { useRoom } from 'atmosphere.js/vue';

const { joined, members, messages, broadcast, sendTo } = useRoom<ChatMessage>(
 { url: '/atmosphere/room', transport: 'websocket' },
 'lobby',
 { id: 'alice' },
);
</script>
<template>
 <div v-if="joined">
 <p>{{ members.length }} members online</p>
 <div v-for="msg in messages" :key="msg.data.text">
 <b>{{ msg.member.id }}</b>: {{ msg.data.text }}
 </div>
 <button @click="broadcast({ text: 'Hello!' })">Send</button>
 </div>
 <div v-else>Joining room...</div>
</template>

usePresence

<script setup lang="ts">
import { usePresence } from 'atmosphere.js/vue';

const { members, count, isOnline } = usePresence(
 { url: '/atmosphere/room', transport: 'websocket' },
 'lobby',
 { id: currentUser.id },
);
</script>
<template>
 <span>{{ count }} online</span>
</template>

Svelte

createAtmosphereStore

<script>
 import { createAtmosphereStore } from 'atmosphere.js/svelte';

 const { store: chat, push } = createAtmosphereStore({
 url: '/atmosphere/chat',
 transport: 'websocket',
 });
 // $chat.state, $chat.data, $chat.error
</script>
<p>State: {$chat.state}</p>
{#if $chat.data}
 <p>{JSON.stringify($chat.data)}</p>
{/if}
<button on:click={() => push(JSON.stringify({ text: 'Hello' }))}>Send</button>

createRoomStore

<script>
 import { createRoomStore } from 'atmosphere.js/svelte';

 const { store: lobby, broadcast, sendTo } = createRoomStore(
 { url: '/atmosphere/room', transport: 'websocket' },
 'lobby',
 { id: 'alice' },
 );
</script>
{#if $lobby.joined}
 <p>{$lobby.members.length} members online</p>
 {#each $lobby.messages as msg}
 <p><b>{msg.member.id}</b>: {msg.data}</p>
 {/each}
 <button on:click={() => broadcast('Hello!')}>Send</button>
{:else}
 <p>Joining room...</p>
{/if}

createPresenceStore

<script>
 import { createPresenceStore } from 'atmosphere.js/svelte';

 const presence = createPresenceStore(
 { url: '/atmosphere/room', transport: 'websocket' },
 'lobby',
 { id: currentUser.id },
 );
</script>
<span>{$presence.count} online</span>
{#each $presence.members as m}
 <span>{m.id}</span>
{/each}

API Summary

Shared Types

interface RoomMember {
 id: string;
 metadata?: Record<string, unknown>;
}
interface PresenceEvent {
 type: 'join' | 'leave';
 room: string;
 member: RoomMember;
}
type ConnectionState = 'disconnected' | 'connected' | 'reconnecting' | 'closed' | 'error';

See Also