微信小程式的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.總結：

1. 微信小程式支援https, wss 兩種連接配接方式, E聊SDK能适配小程式平台;
2. E聊SDK 在設計之初已具有良好的跨平台支援。

5.參考：

微信小程式socket.io