Ionic社交应用实战 #

社交应用功能
    │
    ├── 用户系统
    │   ├── 注册登录
    │   ├── 个人资料
    │   └── 关注粉丝
    │
    ├── 动态
    │   ├── 发布动态
    │   ├── 动态列表
    │   └── 点赞评论
    │
    ├── 消息
    │   ├── 聊天列表
    │   ├── 聊天详情
    │   └── 推送通知
    │
    └── 发现
        ├── 推荐
        ├── 搜索
        └── 话题

// models/user.model.ts
export interface User {
  id: string;
  username: string;
  nickname: string;
  avatar: string;
  bio: string;
  gender: 'male' | 'female' | 'other';
  birthday: Date;
  location: string;
  website: string;
  followersCount: number;
  followingCount: number;
  postsCount: number;
  isFollowing?: boolean;
}

export interface AuthTokens {
  accessToken: string;
  refreshToken: string;
  expiresIn: number;
}

// services/auth.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Router } from '@angular/router';
import { User, AuthTokens } from '../models/user.model';
import { ApiService } from './api.service';
import { StorageService } from './storage.service';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private currentUserSubject = new BehaviorSubject<User | null>(null);
  private tokensSubject = new BehaviorSubject<AuthTokens | null>(null);
  
  currentUser$ = this.currentUserSubject.asObservable();
  tokens$ = this.tokensSubject.asObservable();
  
  constructor(
    private api: ApiService,
    private storage: StorageService,
    private router: Router
  ) {
    this.loadTokens();
  }
  
  private async loadTokens() {
    const tokens = await this.storage.get<AuthTokens>('tokens');
    if (tokens) {
      this.tokensSubject.next(tokens);
      await this.loadCurrentUser();
    }
  }
  
  private async loadCurrentUser() {
    try {
      const user = await this.api.get<User>('/user/me').toPromise();
      this.currentUserSubject.next(user);
    } catch (error) {
      this.logout();
    }
  }
  
  async login(email: string, password: string): Promise<boolean> {
    try {
      const tokens = await this.api.post<AuthTokens>('/auth/login', { email, password }).toPromise();
      await this.storage.set('tokens', tokens);
      this.tokensSubject.next(tokens);
      await this.loadCurrentUser();
      return true;
    } catch (error) {
      return false;
    }
  }
  
  async register(data: { username: string; email: string; password: string }): Promise<boolean> {
    try {
      await this.api.post('/auth/register', data).toPromise();
      return await this.login(data.email, data.password);
    } catch (error) {
      return false;
    }
  }
  
  async logout() {
    await this.storage.remove('tokens');
    this.currentUserSubject.next(null);
    this.tokensSubject.next(null);
    this.router.navigate(['/auth/login']);
  }
  
  isLoggedIn(): boolean {
    return !!this.tokensSubject.value;
  }
  
  getCurrentUser(): User | null {
    return this.currentUserSubject.value;
  }
  
  getAccessToken(): string | null {
    return this.tokensSubject.value?.accessToken || null;
  }
}

// models/post.model.ts
export interface Post {
  id: string;
  author: User;
  content: string;
  images: string[];
  video?: string;
  likesCount: number;
  commentsCount: number;
  sharesCount: number;
  isLiked: boolean;
  tags: string[];
  location?: string;
  visibility: 'public' | 'friends' | 'private';
  createTime: Date;
}

export interface Comment {
  id: string;
  postId: string;
  author: User;
  content: string;
  replyTo?: User;
  likesCount: number;
  isLiked: boolean;
  createTime: Date;
}

// services/post.service.ts
import { Injectable } from '@angular/core';
import { ApiService } from './api.service';
import { Post, Comment } from '../models/post.model';

@Injectable({
  providedIn: 'root'
})
export class PostService {
  
  constructor(private api: ApiService) {}
  
  getPosts(params: { page: number; limit: number }): Observable<{ data: Post[]; total: number }> {
    return this.api.get('/posts', params);
  }
  
  getUserPosts(userId: string, params: { page: number; limit: number }): Observable<{ data: Post[] }> {
    return this.api.get(`/users/${userId}/posts`, params);
  }
  
