vue-chat-kit 0.1.1

package/src/core/api.js

@@ -0,0 +1,189 @@
+/**
+ * API 服务层
+ */
+import { HttpClient } from './request.js'
+
+export class ChatApi {
+  constructor(config, httpClient = null) {
+    this.config = config
+    this.endpoints = config.api.endpoints
+    this.customAdapter = config.api.adapter
+    
+    if (httpClient) {
+      this.http = httpClient
+    } else {
+      this.http = new HttpClient({
+        baseUrl: config.api.baseUrl,
+        headers: config.headers
+      })
+    }
+  }
+
+  /**
+   * 使用自定义适配器或默认实现
+   */
+  async _call(methodName, ...args) {
+    if (this.customAdapter && typeof this.customAdapter[methodName] === 'function') {
+      return this.customAdapter[methodName](...args)
+    }
+    return this[`_${methodName}`](...args)
+  }
+
+  // ========== 好友相关 ==========
+  
+  /**
+   * 获取好友列表
+   */
+  async getFriends(currentUser) {
+    return this._call('getFriends', currentUser)
+  }
+
+  async _getFriends(currentUser) {
+    return this.http.get(this.endpoints.getFriends, { currentUser })
+  }
+
+  /**
+   * 获取可添加的用户列表
+   */
+  async getAvailableUsers(currentUser) {
+    return this._call('getAvailableUsers', currentUser)
+  }
+
+  async _getAvailableUsers(currentUser) {
+    return this.http.get(this.endpoints.getAvailableUsers, { currentUser })
+  }
+
+  /**
+   * 添加好友
+   */
+  async addFriend(currentUser, friendUser) {
+    return this._call('addFriend', currentUser, friendUser)
+  }
+
+  async _addFriend(currentUser, friendUser) {
+    return this.http.post(this.endpoints.addFriend, { currentUser, friendUser })
+  }
+
+  /**
+   * 获取好友申请列表
+   */
+  async getApplyList(currentUser) {
+    return this._call('getApplyList', currentUser)
+  }
+
+  async _getApplyList(currentUser) {
+    return this.http.get(this.endpoints.getApplyList, { currentUser })
+  }
+
+  /**
+   * 同意好友申请
+   */
+  async agreeFriend(applyUser, friendUser) {
+    return this._call('agreeFriend', applyUser, friendUser)
+  }
+
+  async _agreeFriend(applyUser, friendUser) {
+    return this.http.post(this.endpoints.agreeFriend, { applyUser, friendUser })
+  }
+
+  /**
+   * 设置好友聊天状态
+   */
+  async setChatStatus(currentUser, friendUser, status = 1) {
+    return this._call('setChatStatus', currentUser, friendUser, status)
+  }
+
+  async _setChatStatus(currentUser, friendUser, status) {
+    return this.http.post(this.endpoints.setChatStatus, null, { params: { currentUser, friendUser, status } })
+  }
+
+  // ========== 消息相关 ==========
+  
+  /**
+   * 获取聊天历史
+   */
+  async getHistory(fromUser, toUser) {
+    return this._call('getHistory', fromUser, toUser)
+  }
+
+  async _getHistory(fromUser, toUser) {
+    return this.http.get(this.endpoints.getHistory, { fromUser, toUser })
+  }
+
+  /**
+   * 标记消息已读
+   */
+  async setRead(currentUser, friendUser) {
+    return this._call('setRead', currentUser, friendUser)
+  }
+
+  async _setRead(currentUser, friendUser) {
+    return this.http.post(this.endpoints.setRead, { currentUser, friendUser })
+  }
+
+  // ========== 文件相关 ==========
+  
+  /**
+   * 上传文件
+   */
+  async uploadFile(file) {
+    return this._call('uploadFile', file)
+  }
+
+  async _uploadFile(file) {
+    const formData = new FormData()
+    formData.append('file', file)
+    return this.http.post(this.endpoints.uploadFile, formData)
+  }
+
+  // ========== 用户相关 ==========
+  
+  /**
+   * 获取用户信息
+   */
+  async getUserInfo(username) {
+    return this._call('getUserInfo', username)
+  }
+
+  async _getUserInfo(username) {
+    return this.http.get(this.endpoints.getUserInfo, { username })
+  }
+
+  /**
+   * 更新用户信息
+   */
+  async updateUserInfo(username, data) {
+    return this._call('updateUserInfo', username, data)
+  }
+
+  async _updateUserInfo(username, data) {
+    return this.http.put(this.endpoints.updateUserInfo, { username, ...data })
+  }
+
+  /**
+   * 获取用户头像
+   */
+  async getUserAvatar(username) {
+    return this._call('getUserAvatar', username)
+  }
+
+  async _getUserAvatar(username) {
+    return this.http.get(this.endpoints.getUserAvatar, { username })
+  }
+
+  /**
+   * 上传头像
+   */
+  async uploadAvatar(file, username) {
+    return this._call('uploadAvatar', file, username)
+  }
+
+  async _uploadAvatar(file, username) {
+    const formData = new FormData()
+    formData.append('file', file)
+    formData.append('username', username)
+    return this.http.post(this.endpoints.uploadAvatar, formData)
+  }
+}
+
+export default ChatApi

