---
sidebar_position: 1
title: Socket Setup Guide
sidebar_label: Setup
---

# Setup

---

### Initialize Socket

The first step is to initialize the **[Socket](/documentation/03-sockets/socket.mdx)**. It manage the basic
configuration for connection to the server and all the sub-systems. We start by determining the `url` of our server.

```tsx title="/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](/documentation/03-sockets/listener.mdx)** and assign types to them.

```tsx
type ChatMessageType = {
  message: string;
};

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

### Create Emitter

Then, having already prepared connection setup for the server, we use the socket method to create
**[Emitter](/documentation/03-sockets/emitter.mdx)** and assign types to them.

```tsx
import { socketInstance } from "./socket";

type ChatMessageType = {
  message: string;
};

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

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

## You're ready to use Hyper Fetch Sockets! 🎊
