💡Getting Started
Install the package. It's only ~1.9kb at the time of writing.
npm i hypercast
Topics
Hypercast instances have many topics, which are kind of like a channel that a group of Hypercast clients connect to and communicate through. So to use Hypercast, you need to create and manage one or more topics.
The easiest way to do this is with the Operator
class:
import { Operator } from 'hypercast/client'
const operator = new Operator()
const { topic } = await operator.createTopic()
Once you have a topic, you can instantiate a Hypercast client.
const hypercast = operator.connect(topic)
Other times, you'll have the topic already and can stand up a client directly.
import { Hypercast } from 'hypercast/client'
const hypercast = new Hypercast(topic)
Sending Messages
With your Hypercast client you can now send and receive messages from other clients connected to the same topic. Clients don't receive messages their own messages, only those that originated from other connections.
hypercast.on('message', ({ data }) => {
console.log('received', data)
})
hypercast.send('hello')
You can send any serializable message you wish. Arrays, objects, numbers, and strings are all fair game. The client instance will internally stringify what you pass it, so no need to run JSON.stringify
unless you have non-standard stuff like circular references.
hypercast.send({ message: 'hello' })
Full(ish) example
import { Operator } from 'hypercast/client'
enum Event {
Connect = 'connect',
Message = 'message',
}
type Events = {
type: Event.Connect
data: { name: string },
} | {
type: Event.Message,
data: { value: string },
}
const operator = new Operator<Events>('...')
const { topic } = await operator.createTopic()
const hypercast = operator.connect(topic)
hypercast.on('message', ({ type, data }) => {
switch (type) {
case Event.Connect:
setName(data.name)
break
case Event.Message:
setMessages(state => [...state, data.value])
}
})
const ack = hypercast.send({
type: Event.Connect,
data: { name: 'Jane' },
})
await ack
Last updated