如何使用 uni-app 快速集成聊天会话能力？_uniapp聊天功能

移动互联网时代，即时通讯（IM）功能是许多app不可或缺的一部分，然而在即时通讯app开发时，开发者常常面临着选择困难：是为每个平台单独开发应用，还是有限开发某个平台？uni-app的出现，为这一问题提供了一个高效答案。uni-app以其"一次编写，多端运行"的理念，为开发者带来了前所未有的便捷。

uni-app是基于Vue.js开发所有前端应用的框架，它支持通过一套代码来同时编译到iOS、Android、Web以及各种小程序平台。这种"一次编写，多端运行"的开发模式，不仅极大地提高了开发效率，也降低了维护成本。快速迭代和热更新功能更是让应用能够迅速响应市场和用户需求，保持竞争力。

本文将以网易云信 IM uni-app SDK为基础， 教大家如何在uni-app 项目中集成聊天会话能力。

一、项目准备

1. 注册网易云信开发者账号：首先，你需要在网易云信官网上注册一个开发者账号，并创建一个应用，获取App Key和Secret Key。

1. 安装uni-app开发环境：下载并安装HBuilderX，这是uni-app的官方开发工具。

1. 集成网易云信SDK：在uni-app项目中集成网易云信IM SDK。通常，这可以通过在项目中引入SDK的JavaScript文件来完成。

二、初始化SDK和登录认证

完成准备工作后，为了确保SDK能够正确、稳定地与网易云信的后端服务进行交互，我们需要进行初始化操作。

在这个过程中，SDK会进行一系列的准备工作，比如加载必要的资源、建立与服务器的连接、验证应用的身份等。只有SDK初始化成功，您的应用才能使用SDK提供的各种功能，比如发送和接收消息、管理用户会话等。

初始化步骤：

1. 在uni-app项目中引入网易云信IM SDK。
2. 初始化SDK，传入App Key。
3. 实现用户登录逻辑，获取accessToken。

代码示例：

import Nim from '@path/to/nim-sdk.js';
// 初始化SDK
Nim.init({
  appKey: 'YOUR_APP_KEY' // 替换为你的App Key
});
// 用户登录函数
async function login(accid, password) {
  try {
    // 调用SDK登录接口获取accessToken
    let loginResult = await Nim.login({
      accid: accid,
      password: password,
      rememberMe: true
    });
    
    // 存储accessToken到本地（这里使用uni-app的API）
    uni.setStorageSync('accessToken', loginResult.accessToken);
    
    console.log('登录成功', loginResult);
    // 成果：用户登录成功，accessToken已被存储，可以进行后续的IM操作
  } catch (error) {
    console.error('登录失败', error);
    // 处理登录失败的情况，例如提示用户重新输入账号密码或检查网络状态
  }
}
// 调用登录函数（这里只是示例，实际开发中你需要从用户输入或其他地方获取accid和password）
login('testUser', 'password123');
// 调用login函数后，将尝试使用提供的accid和password登录，并处理登录结果

三、好友管理

初始化完成后，我们需要完成实现即时通讯功能的基础动作，涉及到用户之间好友关系的建立、管理和查询。通过这些操作，用户可以方便地邀请其他用户加入自己的社交圈，管理自己的好友关系：

（1）添加好友：通过调用SDK的添加好友接口实现。

let accessToken = uni.getStorageSync('accessToken');
// 添加好友函数
async function addFriend(userId, friendId) {
  try {
    // 检查accessToken是否有效
    if (!accessToken) {
      console.error('accessToken无效或不存在');
      return;
    }
    // 调用SDK添加好友接口
    let result = await Nim.friend.add({
      fromAccid: userId, // 当前用户ID
      toAccid: friendId, // 目标用户ID
      msg: '添加你为好友', // 邀请消息
    }, accessToken);
    
    console.log('添加好友结果', result);
    // 成果：如果成功，result将包含添加好友操作的响应信息
  } catch (error) {
    console.error('添加好友失败', error);
    // 处理添加好友失败的情况，例如提示用户检查网络或重新尝试
  }
}
// 调用添加好友函数（这里只是示例，实际开发中你需要从用户输入或其他地方获取userId和friendId）
addFriend('currentUser', 'targetUser');
// 调用addFriend函数后，将尝试添加指定的friendId为好友，并处理结果

（2）删除好友：通过调用SDK的删除好友接口实现。

