前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序的socket.io即时通讯开发(基于E聊SDK)

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

原创
作者头像
E聊SDK
修改2020-06-15 10:54:23
1.7K0
修改2020-06-15 10:54:23
举报
文章被收录于专栏:用户4215420的专栏

1.背景:

由于微信小程序需要开发轻量,跨平台,开发时间短等特点,许多公司将小程序作为了业务展示的第一个APP。E聊客户端核心SDK 通讯部分已适配了微信小程序平台,下面分享一下适配过程中的思路与方法。

2.分析:

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

E聊通讯方式: E聊同时使用了http连接和socket.io 连接,前者用于常用的api请求(比如:添加好友,发送消息); 后者用于实时通讯(比如:接受实时消息,接受系统通知)。

结论: 在微信https 基础上实现api 请求; 在wss 基础上实现socket.io,实现实时通讯的功能。

2.开发接入:

2.1 新建一个"云开发demo", 在微信小程序开发者工具配置"不校验合法域名"
image.png
image.png

这样就可以在小程序中暂时绕过备案域名的检测,使用ip或自己的域名进行调试了。

2.2 下载E聊SDK 客户端核心代码,编译出小程序平台适用的echatim-sdk.js
代码语言:txt
复制
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 目录里,最终如下:

image.png
image.png

在云开发demo miniprogram/page/index.js 文件下加入sdk配置相关代码, 并在onLoad中 初始化e聊sdk:

代码语言:txt
复制
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 已成功建立连接.

image.png
image.png

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

由于e聊sdk 要求跨平台支持Web, 微信小程序, ReactNative 等平台, 故需要将平台相关的代码抽出来单独处理,根据不同的平台编译出不同的sdk 代码。

具体请参考: E聊SDK在TypeScript下的条件编译

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

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

代码语言:txt
复制
    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中,加入微信小程序的支持部分。

代码语言:txt
复制
            /*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版本暂未业务功能)。

代码语言:txt
复制
/*IFTRUE_WXAPP*/
            throw new Error(`not support wechat app platform`);
/*FITRUE_WXAPP*/

4.总结:

  1. 微信小程序支持https, wss 两种连接方式, E聊SDK能适配小程序平台;
  2. E聊SDK 在设计之初已具有良好的跨平台支持。

5.参考:

微信小程序socket.io

E聊SDK在TypeScript下的条件编译

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.背景:
  • 2.分析:
  • 2.开发接入:
    • 2.1 新建一个"云开发demo", 在微信小程序开发者工具配置"不校验合法域名"
      • 2.2 下载E聊SDK 客户端核心代码,编译出小程序平台适用的echatim-sdk.js
        • 2.3 接入E聊核心SDK
        • 3.适配微信小程序的原理:
          • 3.1 加入微信小程序平台的http访问连接.
            • 3.2 加入支持微信小程序平台的socket.io连接.
              • 3.3 加入支持微信小程序平台的文件上传功能(1.01版本暂未实现业务功能)
              • 4.总结:
              • 5.参考:
              相关产品与服务
              云开发 CloudBase
              云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档