File size: 4,125 Bytes
93e7af1 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 | // AI Assistant Tutorial Response
export const AI_TUTORIAL_MD = String.raw`
# Building a Modern Chat Application with SvelteKit
I'll help you create a **production-ready chat application** using SvelteKit, TypeScript, and WebSockets. This implementation includes real-time messaging, user authentication, and message persistence.
## 🚀 Quick Start
First, let's set up the project:
${'```'}bash
npm create svelte@latest chat-app
cd chat-app
npm install
npm install socket.io socket.io-client
npm install @prisma/client prisma
npm run dev
${'```'}
## 📁 Project Structure
${'```'}
chat-app/
├── src/
│ ├── routes/
│ │ ├── +layout.svelte
│ │ ├── +page.svelte
│ │ └── api/
│ │ └── socket/+server.ts
│ ├── lib/
│ │ ├── components/
│ │ │ ├── ChatMessage.svelte
│ │ │ └── ChatInput.svelte
│ │ └── stores/
│ │ └── chat.ts
│ └── app.html
├── prisma/
│ └── schema.prisma
└── package.json
${'```'}
## 💻 Implementation
### WebSocket Server
${'```'}typescript
// src/lib/server/socket.ts
import { Server } from 'socket.io';
import type { ViteDevServer } from 'vite';
export function initializeSocketIO(server: ViteDevServer) {
const io = new Server(server.httpServer || server, {
cors: {
origin: process.env.ORIGIN || 'http://localhost:5173',
credentials: true
}
});
io.on('connection', (socket) => {
console.log('User connected:', socket.id);
socket.on('message', async (data) => {
// Broadcast to all clients
io.emit('new-message', {
id: crypto.randomUUID(),
userId: socket.id,
content: data.content,
timestamp: new Date().toISOString()
});
});
socket.on('disconnect', () => {
console.log('User disconnected:', socket.id);
});
});
return io;
}
${'```'}
### Client Store
${'```'}typescript
// src/lib/stores/chat.ts
import { writable } from 'svelte/store';
import io from 'socket.io-client';
export interface Message {
id: string;
userId: string;
content: string;
timestamp: string;
}
function createChatStore() {
const { subscribe, update } = writable<Message[]>([]);
let socket: ReturnType<typeof io>;
return {
subscribe,
connect: () => {
socket = io('http://localhost:5173');
socket.on('new-message', (message: Message) => {
update(messages => [...messages, message]);
});
},
sendMessage: (content: string) => {
if (socket && content.trim()) {
socket.emit('message', { content });
}
}
};
}
export const chatStore = createChatStore();
${'```'}
## 🎯 Key Features
✅ **Real-time messaging** with WebSockets
✅ **Message persistence** using Prisma + PostgreSQL
✅ **Type-safe** with TypeScript
✅ **Responsive UI** for all devices
✅ **Auto-reconnection** on connection loss
## 📊 Performance Metrics
| Metric | Value |
|--------|-------|
| **Message Latency** | < 50ms |
| **Concurrent Users** | 10,000+ |
| **Messages/Second** | 5,000+ |
| **Uptime** | 99.9% |
## 🔧 Configuration
### Environment Variables
${'```'}env
DATABASE_URL="postgresql://user:password@localhost:5432/chat"
JWT_SECRET="your-secret-key"
REDIS_URL="redis://localhost:6379"
${'```'}
## 🚢 Deployment
Deploy to production using Docker:
${'```'}dockerfile
FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["node", "build"]
${'```'}
---
*Need help? Check the [documentation](https://kit.svelte.dev) or [open an issue](https://github.com/sveltejs/kit/issues)*
`;
|