let accessToken = uni.getStorageSync('accessToken');
// 删除好友函数
async function deleteFriend(userId, friendId) {
  try {
    // 检查accessToken是否有效
    if (!accessToken) {
      console.error('accessToken无效或不存在');
      return;
    }
    // 调用SDK删除好友接口
    let result = await Nim.friend.delete({
      fromAccid: userId, // 当前用户ID
      toAccid: friendId, // 目标用户ID
    }, accessToken);
    
    console.log('删除好友结果', result);
    // 成果：如果成功，result将包含删除好友操作的响应信息
    // 根据返回结果更新本地好友列表（如果需要）
  } catch (error) {
    console.error('删除好友失败', error);
    // 处理删除好友失败的情况，例如提示用户检查网络或重新尝试
  }
}
// 调用删除好友函数（这里只是示例，实际开发中你需要从用户列表或其他地方获取userId和friendId）
deleteFriend('currentUser', 'targetUser');
// 调用deleteFriend函数后，将尝试删除指定的friendId为好友，并处理结果

（3）获取好友列表：通过调用SDK的获取好友列表接口实现。

let accessToken = uni.getStorageSync('accessToken');
// 获取好友列表函数
async function getFriendList(userId) {
  try {
    // 检查accessToken是否有效
    if (!accessToken) {
      console.error('accessToken无效或不存在');
      return;
    }
    // 调用SDK获取好友列表接口
    let result = await Nim.friend.getFriendList({
      accid: userId, // 当前用户ID
    }, accessToken);
    
    console.log('好友列表', result);
    // 成果：成功获取好友列表，result将包含好友信息
    // 根据返回结果更新本地好友列表（如果需要）
  } catch (error) {
    console.error('获取好友列表失败', error);
    // 处理获取好友列表失败的情况，例如提示用户检查网络或重新尝试
  }
}
// 调用获取好友列表函数（这里只需要当前用户ID）
getFriendList('currentUser');
// 调用getFriendList函数后，将尝试获取当前用户的好友列表，并处理结果

四、聊天功能

接下来，我们将实现最核心的聊天能力，涉及到发送消息、接收消息、显示消息等多个步骤。

1、发送文本消息：

// 发送文本消息函数
async function sendTextMessage(toAccid, content) {
  try {
    // 从本地存储中获取accessToken
    let accessToken = uni.getStorageSync('accessToken');
    
    // 检查accessToken是否有效
    if (!accessToken) {
      console.error('accessToken无效或不存在');
      return;
    }
    // 调用SDK发送文本消息接口
    let result = await Nim.message.sendText({
      toSessionType: Nim.SESSION_TYPE_SINGLE, // 会话类型：单人会话
      toAccid: toAccid, // 目标用户ID
      msgBody: {
        text: content // 消息内容
      }
    }, accessToken);
    
    console.log('发送文本消息结果', result);
    // 成果：如果成功，result将包含发送消息操作的响应信息
  } catch (error) {
    console.error('发送文本消息失败', error);
    // 处理发送文本消息失败的情况，例如提示用户检查网络或重新发送消息
  }
}
// 调用发送文本消息函数（这里只是示例，实际开发中你需要从用户输入或其他界面元素获取toAccid和content）
sendTextMessage('receiverAccid', 'Hello, this is a test message.');
// 调用sendTextMessage函数后，将尝试向指定用户发送文本消息，并处理结果

2. 接收消息

接收消息通常是通过监听SDK提供的事件来实现的，这里给出监听文本消息事件的示例：

// 监听文本消息事件
Nim.message.on(Nim.EVENT.NEW_MSG, function(msg) { 
 if (msg.sessionType === Nim.SESSION_TYPE_SINGLE && msg.msgType === Nim.MSG_TYPE_TEXT) {
     // 处理单人会话中的文本消息
     console.log('收到文本消息', msg.content.text);   
      // 根据需要更新UI显示消息内容  
      }
  });

3、 显示消息

// 假设你已经从接收消息的事件处理函数中获取了消息数据，并存储在某个变量中，如newMsg
 
// 渲染消息到UI的函数（这里以Vue.js的语法为例）
function renderMessage(newMsg) {
  // 创建消息元素（这里只是示例，具体实现取决于你的UI设计）
  let messageElement = `<div>${newMsg.sender} 说: ${newMsg.content}</div>`; // 假设newMsg包含sender和content属性
  
  // 将消息元素添加到页面中的某个容器中（如id为"chatWindow"的div元素）
  document.getElementById('chatWindow').innerHTML += messageElement;
}
 
// 在接收到新消息时调用渲染函数
// ...（在之前的监听文本消息事件的处理函数中

通过本文的介绍，我们详细讲解了如何在uni-app中使用网易云信IM SDK（注册可下载demo）构建实时通讯应用。从项目准备到好友管理，再到聊天功能和消息通知的实现，每个步骤都附带了代码示例和解释说明，希望能够帮助你更好地理解和掌握相关知识。