TypeScript实战篇 - TS实战：模型层开发

目录

huatian-app 模型层开发

huantian-model/tsconfig.json

huantian-model/src/User.ts

huantian-model/src/Message.ts

huantian-model/src/UserChat.ts

huantian-model/src/ChatSession.ts

---

huatian-app 模型层开发

huantian-model/tsconfig.json

// 模型层没有什么依赖
// 先配置一下tsconfig.json
{
  "compilerOptions": {
    "lib": [
      "dom",
      "ESNext"
    ]
  },
  "include": [
    "src/**/*.ts"
  ]
}

huantian-model/src/User.ts

// 用户模型
import { UserChat } from "./UserChat"
// 模型是给vue，前端展示，服务端存储，api返回都依赖它。统一数据成员、类型。【统一前后端规则】
export class User {
  private id: number
  private _chat: UserChat
  public constructor(id: number) {
    this.id = id
    // 用户聊天传一下用户的信息，作为上下文
    this._chat = new UserChat(this)
  }
  public getId() { // 获取用户id
    return this.id
  }
  public chat() { // 获取用户聊天
    return this._chat
  }
  // 场景下做事情 如用户在【聊天场景】聊天
  // private _id: number
  // get id() {
  //   return this._id
  // }
}
// const user = new User(12)
// user.getId()
// user.id

huantian-model/src/Message.ts

// 聊天消息模型
export enum MessageStatus { // 枚举消息状态
  SENDING = 0,  // 发送中...
  SENT, // 发送
  RECEIVING, // 接收中...
  RECEIVED, // 对方收到未读
  READED, // 对方收到已读
  ERROR // 消息出错
}
export enum MessageType { // 枚举消息类型
  SEND = 0, // 'send' 发送类消息
  RECEIVED, // 接收类消息
  SYSTEM, // 系统提示类消息
  NOTIFY // 系统通知类消息
}
export type Message = TextMessage | ImageMessage
interface MessageData { // 定义消息接口数据
  id: number,
  status: MessageStatus,
  type: MessageType,
  from: number, // 消息来源：【发送】用户id
  to: number, // 接收消息：【接收】用户id
  // msg: string, // 文本消息
  // url: string // 图片消息
}
export interface TextMessage extends MessageData {
  msg: string
}
export interface ImageMessage extends MessageData {
  url: string
}

huantian-model/src/UserChat.ts

// 用户聊天模型
import { ChatSession } from "./ChatSession"
import { Message, MessageStatus, MessageType } from "./Message"
import { User } from "./User"
export class UserChat {
  // 用户
  private user: User
  // 消息
  private msgs: Array<Message> = []
  // 会话列表
  private sessions: Record<number, ChatSession> = {}
  constructor(user: User) { // 构造函数，初始化要传user
    this.user = user
  }
  public createChatSession(to: User) { // 与某用户发起会话
    if (this.sessions[to.getId()]) { // 有会话，拿缓存
      return this.sessions[to.getId()]
    }
    const session = new ChatSession(this.user, to) // 没会话，建一个
    this.sessions[to.getId()] = session // 缓存上
    return session
  }
  public send(msg: Message) { // 发送消息
    this.msgs.push(msg) // 记录一下我发的消息
    msg.status = MessageStatus.SENT // 改变消息状态-发送
    msg.type = MessageType.SEND // 发送消息类型
  }
  // 网络是模型的外设，模型需要自圆其说，忽略外设
  public receive(msg: Message) { // 接收消息
    this.msgs.push(msg) // 记录一下我收到的消息
    msg.status = MessageStatus.RECEIVING // 改变消息状态-待收中
    msg.type = MessageType.RECEIVED // 接收消息类型
  }
  public readTo(lastId: number) {// 读到了哪条消息，之前的接收到未读，都标为已读
    const unreads = this.msgs.filter(x => x.id <= lastId && x.status === MessageStatus.RECEIVED)
    unreads.forEach(msg => {
      msg.status = MessageStatus.READED
    })
  }
  public unReadMessage(lastId: number) { // 获取用户未读消息
    // Clienct id (客户端缓存最后一条消息)
    return this.msgs.filter(x => x.id > lastId)
  }
}

huantian-model/src/ChatSession.ts

// 聊天会话模型
import { Message } from "./Message";
import { User } from "./User";

export class ChatSession {
  private from: User
  private to: User
  public constructor(from: User, to: User) {
    this.from = from
    this.to = to
  }
  public chat(msg: Message) { // 会话中可以聊天
    this.from.chat().send(msg) // 用户发送一条消息
    this.to.chat().receive(msg) // 用户接收一条消息
  }
}