野火IM SDK

野火IM的Vue3版本SDK，用于在Vue3项目中快速集成野火IM的即时通讯功能。

安装

npm install wildfire-im-sdk --save
# 或者
yarn add wildfire-im-sdk

使用

基本用法

import { createApp } from 'vue';
import App from './App.vue';
import { init, connect } from 'wildfire-im-sdk';

// 初始化SDK
init();

// 连接IM服务器
connect('your-user-id', 'your-token');

// 创建Vue应用
createApp(App).mount('#app');

自定义配置

import { createApp } from 'vue';
import App from './App.vue';
import { init, connect, Config } from 'wildfire-im-sdk';

// 自定义配置
const customConfig = {
  APP_SERVER: 'https://your-im-server.com',
  DEFAULT_USER_ID: 'custom-user',
  DEFAULT_TOKEN: 'custom-token',
  AUTO_CONNECT: true
};

// 初始化SDK，传入自定义配置
init(customConfig);

// 创建Vue应用
createApp(App).mount('#app');

在组件中使用

<template>
  <div>
    <div>连接状态: {{ connectionStatusText }}</div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { wfc, EventType, ConnectionStatus, ConversationType, TextMessageContent } from 'wildfire-im-sdk';

// 状态变量
const connectionStatus = ref(wfc.getConnectionStatus());

// 计算属性
const connectionStatusText = computed(() => {
  switch (connectionStatus.value) {
    case ConnectionStatus.ConnectionStatusUnconnected:
      return '未连接';
    case ConnectionStatus.ConnectionStatusConnecting:
      return '连接中...';
    case ConnectionStatus.ConnectionStatusConnected:
      return '已连接';
    case ConnectionStatus.ConnectionStatusAuthenticated:
      return '已认证';
    default:
      return '未知状态';
  }
});

// 发送消息
const sendMessage = () => {
  // 创建会话
  const conversation = {
    type: ConversationType.Single,
    target: 'user123',
    line: 0
  };
  
  // 创建消息内容
  const content = new TextMessageContent('Hello, this is a test message!');
  
  // 发送消息
  wfc.sendMessage(conversation, content, [], 
    undefined, undefined, 
    (messageUid, timestamp) => {
      console.log('消息发送成功', messageUid, timestamp);
    }, 
    (error) => {
      console.error('消息发送失败', error);
    }
  );
};

// 生命周期
onMounted(() => {
  // 监听连接状态变化
  wfc.eventEmitter.on(EventType.ConnectionStatusChanged, (status) => {
    connectionStatus.value = status;
  });
});

onUnmounted(() => {
  // 移除监听器
  wfc.eventEmitter.off(EventType.ConnectionStatusChanged);
});
</script>

API 参考

初始化和连接

| 函数 | 描述 | | --- | --- | | init(config?) | 初始化SDK，可选传入自定义配置 | | connect(userId, token) | 连接到IM服务器 | | disconnect() | 断开连接 | | getConnectionStatus() | 获取当前连接状态 |

事件类型

可以通过 wfc.eventEmitter.on(EventType.xxx, callback) 来监听各种事件。

| 事件 | 描述 | | --- | --- | | EventType.ConnectionStatusChanged | 连接状态变化 | | EventType.ReceiveMessage | 接收到新消息 | | EventType.SendMessage | 发送消息 | | EventType.RecallMessage | 撤回消息 | | ... | 更多事件类型 |

会话类型

| 类型 | 值 | 描述 | | --- | --- | --- | | ConversationType.Single | 0 | 单聊 | | ConversationType.Group | 1 | 群聊 | | ConversationType.ChatRoom | 2 | 聊天室 | | ConversationType.Channel | 3 | 频道 |

开发

# 安装依赖
npm install

# 启动示例项目
npm run serve

# 构建SDK
npm run build:lib

许可证

MIT