小程序集成环信IM怎么用?「附代码实例」

1. 环信IM简介

环信IM是通过API方式集成到APP或网站中,为用户提供实时即时通讯功能的一种方案。它主要提供文字、语音、图片、视频等多种通讯方式。同时,开发者可以使用环信IM私有云的方式搭建自己的IM系统,实现私有化部署。

环信IM可以方便地满足各类APP或网站的IM需求,减少开发量和维护成本,为用户提供优质的实时通讯体验。

2. 小程序集成环信IM步骤

2.1. 准备工作

在小程序中使用环信IM功能需要先在环信官网注册开发者账号,创建应用,同时创建对应的IM用户。

注册账户成功后,进入应用管理页面,可以查看创建的应用信息,包括应用ID及应用秘钥。这些信息在后面的集成代码中需要使用。

2.2. 安装环信IM SDK

将SDK包下载到本地,将其中的easemob-wechat-sdk.js文件引入到小程序中,同时将其中的hx-sdk.js文件上传到自己的服务器,用于小程序与环信IM服务器的交互。

/*引入easemob-wechat-sdk.js*/

const hxSDK = require('../path/to/hx-sdk.js');

2.3. 初始化环信IM SDK

初始化环信IM SDK后,才能正常使用其中的功能。简单的初始化代码如下:

hxSDK.init({

appkey: 'your appkey', /* Appkey,需要在环信官网申请*/

https: true, /* 是否启用https访问*/

isHttpDNS: false, /* 是否使用httpdns true/false*/

isSandBox: false, /* 是否为沙箱环境 true/false*/

});

需要注意的是,其中的Appkey需要用户自己去环信官网申请,并且填入这里。

2.4. 登录环信IM SDK

在初始化成功后,需要登录环信IM SDK,才能正常使用其中的用户、聊天室等功能。登录代码如下:

hxSDK.conn.open({

apiUrl: "https://api.easemob.com", /*此处换成自己的环信IM后台API地址*/

user: 'your username', /* 环信IM用户名*/

pwd: 'your password', /* 环信IM密码*/

});

其中的apiUrl需要根据用户在环信IM后台创建应用时修改成正确的地址。

2.5. 相关事件监听

在进行聊天或其他功能时,需要监听一些相关事件,以便及时处理结果及异常情况。例如:

hxSDK.conn.listen({

//连接成功时的回调函数

onOpened: function () {

console.log('登录成功!');

},

//接收到文本消息时的回调函数

onTextMessage: function (message) {

console.log(message);

},

//连接断开时的回调函数

onClosed: function () {

console.log('连接已关闭!');

},

//异常错误时的回调函数

onError: function (message) {

console.log(message);

}

})

3. 实现聊天功能

以上步骤完成后,即可实现聊天功能。这里简单举一个实现文本聊天的例子。

3.1. 发送文本消息

在输入框中输入聊天内容,点击“发送”按钮后,调用下面的代码进行发送:

hxSDK.conn.sendTextMessage({

to: 'username', /*接收方用户名*/

msg: 'your message', /*消息内容*/

type: 'chat', /*发送消息类型,chat为单聊文本消息*/

success: function () {

console.log('发送成功!');

},

error: function (message) {

console.log(message);

}

});

其中的to是接收方的用户名,msg是消息内容,success和error则是发送成功或失败时的回调函数。

3.2. 接收文本消息

当收到一条文本消息时,会触发onTextMessage事件,此时进行如下处理:

hxSDK.conn.listen({

//接收到文本消息时的回调函数

onTextMessage: function (message) {

console.log(message.from + ':' + message.data);

//将聊天记录添加到聊天窗口中

addChatLog(message.from, message.data);

},

})

接收到文本消息时,将其添加到聊天窗口中,并在页面上显示出来。

总结

本文主要介绍了小程序集成环信IM的步骤,并以简单的文本聊天为例,展示了如何在小程序中使用环信IM。通过本文的介绍与实践,相信读者已经有了一定的了解和掌握。