Build real-time features with WebSockets in Google Antigravity including notifications and live updates
# WebSocket Real-Time for Google Antigravity
WebSockets enable real-time bidirectional communication. This guide establishes patterns for real-time features in Google Antigravity projects.
## Server Setup
```typescript
import { Server } from "socket.io";
const io = new Server(httpServer, {
cors: { origin: process.env.NEXT_PUBLIC_APP_URL },
});
io.on("connection", (socket) => {
socket.on("join-room", (roomId: string) => {
socket.join(roomId);
});
socket.on("message", (data) => {
io.to(data.roomId).emit("message", {
id: socket.id,
message: data.message,
timestamp: new Date(),
});
});
});
```
## Client Hook
```typescript
"use client";
import { useEffect, useState } from "react";
import { io, Socket } from "socket.io-client";
export function useSocket(roomId: string) {
const [socket, setSocket] = useState<Socket | null>(null);
const [messages, setMessages] = useState<Message[]>([]);
useEffect(() => {
const newSocket = io(process.env.NEXT_PUBLIC_SOCKET_URL!);
newSocket.on("connect", () => newSocket.emit("join-room", roomId));
newSocket.on("message", (msg) => setMessages((prev) => [...prev, msg]));
setSocket(newSocket);
return () => { newSocket.disconnect(); };
}, [roomId]);
const sendMessage = (message: string) => {
socket?.emit("message", { roomId, message });
};
return { messages, sendMessage };
}
```
## Best Practices
1. **Reconnection**: Handle disconnection
2. **Rooms**: Use rooms for targeted broadcasts
3. **Authentication**: Verify connections
4. **Heartbeat**: Check connection health
5. **Scaling**: Use Redis adapterThis WebSocket prompt is ideal for developers working on:
By using this prompt, you can save hours of manual coding and ensure best practices are followed from the start. It's particularly valuable for teams looking to maintain consistency across their websocket implementations.
Yes! All prompts on Antigravity AI Directory are free to use for both personal and commercial projects. No attribution required, though it's always appreciated.
This prompt works excellently with Claude, ChatGPT, Cursor, GitHub Copilot, and other modern AI coding assistants. For best results, use models with large context windows.
You can modify the prompt by adding specific requirements, constraints, or preferences. For WebSocket projects, consider mentioning your framework version, coding style, and any specific libraries you're using.