  getPost(id: string): Observable<Post> {
    return this.api.get(`/posts/${id}`);
  }
  
  createPost(data: { content: string; images?: string[]; tags?: string[] }): Observable<Post> {
    return this.api.post('/posts', data);
  }
  
  deletePost(id: string): Observable<void> {
    return this.api.delete(`/posts/${id}`);
  }
  
  likePost(id: string): Observable<void> {
    return this.api.post(`/posts/${id}/like`, {});
  }
  
  unlikePost(id: string): Observable<void> {
    return this.api.delete(`/posts/${id}/like`);
  }
  
  getComments(postId: string, params: { page: number; limit: number }): Observable<{ data: Comment[] }> {
    return this.api.get(`/posts/${postId}/comments`, params);
  }
  
  createComment(postId: string, data: { content: string; replyTo?: string }): Observable<Comment> {
    return this.api.post(`/posts/${postId}/comments`, data);
  }
}

// models/message.model.ts
export interface Conversation {
  id: string;
  participants: User[];
  lastMessage: Message;
  unreadCount: number;
  updateTime: Date;
}

export interface Message {
  id: string;
  conversationId: string;
  sender: User;
  content: string;
  type: 'text' | 'image' | 'video' | 'file';
  status: 'sending' | 'sent' | 'delivered' | 'read';
  createTime: Date;
}

// services/chat.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { WebSocket } from 'ws';
import { Message, Conversation } from '../models/message.model';
import { ApiService } from './api.service';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  private socket: WebSocket | null = null;
  private messagesSubject = new BehaviorSubject<Message[]>([]);
  
  messages$ = this.messagesSubject.asObservable();
  
  constructor(
    private api: ApiService,
    private auth: AuthService
  ) {}
  
  connect() {
    const token = this.auth.getAccessToken();
    if (!token) return;
    
    this.socket = new WebSocket(`wss://api.example.com/ws?token=${token}`);
    
    this.socket.onmessage = (event) => {
      const message: Message = JSON.parse(event.data);
      this.messagesSubject.next([...this.messagesSubject.value, message]);
    };
    
    this.socket.onclose = () => {
      setTimeout(() => this.connect(), 5000);
    };
  }
  
  disconnect() {
    if (this.socket) {
      this.socket.close();
      this.socket = null;
    }
  }
  
  sendMessage(conversationId: string, content: string) {
    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
      this.socket.send(JSON.stringify({
        type: 'message',
        conversationId,
        content
      }));
    }
  }
  
  getConversations(): Observable<Conversation[]> {
    return this.api.get('/conversations');
  }
  
  getMessages(conversationId: string, params: { page: number; limit: number }): Observable<{ data: Message[] }> {
    return this.api.get(`/conversations/${conversationId}/messages`, params);
  }
  
  markAsRead(conversationId: string): Observable<void> {
    return this.api.post(`/conversations/${conversationId}/read`, {});
  }
}

// services/push.service.ts
import { Injectable } from '@angular/core';
import { PushNotifications, PushNotificationSchema } from '@capacitor/push-notifications';
import { Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class PushService {
  
  constructor(private router: Router) {}
  
  async init() {
    const result = await PushNotifications.requestPermissions();
    
    if (result.receive === 'granted') {
      await PushNotifications.register();
      this.listenEvents();
    }
  }
  
  private listenEvents() {
    PushNotifications.addListener('registration', (token) => {
      console.log('Push token:', token.value);
    });
    
    PushNotifications.addListener('pushNotificationReceived', (notification) => {
      console.log('Push received:', notification);
    });
    
    PushNotifications.addListener('pushNotificationActionPerformed', (action) => {
      const data = action.notification.data;
      
      switch (data.type) {
        case 'message':
          this.router.navigate(['/chat', data.conversationId]);
          break;
        case 'comment':
          this.router.navigate(['/post', data.postId]);
          break;
        case 'like':
          this.router.navigate(['/post', data.postId]);
          break;
        case 'follow':
          this.router.navigate(['/user', data.userId]);
          break;
      }
    });
  }
}