package/src/core/request.js

@@ -0,0 +1,174 @@
+/**
+ * HTTP 请求工具
+ */
+class RequestError extends Error {
+  constructor(message, status, code, data) {
+    super(message)
+    this.name = 'RequestError'
+    this.status = status || 0
+    this.code = code || 0
+    this.data = data
+  }
+}
+
+/**
+ * 请求类
+ */
+export class HttpClient {
+  constructor(config = {}) {
+    this.baseUrl = config.baseUrl || ''
+    this.timeout = config.timeout || 10000
+    this.headers = config.headers || {}
+    this.requestInterceptors = []
+    this.responseInterceptors = []
+    
+    // 默认添加 Content-Type
+    this.addRequestInterceptor((config) => {
+      if (!(config.body instanceof FormData)) {
+        config.headers = {
+          'Content-Type': 'application/json',
+          ...config.headers
+        }
+      }
+      return config
+    })
+  }
+
+  /**
+   * 添加请求拦截器
+   */
+  addRequestInterceptor(interceptor) {
+    this.requestInterceptors.push(interceptor)
+  }
+
+  /**
+   * 添加响应拦截器
+   */
+  addResponseInterceptor(interceptor) {
+    this.responseInterceptors.push(interceptor)
+  }
+
+  /**
+   * 超时控制
+   */
+  timeoutPromise(timeout) {
+    return new Promise((_, reject) => {
+      setTimeout(() => {
+        reject(new RequestError('请求超时', 408, 408))
+      }, timeout)
+    })
+  }
+
+  /**
+   * 核心请求方法
+   */
+  async request(url, options = {}) {
+    const { method = 'GET', headers = {}, body, params } = options
+    
+    // 构建完整URL
+    let fullUrl = url.startsWith('http') ? url : `${this.baseUrl}${url}`
+    
+    // 应用请求拦截器
+    let finalConfig = { 
+      method, 
+      headers: { ...this.headers, ...headers }, 
+      body,
+      params
+    }
+    
+    this.requestInterceptors.forEach((interceptor) => {
+      finalConfig = interceptor(finalConfig)
+    })
+
+    // 构建fetch配置
+    const fetchConfig = {
+      method: finalConfig.method,
+      headers: finalConfig.headers,
+      credentials: 'include'
+    }
+
+    // 处理请求体
+    if (finalConfig.body && method !== 'GET') {
+      if (finalConfig.body instanceof FormData) {
+        fetchConfig.body = finalConfig.body
+      } else if (typeof finalConfig.body === 'object') {
+        fetchConfig.body = JSON.stringify(finalConfig.body)
+      } else {
+        fetchConfig.body = finalConfig.body
+      }
+    }
+
+    // 处理GET参数
+    if (finalConfig.params) {
+      const queryParams = new URLSearchParams()
+      for (const key in finalConfig.params) {
+        if (finalConfig.params[key] !== undefined && finalConfig.params[key] !== null && finalConfig.params[key] !== '') {
+          queryParams.append(key, finalConfig.params[key])
+        }
+      }
+      const queryString = queryParams.toString()
+      if (queryString) {
+        fullUrl += (fullUrl.includes('?') ? '&' : '?') + queryString
+      }
+    }
+
+    try {
+      const response = await Promise.race([
+        fetch(fullUrl, fetchConfig),
+        this.timeoutPromise(this.timeout)
+      ])
+
+      // 应用响应拦截器
+      let finalResponse = response
+      this.responseInterceptors.forEach((interceptor) => {
+        finalResponse = interceptor(finalResponse)
+      })
+
+      if (!finalResponse.ok) {
+        throw new RequestError(
+          `HTTP ${finalResponse.status}: ${finalResponse.statusText}`,
+          finalResponse.status,
+          finalResponse.status
+        )
+      }
+
+      // 解析响应
+      const contentType = finalResponse.headers.get('content-type')
+      let data
+      if (contentType && contentType.includes('application/json')) {
+        data = await finalResponse.json()
+      } else {
+        data = await finalResponse.text()
+      }
+
+      return data
+    } catch (error) {
+      if (error instanceof RequestError) {
+        throw error
+      }
+      throw new RequestError(
+        error instanceof Error ? error.message : '网络错误',
+        0, 0
+      )
+    }
+  }
+
+  // 便捷方法
+  get(url, params, config) {
+    return this.request(url, { ...config, method: 'GET', params })
+  }
+
+  post(url, data, config) {
+    return this.request(url, { ...config, method: 'POST', body: data })
+  }
+
+  put(url, data, config) {
+    return this.request(url, { ...config, method: 'PUT', body: data })
+  }
+
+  delete(url, config) {
+    return this.request(url, { ...config, method: 'DELETE' })
+  }
+}
+
+export default HttpClient

