用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

微信小程序的socket.io即時通訊開發(基于E聊SDK)

Rolan 2020-6-15 00:44

1.背景:由于微信小程序需要開發輕量,跨平臺,開發時間短等特點,許多公司將小程序作為了業務展示的第一個APP。E聊客戶端核心SDK 通訊部分已適配了微信小程序平臺,下面分享一下適配過程中的思路與方法。2.分析:微 ...

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.參考:

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: E聊SDK 來自: segmentfault
  • longkun 2020-6-21 17:05
    專業微信小程序開發 app定制 歡迎各行老板來電 tel;13635483717同v
梦幻单人赚钱方法 江苏快3技巧稳赚方法 云南十一选五从一期开始 怎样买快乐8才能赢 浙江体彩20选5机选一注 今日排列三开机号 中国十大安全理财平台 青海11选五5开奖结果 吉林十一选五今天推荐 广西11选5购彩 集合竞价散户能成交吗