前置技能

  • Node.js 环境已搭建。

  • npm 包管理工具的基本使用。

  • Vue2 或者 Vue3 框架基本掌握或使用。

学习目标

  • 项目中集成 IM 即时通讯实战

  • 利用环信 IM Web SDK 快速实现在 Vue.js 中发送出一条 Hello World!

一、了解环信 IM

  1. 什么是环信 IM？

    环信即时通讯为开发者提供高可靠、低时延、高并发、安全、全球化的通信云服务，支持单聊、群聊、聊天室。提供多平台 SDK 支持，包括：Android、iOS、Web；同时，提供 EaseIM 和 EaseIMKit 以及服务端 REST API，帮助开发者快速构建端到端通信的场景。

  2. 学习完环信 WebIM 之后可以干嘛？

    可以在任意 Web 应用中极速集成搭建即时通讯功能，无论是自己搭建 IM 应用，还是实现产品需求均可以灵活集成进入到自己的项目之中。

二、环信 WebIM 实现通讯的基本流程

前置准备

  1. 有效的开发者 AppKey。 （ 注册环信）（注册参考文档）

  2. 使用 Vue-cli 创建一个空白项目，或已经具备已有待集成项目(此篇文章以 Vue3 为示例，Vue2 同样可以参考此文章)。

  3. 在项目中使用 npm 或者 yarn 安装环信 WebSDK 包，easemob-websdk。

  4. 下载环信官方 Vue3-Demo

我们开始

初期配置

在确保已进行 npm install easemob-websdk 安装了环信 SDK 包，并已经下载了 Vue3 官方 Demo，将项目中的 IM 文件拖入自己的项目中。

此文件共两个功能：

  • 引入环信 WebIM-SDK

  • 将引入的 SDK 进行实例化

在这里插入图片描述

将DEFAULT_APPKEY修改为自己已注册的 Appkey。

配置监听


创建测试 ID

在这里插入图片描述

登录环信

这一步是所有后续操作的第一步


紧接着是开始聊天部分。

好友关系

完成这个功能 需要将该项目开启两个页面，一个申请，一个接收，这样才能看到效果

两种方式：手动关联一个好友，第二种再创建一个测试 ID 之后，调用 SDK 添加好友。

方式一：测试时最简单的方式，手动关联好友

  1. 在管理后台中手动再创建一个 ID
    image.png

2.并手动将新创建的 ID 关联为好友。
在这里插入图片描述

方式二：开发时调用 SDK 接口添加好友

//申请添加好友
const applyAddFriends = () => {
  EaseChatClient.addContact(targetId, '我想加你为好友！');
};
//接收方登录将会触发
EaseChatClient.addEventHandler('friendListen', {
  // 收到好友邀请触发此方法。
  onContactInvited: (data) => {
    //同意申请
    EaseChatClient.acceptContactInvite(data.from);
    //拒绝申请
    EaseChatClient.declineContactInvite(data.from);
  },
});

进入页面获取好友列表并自行渲染。

收发消息

完成这个功能 需要将该项目开启两个页面，一个发送，一个接收，这样才能看到效果

发送方发送一条文本消息：

接收方接收消息

/* message 相关监听 */
EaseChatClient.addEventHandler('messageListen', {
  onTextMessage: function (message) {
    console.log('>>>>收到文本消息');
    pushNewMessage(message); //在缓存中Push一条新消息。
  }, // 收到文本消息。
});

缓存的消息结构示例

messageList:{
    //以好友的ID为KEY，如果获取则直接messageList[friendId]取到对应的消息。
    friendId:[
       {
        chatType:"singleChat", //聊天类型 单聊或者群聊
        ext:{}, //消息扩展
        from:friendId, //消息来源ID
        id:"1111864344594875684", //消息的唯一ID
        msg:"Hello World!",//消息内容
        time:1676440891009,//消息发送时间
        to:myId,//发送目标ID
        type:"txt" //消息来源
       },
       {
        chatType:"singleChat",
        ext:{},
        from:friendId,
        id:"1111864344594875684",
        msg:"Hello World2!",
        time:1676440891009,
        to:myId,
        type:"txt"
       }
    ],
    friendId2:[
       {
        chatType:"singleChat",
        ext:{},
        from:friendId,
        id:"1111864344594875684",
        msg:"Hello World!",
        time:1676440891009,
        to:myId,
        type:"txt"
       },
    ]
}

渲染消息列表


了解即时通讯IM及应用场景请访问：环信官网
更多集成IM教程请访问：IMGeek社区