前端集成环信IM

（本文用的是uniapp）

由于项目赶进度，而我们前端进度太慢，于是就被老板抓来当壮丁，就分享一下在当壮丁期间的前端集成环信IM吧。希望能对你有所启发。

有想了解服务器端集成环信IM的，可以看一下我之前的文章：Java服务端集成环信IM

一、下载SDK

下载SDK
点击上面的链接进入到下载页面：

我这里选择的是微信小程序的SDK。

下载下来后，解压目录如下：

进入src：

二、导入SDK

将这个sdk目录拷贝到项目里：

三、编写js

然后自己新建一个js：WebIMConfig.js。

import SDK from "sdk/connection.js";

const WebIM = SDK;

WebIM.conn = new WebIM.connection({
	isMultiLoginSessions: true, //是否可以登录多个网页，并在所有网页上接收消息
	https: true, //是否使用HTTPS 
	url: 'wss://im-api.easemob.com/ws/', //XMPP server
	apiUrl: 'https://a1.easemob.com',
	isAutoLogin: true, //自动登录
	heartBeatWait: 4500, //心跳间隔
	autoReconnectNumMax: 2, //自动重连次数
	autoReconnectInterval: 2, //每个重新连接之间的间隔秒, 自动重连次数大于1时有效。
});

const login = options => {
	WebIM.conn.open(options);
}

const logout = () => {
	WebIM.conn.close();
}

// 环信的监听
WebIM.conn.listen({
	onOpened: function(message) { //连接成功回调
		console.log(message);
		uni.setStorageSync("hxToken", message.accessToken);
		console.log(uni.getStorageSync("hxToken"));
		console.log("登录环信服务器")
	},

	onClosed: function(message) {
		console.log(message);
		console.log("退出环信服务器")
	},

	onTextMessage: function(message) {
		console.log(message);
		console.log("接收到的消息是：" + message.data);
	},

	onOnline: function() {
		console.log("本机网络连接成功");
	},

	onOffline: function() {
		console.log("本机网络掉线");
		uni.showToast({
			title: '您的网络有点不太良好哦',
			duration: 2000,
			icon: "none"
		})
	},

	onRoster: function(message) {
		console.log("添加成功了新的好友");
	}
});
module.exports = {
	conn: WebIM.conn,
	login: login,
	logout: logout,
	WebIM: WebIM
};
//export default config

这个js是自己创建的，名称可以自己定。

四、登录环信

在登录页面导入该js：

	import SDK from "../../WebIMConfig.js";

然后在登录方法里加上登录到环信的代码：

uni.request({
	url: this.baseUrl + '/login_login.action',
	method: 'get',
	success: (res) => {
		console.log(res);
		let data = res.data;
		uni.setStorage({
			key: 'userinfo',
			data: data,
			success() {
				console.log("本地存储密码成功");
			}
		});
		//登录环信服务器
		var userinfo = uni.getStorageSync("userinfo");
		console.log(data);
		var options = {
			apiUrl: 'https://a1.easemob.com',
			user: data.username,
			pwd: data.password,
			accessToken: uni.getStorageSync("hxToken"),
			appKey: '你在环信注册的应用的AppKey'
		}
		SDK.login(options);
		// 登陆成功，跳转主页
		uni.showToast({
			title: '登录成功',
			duration: 1000,
			icon: "success"
		})
		setTimeout(function() {
			uni.switchTab({
				url: "../home/home",
			});
		}, 1200)
	}
})

然后在登录成功，进行登录环信时，可能会报错：

如果报了这个错，只需要在 connection.js 里面的对应位置加一行代码：

import StropheAll from "./libs/strophe";
// 添加如下代码
let WebIM = {};

原因找了挺久，发现是WebIM 在 connection.js 里面确实是没有定义的，既然它没有定义，那么我们就帮它定义一个。

五、退出

先导入js，然后在退出方法里添加退出环信的代码：

quit: function() {
	uni.request({
		url: this.baseUrl + '/login_logout.action',
		method: 'GET',
		data: {},
		success: res => {
			if (res.data == "success") {
				uni.removeStorage({
					key: 'userinfo',
					success() {
						//退出环信服务器
						SDK.logout();
						
						console.log("数据清除成功");
						uni.removeStorageSync('groups');
						uni.showToast({
							title: '退出成功',
							duration: 1000,
							icon: "success"
						})
						setTimeout(function() {
							uni.navigateTo({
								url: '../login/login'
							})
						}, 1200)

					}
				})
			}
		},
		fail: () => {},
		complete: () => {}
	});
}

六、发送消息

然后在聊天页面，导入WebIMConfig.js，添加发送消息的方法：

send: function() {
	var that = this;
	var id = SDK.conn.getUniqueId(); // 生成本地消息id
	var msg = SDK.WebIM.message('txt', id); // 创建文本消息
	msg.set({
		msg: that .msg, // 消息内容
		to: that.friend.username, // 接收消息对象（环信的用户id）
		roomType: false,
		ext: {}, //扩展消息
		success: function(id, serverMsgId) {
			// 发送成功
			console.log('send private text Success');
		}, // 对成功的相关定义，sdk会将消息id登记到日志进行备份处理
		fail: function(e) {
			console.log("Send private text error");
			uni.showToast({
				title: '发送失败',
				duration: 1000,
				icon: 'none'
			})
		} // 对失败的相关定义，sdk会将消息id登记到日志进行备份处理
	});
	SDK.conn.send(msg.body);
},

在这时可能会报个错：

这个时候，只需在 connection.js 里面刚添加那行代码下面再添加几行代码：

import StropheAll from "./libs/strophe";
let WebIM = {};
// 再添加
WebIM.config = {
	isWindowSDK: false
}

原因的话，直接在这个 connection.js 里面搜索 isWindowSDK ，发现只有一个地方有：

  所以在 connection.js 里面也是没有进行定义的，而且从这个代码中可以发现，这个 isWindowSDK 应该是个布尔值，而且我们只是像实现发送消息，而如果这个 isWindowSDK 为true，那么执行的应该是WebIM.doQuery里面的代码，看这个也能大概的知道这是一个查询的方法，而并不是我们要的发送消息的代码；那么再看如果 isWindowSDK 为false，那么走的就是else if 里面的代码，开到那个try catch 里面的输出，这应该就是发送消息的，所以我就给 isWindowSDK 赋了个初始值为false。
（以上仅为了实现功能，并不能确保是正确的做法，毕竟本人不是专业的前端…）

  做到这里就基本ok了，像接收信息、消息已读等，在 WebIMConfig.js 里面的监听方法里面都有，这里就不一一列举了，详情可点击查看官方文档：基础功能

毕竟是被老板拉来凑数的，所以有些地方可能会有些差池，所以如果你有什么其它的见解，可以在下方评论区留言讨论哦~