微信小程序的Socket.io即时通讯开发(基于Echat SDK)

  备案注销     |      2023-09-25
微信小程序的Socket.io即时通讯开发(基于Echat SDK)

1.背景:

由于微信小程序需要轻量级、跨平台、开发时间短的特点,很多企业将小程序作为业务展示的第一个APP。电子聊天客户端核心SDK通讯部分已适配微信小程序平台。下面我来分享一下适配过程中的思路和方法。

2.分析:

微信小程序接入要求:微信小程序主要支持https和wss两种通讯方式。前者用于单个API请求,后者用于长期连接。上线前,必须在小程序后台配置页 配置服务器域名地址(要求备案,不能是IP地址)才能请求后端服务器,否则请求被拦截

E聊通讯方式:Echat同时使用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.gitcd echatim-client-ts-coregit checkout -b v1.01 v1.01 # 检出v1.01 版本yarn installyarn wxlib # 编译echatim - sdk.js(windows平台:set platform=wx webpack --mode=product --config ./build/webpack.lib.config.js) 复制:

2.3 接入E聊核心SDK

在云开发demo小程序目录下新建utils目录,将上一步生成的echatim-sdk.js放入utils目录下,最终结果如下:

在云开发demo小程序/page/index.js文件下添加sdk配置相关代码,并在onLoad中初始化电聊sdk:

const app=getApp() var sdk=require('././utils/echatim-sdk.js');函数initEasyIMSDKWithConfig() { const sdkConfig={}; sdkConfig.host='api.echatim.cn' ; sdkConfig.httpPort=58082; sdkConfig.socketPort=59092; sdkConfig.key='TSDKTEST00001'; sdkConfig.secret=''; sdkConfig.apiTransport='HTTP'; ig.loginToken='管理员'; 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('未找到echatim sdk,请先导入echatim-sdk.js。');返回; } 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); //初始化电聊SDK initEasyIMSDKWithConfig() ; }//.省略代码.})复制并重新运行小程序工程,看到终端输出'echatIMSDK成功连接',说明echat sdk已成功建立连接。

3.适配微信小程序的原理:

由于电聊sdk需要跨平台支持Web、微信小程序、ReactNative等平台,因此需要将平台相关代码提取出来单独处理,根据不同平台编译不同的sdk代码。

详情请参考:TypeScript下Echat SDK的条件编译

3.1 加入微信小程序平台的http访问连接.

在源码HttpApi.ts httpFetch中,添加微信小程序的支持部分。

private httpFetch(url:string, request:any):PromiseApiResponseV{ /*IFTRUE_WXAPP*///@ts-ignore if(wx===undefined){ throw new Error('wx 句柄不存在'); } return new PromiseApiResponseV (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); }, failed(res){ //console.error(res.data)拒绝(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(`不支持微信小程序平台`);/*FITRUE_WXAPP*/Copy:

4.总结:

微信小程序支持https和wss连接方式,Echat SDK可适配小程序平台;电聊SDK在设计之初就具有良好的跨平台支持。

5.参考:

微信小程序socket.io

TypeScript下Echat SDK的条件编译