Skip to main content
Version: Current

Setup


Initialize Socket

The first step is to initialize the Socket. It manage the basic configuration for connection to the server and all the sub-systems. We start by determining the url of our server.

/src/server/socket.ts
import { Socket } from "@hyper-fetch/sockets";

export const socket = new Socket({ url: "ws://localhost:3000" });

Create Listener

Then, having already prepared connection setup for the server, we use the socket method to create Listeners and assign types to them.

type ChatMessageType = {
message: string;
};

export const onChatMessage = socketInstance.createListener<ChatMessageType>()({
name: "chat-message", // name of the event
});

Create Emitter

Then, having already prepared connection setup for the server, we use the socket method to create Emitter and assign types to them.

import { socketInstance } from "./socket";

type ChatMessageType = {
message: string;
};

// Optional
type AcknowledgementResponseType = {
value: string;
};

export const sendChatMessage = socketInstance.createEmitter<ChatMessageType, AcknowledgementResponseType>()({
name: "chat-message", // name of the event
});

You're ready to use Hyper Fetch Sockets! 🎊