微信小程序的socket.io即时通讯开发（基于E聊SDK）

2021-08-13 00:21:46

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.参考：

微信小程序socket.io
E聊SDK在TypeScript下的条件编译

码农公寓