微信小程序的socket.io即时通讯开发（基于E聊SDK）
原创微信小程序的socket.io即时通讯开发（基于E聊SDK）
原创
1.背景：
由于微信小程序需要开发轻量，跨平台，开发时间短等特点，许多公司将小程序作为了业务展示的第一个APP。E聊客户端核心SDK 通讯部分已适配了微信小程序平台，下面分享一下适配过程中的思路与方法。
2.分析：
微信小程序接入要求: 微信小程序主要支持https 与 wss 两种通讯方式，前者用于api 单次请求，后者用于长连接。上线前，必须在小程序后台配置页 配置服务器域名地址(要求备案，不能是IP地址)才能请求后端服务器，否则请求被拦截。
E聊通讯方式: E聊同时使用了http连接和socket.io 连接，前者用于常用的api请求(比如:添加好友，发送消息); 后者用于实时通讯(比如:接受实时消息，接受系统通知)。
结论: 在微信https 基础上实现api 请求; 在wss 基础上实现socket.io，实现实时通讯的功能。
2.开发接入：
2.1 新建一个"云开发demo", 在微信小程序开发者工具配置"不校验合法域名"
这样就可以在小程序中暂时绕过备案域名的检测，使用ip或自己的域名进行调试了。
2.2 下载E聊SDK 客户端核心代码，编译出小程序平台适用的echatim-sdk.js
git clone https://gitee.com/dzqmeiji/echatim-client-ts-core.git
cd echatim-client-ts-core
git checkout -b v1.01 v1.01 # checkout v1.01 版本
yarn install
yarn wxlib # 编译出echatim-sdk.js(若是windows平台:set platform=wx && webpack --mode=production --config ./build/webpack.lib.config.js)2.3 接入E聊核心SDK
在云开发demo miniprogram 目录下新建utils 目录, 将上一步生成的echatim-sdk.js 放进utils 目录里，最终如下:
在云开发demo miniprogram/page/index.js 文件下加入sdk配置相关代码, 并在onLoad中 初始化e聊sdk:
const app = getApp()
var sdk = require('../../utils/echatim-sdk.js');
function initEasyIMSDKWithConfig() {
const sdkConfig = {};
sdkConfig.host = 'api.echatim.cn';
sdkConfig.httpPort = 58082;
sdkConfig.socketPort = 59092;
sdkConfig.key = 'TSDKTEST00001';
sdkConfig.secret = '';
sdkConfig.apiTransport = 'HTTP';
sdkConfig.loginAuid = 'admin';
sdkConfig.loginToken = 'admin';
sdkConfig.fileServerConfig = {
use: 'local',
client: 'plupload',
baseUrl: 'http://api.echatim.cn:58082',
version: 'v1',
};
initEasyIMSDK(sdkConfig);
}
function initEasyIMSDK(sdkConfig) {
if (sdk.im === undefined) {
console.error("Not found echatim sdk, please import echatim-sdk.js first.");
return;
}
var im = sdk.im;
im.init(sdkConfig, function (sdk) {
if (sdk) {
console.log(sdk);
console.info('echatIMSDK 成功连接, 可以使用 sdk.apis 请求数据了.');
} else {
throw Error("echatIMSDK 初始化失败");
}
});
}
Page({
// ... 省略代码 ...
onLoad: function() {
console.log(sdk);
// 初始化E聊SDK
initEasyIMSDKWithConfig();
}
// ... 省略代码 ...
})重跑小程序项目, 见到终端输出"echatIMSDK 成功连接"的文字表示e聊sdk 已成功建立连接.
3.适配微信小程序的原理：
由于e聊sdk 要求跨平台支持Web, 微信小程序， ReactNative 等平台， 故需要将平台相关的代码抽出来单独处理，根据不同的平台编译出不同的sdk 代码。
具体请参考: E聊SDK在TypeScript下的条件编译
3.1 加入微信小程序平台的http访问连接.
在源码HttpApi.ts httpFetch中，加入微信小程序的支持部分。
private httpFetch(url:string, request:any):Promise<ApiResponse<V>>{
/*IFTRUE_WXAPP*/
// @ts-ignore
if(wx === undefined){
throw new Error('wx handle not exist');
}
return new Promise<ApiResponse<V>>(function (resolve, reject) {
// @ts-ignore
wx.request({
method: request.method,
url: url,
data: Beans.bean(request.body),
header: request.headers,
success (res) {
// console.log(res.data)
resolve(res.data);
},
fail(res){
// console.error(res.data)
reject(res.data);
}
});
});
/*FITRUE_WXAPP*/
// ... 省略代码 ...
}3.2 加入支持微信小程序平台的socket.io连接.
在源码Socket.ts connect中，加入微信小程序的支持部分。
/*IFTRUE_WXAPP*/
const wxio = require('weapp.socket.io');
this.socket = wxio.connect(url+"");
/*FITRUE_WXAPP*/这里使用了一个支持微信小程序的socket.io 开源插件: https://github.com/weapp-socketio/weapp.socket.io
3.3 加入支持微信小程序平台的文件上传功能(1.01版本暂未实现业务功能)
在源码FileServerClient.ts FileServerClientFactory中，加入微信小程序的支持部分(1.01版本暂未业务功能)。
/*IFTRUE_WXAPP*/
throw new Error(`not support wechat app platform`);
/*FITRUE_WXAPP*/4.总结：
- 微信小程序支持https, wss 两种连接方式, E聊SDK能适配小程序平台;
- E聊SDK 在设计之初已具有良好的跨平台支持。
5.参考：
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。