A functional component built with React that uses Ably
import React, { useState, useEffect } from 'react'; | |
import Ably from "ably/promises"; | |
const client = new Ably.Realtime("you-api-key-here"); | |
const Component = (props) => { | |
const channel = client.channels.get('some-channel'); | |
const [ messages, updateMessages ] = useState([]); | |
useEffect(() => { | |
async function subscribe() { | |
await channel.subscribe(message => { | |
console.log("A message was received", message); | |
const newMessages = messages.slice(); | |
newMessages.push(message.data.text); | |
updateMessages(newMessages); | |
}); | |
} | |
subscribe(); | |
return function cleanup() { | |
channel.unsubscribe(); | |
}; | |
}); | |
const sendMessage = () => { | |
channel.publish({ name: "myEventName", data: { text: "Some random stuff here." } }); | |
}; | |
return ( | |
<main> | |
<button onClick={ (e) => sendMessage(e) }>Click here to send a message</button> | |
<h2>Messages will go here:</h2> | |
<ul> | |
{ messages.map((text, index) => (<li key={"item" + index}>{text}</li>)) } | |
</ul> | |
</main> | |
) | |
}; | |
export default Component; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment