React hooks for interacting with socket.io servers in Jamsocket session backends.
Read the docs here
npm install @jamsocket/socketioHere's an example of how different parts of Jamsocket's client libraries work together.
import Jamsocket from '@jamsocket/server'
const jamsocket = Jamsocket.init({
account: '[YOUR ACCOUNT]',
token: '[YOUR TOKEN]',
service: '[YOUR SERVICE]',
// during develpment, you can simply pass { dev: true }
})
const spawnResult = await jamsocket.spawn() // returns an instance of SpawnResultimport {
type SpawnResult,
SessionBackendProvider, SocketIOProvider,
useEventListener, useSend, useReady
} from '@jamsocket/socketio'
function Root() {
return(
<SessionBackendProvider spawnResult={spawnResult}>
<SocketIOProvider url={spawnResult.url}>
<MyComponent />
</SocketIOProvider>
</SessionBackendProvider>
)
}
function MyComponent() {
const ready = useReady()
const sendEvent = useSend()
useEffect(() => {
if (ready) {
sendEvent('some-event', someValue)
}
}, [ready])
useEventListener('another-event', (args) => {
// do something when receiving an event message from your session backend...
})
}The SocketIOProvider uses the url returned from the spawn function to connect to a SocketIO server running in your session backend.
Using the SocketIOProvider lets you use the React hooks in @jamsocket/socketio. It must be used in conjunction with @jamsocket/server and @jamsocket/react in order to properly access the session backend.
The SocketIOProvider must be a child of the SessionBackendProvider because it depends on the SessionBackendProvider's context.
import { SessionBackendProvider, type SpawnResult } from '@jamsocket/react'
import { SocketIOProvider } from '@jamsocket/socketio'
export default function HomeContainer({ spawnResult }: { spawnResult: SpawnResult }) {
return (
<SessionBackendProvider spawnResult={spawnResult}>
<SocketIOProvider url={spawnResult.url}>
<Home />
</SocketIOProvider>
</SessionBackendProvider>
)
}useSend lets you send events to the SocketIO server.
import { sendEvent } from '@jamsocket/socketio'
const sendEvent = useSend()
sendEvent('new-event', eventMessage)useEventListener lets you listen to events coming from the SocketIO server.
import { useEventListener } from '@jamsocket/socketio'
useEventListener<T>('event', (data: T) => {
// do something when a new event appears
})The @jamsocket/socketio package also re-exports all of the @jamsocket/client and @jamsocket/react packages' exports, including their React providers, hooks, classes, and types.