uniapp IM及时通讯

准备

1. 开通uniCloud云空间
2. 开通uni-push2.0

插件部署

https://ext.dcloud.net.cn/plugin?name=uni-im

1、登录uniapp开发账号，访问插件地址，点击“下载插件并导入HBuilderX”

2、选择之前准备的云空间，注意查看云空间是“阿里云”还是“腾讯云”

3、合并pages，点击“注册”

4、等待插件安装，成功后会有日志打印

5、部署到uniCloud，云服务空间初始化

对项目根目录uniCloud点右键，选择“云服务空间初始化向导” 按提示部署项目（注意：选择绑定的服务空间，须在uni-push2.0的web控制台 关联）

代码开发

1、打开项目根目录的App.vue文件，初始化uni-id-pages和uniIm模块

<script>
	//1. 导入统一身份信息管理模块
	import uniIdPagesInit from '@/uni_modules/uni-id-pages/init.js';
	//2. 导入uniIm的Utils工具类
	import uniImUtils from '@/uni_modules/uni-im/common/utils.js';
	export default {
		onLaunch: async function() {
			console.log('App Launch');
			//3. 初始化uni身份信息管理模块
			uniIdPagesInit();
			//4. 初始化uniIm
			uniImUtils.init();
		},
		onShow: function() {
			console.log('App Show');
		},
		onHide: function() {
			console.log('App Hide');
		}
	};
</script>

2、登录uni-im

标准化登录

uni-im的服务端代码托管在uniCloud下，账户体系是uni-id 4.0+ 的； uni-app生态下绝大部分项目的架构与uni-im相同，所以不需要考虑账号打通问题，用户登录项目后，不需要额外登录uni-im。

外部系统联登

目前系统已有一套账号体系，通过uni-id的外部系统联登，同步账号数据到uni-im用户体系并获得uni-id的token，客户端再调用uniImUtils的login方法登录uni-im。

uni-id外部系统联登

1、接口URL化

登录uniCloud空间，打开“云函数/云对象”->“函数/对象列表”，选择“uni-id-co”最右侧“详情”，点进去

找到“云函数URL化”，点击编辑，添加path（如：/uni-id-co）

2、api 注册用户

接口地址

POST /your-uni-id-co-path/externalRegister

Request Body 说明

Response Body 说明

php端代码：仅部分参考，响应 https://www.example.com/login

var $uniid_url = 'https://xxx.next.bspapp.com/uni-id-co';

$$externalUid = '网站上生成的，注意不能为纯数字';

$requestAuthSecret = "testSecret";
$nonce = sprintf("%d", rand());
$timestamp = time() * 1000;

$params = [
'externalUid' => $externalUid,
];

$sign = new \addons\ymmUni\classes\Sign($requestAuthSecret);
$signature = $sign->getSignature($params, $nonce, $timestamp);

$url = $this->uniid_url . '/externalLogin';
// 构建请求头
$headers = [
'uni-id-nonce:'. $nonce,
'uni-id-timestamp:'. $timestamp,
'uni-id-signature:'. $signature,
'Content-Type: application/json',
'Cache-Control: no-cache',
];

$clientInfo = htmlspecialchars_decode($clientInfo);
$clientInfo = json_decode($clientInfo, true);
$post = [
'clientInfo' => $clientInfo,
'uniIdToken' => 0,
'params' => $params,
];
$post = json_encode($post);
$result = $sign->httpPost($url, $post, $headers);
$result = json_decode($result, true);

这里需要将$result 里的内容返回给uniapp

uniapp端代码：

import uniImUtils from '@/uni_modules/uni-im/common/utils.js';

uni.request({
	url: 'https://www.example.com/login',
	data: {
		username: 'test',
		password: '123456'
	},
	success:async (res) => {
		console.log(res.data); 
		// 得到你自己项目的token和uni-id的token
		let {token,uniIdToken} = res.data

                // 平台需要的令牌
		uni.setStorageSync('token',token)
		// 【请注意】这里的`uniIdToken` 是一个`对象`：包含：`token`和`tokenExpired`
		await uniImUtils.login(uniIdToken)
	}
});

end.