uni-app訊息推送方案

silianpan發表於2019-11-05
APP

一、引言

uni-app是支援訊息推送的，參考如下文件：

UniPush介紹

UniPush使用指南

UniPush開通指南

如何自定義推送通知的圖示？

在 uni-app 中使用 UniPush

二、效果

開源專案uniapp-admin

uni-app訊息推送方案

三、需求

不同角色的使用者登陸App，收到不同的待辦提醒。即誰處理這個待辦任務，誰會收到這個提醒。對不同角色的使用者推送待辦訊息

四、方案步驟

4.1 檢視個推文件

因為uni-app的推送是整合了個推，所以檢視個推文件接入方案

因為後臺是java語言，所以檢視java整合指南

  • 下載服務端SDK開發工具包，下載地址為：www.getui.com/download/do…

  • 匯入"GETUI_SERVER_SDK\資原始檔”目錄下的所有jar包

# uni-push
mvn install:install-file -Dfile="gexin-rp-fastjson-1.0.0.3.jar" -DgroupId=com.gexin.platform -DartifactId=gexin-rp-fastjson -Dversion=1.0.0.3 -Dpackaging=jar
mvn install:install-file -Dfile="gexin-rp-sdk-base-4.0.0.30.jar" -DgroupId=com.gexin.platform -DartifactId=gexin-rp-sdk-base -Dversion=4.0.0.30 -Dpackaging=jar
mvn install:install-file -Dfile="gexin-rp-sdk-http-4.1.0.5.jar" -DgroupId=com.gexin.platform -DartifactId=gexin-rp-sdk-http -Dversion=4.1.0.5 -Dpackaging=jar
mvn install:install-file -Dfile="gexin-rp-sdk-template-4.0.0.24.jar" -DgroupId=com.gexin.platform -DartifactId=gexin-rp-sdk-template -Dversion=4.0.0.24 -Dpackaging=jar
mvn install:install-file -Dfile="protobuf-java-2.5.0.jar" -DgroupId=com.google.protobuf -DartifactId=protobuf-java -Dversion=2.5.0 -Dpackaging=jar
複製程式碼
<!-- uni push -->
<dependency>
    <groupId>com.gexin.platform</groupId>
    <artifactId>gexin-rp-sdk-base</artifactId>
    <version>4.0.0.30</version>
</dependency>
<dependency>
    <groupId>com.gexin.platform</groupId>
    <artifactId>gexin-rp-sdk-template</artifactId>
    <version>4.0.0.24</version>
</dependency>
<dependency>
    <groupId>com.gexin.platform</groupId>
    <artifactId>gexin-rp-sdk-http</artifactId>
    <version>4.1.0.5</version>
</dependency>
<dependency>
    <groupId>com.gexin.platform</groupId>
    <artifactId>gexin-rp-fastjson</artifactId>
    <version>1.0.0.3</version>
</dependency>
<dependency>
    <groupId>com.google.protobuf</groupId>
    <artifactId>protobuf-java</artifactId>
    <version>2.5.0</version>
</dependency>
複製程式碼

4.2 編寫服務端簡單demo

按照UniPush開通指南，開通UniPush，獲取appId、appKey等，編寫下面簡單demo，客戶端就會收到訊息啦~

客戶端接收訊息程式碼，參考4.3

public class AppPush {

    // STEP1：獲取應用基本資訊
    private static String appId = "";
    private static String appKey = "";
    private static String masterSecret = "";
    private static String url = "http://sdk.open.api.igexin.com/apiex.htm";

