This project is a React hook that facilitates connections to a Centrifuge server using websockets.
Under the hood uses a fork of centrifuge-js
To use the useWebsocket
hook in your React project, follow these steps:
-
Import the Hook: Depending on your module system, import the hook as shown below:
-
For CommonJS:
const useWebsocket = require('lanetalk-websocket');
-
For ES Modules:
import useWebsocket from 'lanetalk-websocket';
-
-
Initialize the Hook: You can initialize the hook by passing the required parameters. Here is an example of how to use it in a functional component:
function MyComponent() { const { isConnected, lastMessage } = useWebsocket({ url: 'wss://your-websocket-url', apiKey: 'your-api-key', channel: 'your-channel-id', debug: true, }); return ( <div> <p>Connection Status: {isConnected ? 'Connected' : 'Disconnected'}</p> <p>Last Message: {JSON.stringify(lastMessage)}</p> </div> ); }
In this example:
-
url
: WebSocket server URL. -
apiKey
: API key for authentication. -
channel
: The channel you want to subscribe to. -
debug
: Enable debug mode for additional logging. This includes more verbose information about connection status changes and message publications.
-
-
Using the Hook Data: The hook returns an object containing:
-
isConnected
: A boolean indicating the connection status. -
lastMessage
: The last message received from the subscribed channel.
You can use these values in your component to display connection status or messages as needed.
-
Here a couple of events you can subscribe on by passinf a ref to get the created instance.
- First pass a ref prop to get the instance
const { isConnected, lastMessage } = useWebsocket({
url: 'wss://your-websocket-url',
apiKey: 'your-api-key',
channel: 'your-channel-id',
ref: instanceRef
});
const { connection, subscription } = instanceRef;
centrifuge.on('connecting', function (ctx) {
console.log(`connecting: ${ctx.code}, ${ctx.reason}`);
}).on('connected', function (ctx) {
console.log(`connected over ${ctx.transport}`);
}).on('disconnected', function (ctx) {
console.log(`disconnected: ${ctx.code}, ${ctx.reason}`);
});
sub.on('publication', function (ctx) {
console.log(ctx);
}).on('subscribing', function (ctx) {
console.log(`subscribing: ${ctx.code}, ${ctx.reason}`);
}).on('subscribed', function (ctx) {
console.log('subscribed', ctx);
}).on('unsubscribed', function (ctx) {
console.log(`unsubscribed: ${ctx.code}, ${ctx.reason}`);
})