import { useState } from 'react' import { useChannel, usePresence } from '@ably-labs/react-hooks' import type { Types } from 'ably' import type { ProxyMessage, TextMessage } from '../types' import Head from 'next/head' import Image from 'next/image' import styles from '../styles/Home.module.css' export default function Home() { const [messages, setMessages] = useState([]) const [channel, ably] = useChannel( 'some-channel-name', async (message: Types.Message) => { console.log('Received Ably message', message) setMessages((messages) => [...messages, message.data]) } ) const [presenceData, updateStatus] = usePresence('your-channel-name') const messageList = messages.map((message, index) => { return
  • {message.text}
    • }) const presentClients = presenceData.map((msg, index) => (
  • {msg.clientId}: {msg.data}
    • )) return (
    Create Next App

    Realtime Edge Messaging with Next and Ably

    Use the buttons below to send and receive messages or to update your status.

    Present Clients

      {presentClients}

    Ably Message Data

      {messageList}
    ) }