    public static void main(String[] args) throws IOException {

        IGtPush push = new IGtPush(url, appKey, masterSecret);

        Style0 style = new Style0();
        // STEP2：設定推送標題、推送內容
        style.setTitle("請輸入通知欄標題");
        style.setText("請輸入通知欄內容");
        // 註釋採用預設圖示
        // style.setLogo("push.png");  // 設定推送圖示
        // STEP3：設定響鈴、震動等推送效果
        style.setRing(true);  // 設定響鈴
        style.setVibrate(true);  // 設定震動

        // STEP4：選擇通知模板
        NotificationTemplate template = new NotificationTemplate();
        template.setAppId(appId);
        template.setAppkey(appKey);
        template.setStyle(style);
        // 點選訊息開啟應用
        template.setTransmissionType(1);
        // 傳遞自定義訊息
        template.setTransmissionContent("自定義訊息，可以是json
        字串");


        // STEP5：定義"AppMessage"型別訊息物件,設定推送訊息有效期等推送引數
        List<String> appIds = new ArrayList<String>();
        appIds.add(appId);
        AppMessage message = new AppMessage();
        message.setData(template);
        message.setAppIdList(appIds);
        message.setOffline(true);
        message.setOfflineExpireTime(1000 * 600);  // 時間單位為毫秒

        // STEP6：執行推送
        IPushResult ret = push.pushMessageToApp(message);
        System.out.println(ret.getResponse().toString());
    }
}
複製程式碼

4.3 客戶端App.vue新增訊息處理邏輯

/**
  * 處理推送訊息
  */
handlePush() {
  // #ifdef APP-PLUS
  const _self = this
  const _handlePush = function(message) {
    // 獲取自定義資訊
    let payload = message.payload
    try {
      // JSON解析
      payload = JSON.parse(payload)
      // 攜帶自定義資訊跳轉應用頁面
      uni.navigateTo({
        url: '/pages/xxx?data=' + JSON.stringify(payload)
      })
    } catch(e) {}
  }
  // 事件處理
  plus.push.addEventListener('click', _handlePush)
  plus.push.addEventListener('receive', _handlePush)
  // #endif
},
複製程式碼

五、思考

應用確實接收到了訊息，但是所有角色的使用者都會接收到和自己不想關的待辦任務訊息。這是違背需求的！所以基於此，作者研究了服務端傳送到客戶端訊息的原理：

實際上，訊息不管是單推還是群推，推送的目標都是clientid，clientid標識每個客戶端的身份

問題來了，怎麼獲取客戶端的clientid呢？

六、最終方案

6.1 獲取客戶端clientid

經過查詢資料，有一個api是getClientInfo方法，可以獲取客戶端資訊，但是必須條件編譯，因為是plus介面。

以下程式碼，使用者登陸完成時，獲取客戶端資訊（appid,appkey,clientid）、使用者資訊（賬戶名、角色等）、其他資訊，向服務端提交api請求，儲存客戶端clientid和角色的關聯資訊。

// 儲存clientid到伺服器
// #ifdef APP-PLUS
const clientInfo = plus.push.getClientInfo()
let pushUser = {
  clientid: clientInfo.clientid,
  appid: clientInfo.appid,
  appkey: clientInfo.appkey,
  userName: '使用者名稱',
  userRole: '使用者角色'
}
// 提交api請求，服務端儲存客戶端角色資訊
Vue.prototype.$minApi.savePushUser(pushUser)
// #endif
複製程式碼

6.2 服務端接收客戶端角色資訊處理

服務端接收到資訊，根據自己的業務邏輯，儲存或者更新，作者的處理邏輯時已經儲存的clientid，不在新增，更新角色資訊。

clientid和角色關係，資料庫表結構

資料庫表結構

6.3 服務端根據不同角色傳送待辦提醒

改進訊息傳送方式，採用個推toList：簡稱“批量推”，指向制定的一批使用者推送訊息

/**
* @params pushMessage推送訊息
* @params appPushList推送角色目標列表
*/
public static void pushMessage(PushMessage pushMessage, List<AppPush> appPushList) {
  IGtPush push = new IGtPush(url, appKey, masterSecret);

  Style0 style = new Style0();
  // STEP2：設定推送標題、推送內容
  style.setTitle(pushMessage.getTitle());
  style.setText(pushMessage.getContent());
//        style.setLogo("push.png"); // 設定推送圖示
  // STEP3：設定響鈴、震動等推送效果
  style.setRing(true);  // 設定響鈴
  style.setVibrate(true);  // 設定震動

  // STEP4：選擇通知模板
  NotificationTemplate template = new NotificationTemplate();
  template.setAppId(appId);
  template.setAppkey(appKey);
  template.setStyle(style);
  // 點選訊息開啟應用
  template.setTransmissionType(1);
  // 傳遞自定義訊息
  template.setTransmissionContent(JSONUtil.toJsonStr(pushMessage));


  // STEP5：定義"AppMessage"型別訊息物件,設定推送訊息有效期等推送引數
  // 採用toList方案，定義ListMessage訊息型別
//        List<String> appIds = new ArrayList<String>();
//        appIds.add(appId);
  ListMessage message = new ListMessage();
  message.setData(template);
//        message.setAppIdList(appIds);
  message.setOffline(true);
  message.setOfflineExpireTime(1000 * 600);  // 時間單位為毫秒

  String contentId = push.getContentId(message);
  // 獲取推送目標
  List targets = new ArrayList();
  for (AppPush ap : appPushList) {
      Target target = new Target();
      target.setAppId(appId);
      target.setClientId(ap.getClientid());
      targets.add(target);
  }

  // STEP6：執行推送，不採用toApp方案，採用toList方案
//        IPushResult ret = push.pushMessageToApp(message);
  IPushResult ret = push.pushMessageToList(contentId, targets);
  System.out.println(ret.getResponse().toString());
}
複製程式碼

PushMessage類是一個model

public class PushMessage {
    private String title;
    private String content;
    // 使用者角色
    private String userRole;
    // 其他物件

    // 省略，getter setter方法
}
複製程式碼

AppPush類是資料庫表對映類

public class AppPush
  private String appid;//appid
  private String appkey;//appkey
  private String clientid;//clientid
  private String userName;//賬戶
  private String userRole;//使用者角色
  // 其他物件

  // 省略，getter setter方法
}
複製程式碼

七、自定義通知圖示

在客戶端manifest.json檔案中的sdkConfigs中新增如下配置，圖示自己新增

/* SDK配置 */
"sdkConfigs" : {
    "push" : {
        "unipush" : {
"icons": {
  "push": {
    "ldpi": "unpackage/res/icons/48x48.png",
    "mdpi": "unpackage/res/icons/48x48.png",
    "hdpi" : "unpackage/res/icons/72x72.png",
    "xhdpi" : "unpackage/res/icons/96x96.png",
    "xxhdpi" : "unpackage/res/icons/144x144.png",
    "xxxhdpi" : "unpackage/res/icons/192x192.png"
  },
  "small": {
    "ldpi": "unpackage/res/icons/18x18.png",
    "mdpi": "unpackage/res/icons/24x24.png",
    "hdpi": "unpackage/res/icons/36x36.png",
    "xhdpi": "unpackage/res/icons/48x48.png",
    "xxhdpi": "unpackage/res/icons/72x72.png"
  }
}
}
    }
},
複製程式碼

八、開源專案

開源專案uniapp-admin

開源不易，且用且珍惜！


贊助作者

uni-app訊息推送方案 uni-app訊息推送方案

轉載請註明：溜爸 » uni-app訊息推送方案

相關文章