package/src/core/websocket.js

@@ -0,0 +1,159 @@
+/**
+ * WebSocket 通信核心模块
+ */
+export class ChatWebSocket {
+  constructor(userId, options = {}) {
+    this.userId = userId
+    this.wsUrl = options.wsUrl || ''
+    this.socket = null
+    this.reconnectAttempts = 0
+    this.maxReconnectAttempts = options.maxReconnectAttempts || 5
+    this.reconnectDelay = options.reconnectDelay || 3000
+    this.handlers = {
+      message: [],
+      open: [],
+      close: [],
+      error: []
+    }
+    this.isConnecting = false
+    this.manualClose = false
+  }
+
+  /**
+   * 连接 WebSocket
+   */
+  connect() {
+    if (this.isConnecting || this.isConnected()) return
+    
+    this.isConnecting = true
+    this.manualClose = false
+    
+    try {
+      this.socket = new WebSocket(this.wsUrl)
+
+      this.socket.onopen = () => {
+        console.log('[VueChatKit] WebSocket 连接成功')
+        this.isConnecting = false
+        this.reconnectAttempts = 0
+        this.emit('open')
+      }
+
+      this.socket.onmessage = (event) => {
+        try {
+          const data = event.data
+          this.emit('message', data)
+        } catch (e) {
+          console.error('[VueChatKit] WebSocket 消息解析失败', e)
+        }
+      }
+
+      this.socket.onclose = (event) => {
+        console.log('[VueChatKit] WebSocket 连接关闭', event.code)
+        this.isConnecting = false
+        this.emit('close', event)
+        
+        if (!this.manualClose && event.code !== 1000) {
+          this.reconnect()
+        }
+      }
+
+      this.socket.onerror = (error) => {
+        console.error('[VueChatKit] WebSocket 连接错误', error)
+        this.isConnecting = false
+        this.emit('error', error)
+      }
+    } catch (error) {
+      console.error('[VueChatKit] WebSocket 创建连接失败', error)
+      this.isConnecting = false
+    }
+  }
+
+  /**
+   * 发送消息
+   */
+  send(to, message, type = 'text', fileUrl = '', fileName = '', fileSize = 0) {
+    if (this.isConnected()) {
+      const data = JSON.stringify({ 
+        to, 
+        msg: message,
+        type,
+        fileUrl,
+        fileName,
+        fileSize
+      })
+      this.socket.send(data)
+      return true
+    }
+    console.warn('[VueChatKit] WebSocket 连接未建立，无法发送消息')
+    return false
+  }
+
+  /**
+   * 注册事件监听
+   */
+  on(event, handler) {
+    if (this.handlers[event]) {
+      this.handlers[event].push(handler)
+    }
+  }
+
+  /**
+   * 移除事件监听
+   */
+  off(event, handler) {
+    if (this.handlers[event]) {
+      const index = this.handlers[event].indexOf(handler)
+      if (index > -1) {
+        this.handlers[event].splice(index, 1)
+      }
+    }
+  }
+
+  /**
+   * 触发事件
+   */
+  emit(event, ...args) {
+    if (this.handlers[event]) {
+      this.handlers[event].forEach(fn => fn(...args))
+    }
+  }
+
+  /**
+   * 重连
+   */
+  reconnect() {
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++
+      console.log(`[VueChatKit] 尝试重连 (${this.reconnectAttempts}/${this.maxReconnectAttempts})...`)
+      setTimeout(() => this.connect(), this.reconnectDelay)
+    } else {
+      console.error('[VueChatKit] 重连次数已达上限')
+    }
+  }
+
+  /**
+   * 关闭连接
+   */
+  close() {
+    this.manualClose = true
+    if (this.socket) {
+      this.socket.close()
+      this.socket = null
+      this.handlers = {
+        message: [],
+        open: [],
+        close: [],
+        error: []
+      }
+    }
+  }
+
+  /**
+   * 检查连接状态
+   */
+  isConnected() {
+    return this.socket && this.socket.readyState === WebSocket.OPEN
+  }
+}
+
+export default ChatWebSocket

package/src/index.js

@@ -0,0 +1,27 @@
+// 导出组件
+export { default as ChatWindow } from './components/ChatWindow.vue'
+export { default as AvatarCrop } from './components/AvatarCrop.vue'
+
+// 导出 composables
+export { useChat } from './composables/useChat.js'
+
+// 导出配置
+export { createChatConfig } from './config/index.js'
+
+// 导出核心模块
+export { ChatWebSocket } from './core/websocket.js'
+export { ChatApi } from './core/api.js'
+export { HttpClient } from './core/request.js'
+
+// 导出类型（如果使用 TypeScript 的话）
+// export * from './types/index.d.ts'
+
+// 安装函数，用于 Vue 插件安装
+export const VueChatKit = {
+  install(app) {
+    app.component('ChatWindow', ChatWindow)
+    app.component('AvatarCrop', AvatarCrop)
+  }
+}
+
+export default VueChatKit