Uni app message push scheme

I. Introduction

Uni app supports message push. Please refer to the following documents:

UniPush introduction

UniPush User Guide

UniPush launch Guide

How to customize the push notification icon?

Using UniPush in uni app

Two, effect

Open source project uniapp admin

Three, demand

Users with different roles log in to the App and receive different to-do reminders. That is, who handles the to-do task and who will receive the reminder. Push to-do messages to users in different roles

IV. program steps

4.1 view push documents

Because the push of uni app is integrated with push, view the push document access scheme

Because the background is java language, so View the java Integration Guide

# 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 write a simple demo on the server

according to UniPush launch Guide , enable UniPush, get appId, appKey, etc., write the following simple demo, and the client will receive the message~

Client receives message code, refer to 4.3

public class AppPush {

    // STEP1: get basic application information
    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: set push title and push content
        style.setTitle("Please enter the notification column title");
        style.setText("Please enter the notice column");
        // Comment with default icon
        // style.setLogo("push.png"); / / set push Icon
        // STEP3: set the push effect of ringing, vibration, etc
        style.setRing(true);  // set alarm
        style.setVibrate(true);  // Set up vibration

        // STEP4: select notification template
        NotificationTemplate template = new NotificationTemplate();
        template.setAppId(appId);
        template.setAppkey(appKey);
        template.setStyle(style);
        // Click the message to open the app
        template.setTransmissionType(1);
        // Deliver custom message
        template.setTransmissionContent("Custom message, which can be json
        //String "";


        // STEP5: define "AppMessage" type message object, set push parameters such as push message validity period
        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);  // Time in milliseconds

        // STEP6: perform push
        IPushResult ret = push.pushMessageToApp(message);
        System.out.println(ret.getResponse().toString());
    }
}

4.3 add message processing logic to client App.vue

/**
  * Processing push messages
  */
handlePush() {
  // #ifdef APP-PLUS
  const _self = this
  const _handlePush = function(message) {
    // Get custom information
    let payload = message.payload
    try {
      // JSON analysis
      payload = JSON.parse(payload)
      // Carry custom information to jump to application page
      uni.navigateTo({
        url: '/pages/xxx?data=' + JSON.stringify(payload)
      })
    } catch(e) {}
  }
  // event processing
  plus.push.addEventListener('click', _handlePush)
  plus.push.addEventListener('receive', _handlePush)
  // #endif
},

Five, thinking

The app does receive messages, but users in all roles will receive to-do messages that they don't want to close. This is against demand! So based on this, the author studies the principle of sending messages from the server to the client:

In fact, whether the message is single push or group push, the target of push is clientid, which identifies the identity of each client

The question is, how to get the client's clientid?

Vi. final plan

6.1 get client clientid

After querying the data, an api is the getClientInfo method, which can obtain the client information, but it must be conditionally compiled, because it is a plus interface.

The following code, when the user logs in, obtains the client information (appid,appkey,clientid), user information (account name, role, etc.), other information, submits api request to the server, and saves the association information of client clientid and role.

// Save clientid to server
// #ifdef APP-PLUS
const clientInfo = plus.push.getClientInfo()
let pushUser = {
  clientid: clientInfo.clientid,
  appid: clientInfo.appid,
  appkey: clientInfo.appkey,
  userName: 'User name',
  userRole: 'User roles'
}
// Submit the api request, and the server saves the client role information
Vue.prototype.$minApi.savePushUser(pushUser)
// #endif

6.2 server receives client role information processing

After receiving the information, the server saves or updates the clientid saved in the author's processing logic according to its own business logic. The role information is not added or updated.

clientid and role relationship, database table structure

6.3 server sends to-do reminders according to different roles

Improve message sending mode and adopt personal push toList: short for "batch push", which refers to a set of user push messages

/**
* @params pushMessage Push message
* @params appPushList Push role target list
*/
public static void pushMessage(PushMessage pushMessage, List<AppPush> appPushList) {
  IGtPush push = new IGtPush(url, appKey, masterSecret);

  Style0 style = new Style0();
  // STEP2: set push title and push content
  style.setTitle(pushMessage.getTitle());
  style.setText(pushMessage.getContent());
//        style.setLogo("push.png"); / / set push Icon
  // STEP3: set the push effect of ringing, vibration, etc
  style.setRing(true);  // set alarm
  style.setVibrate(true);  // Set up vibration

  // STEP4: select notification template
  NotificationTemplate template = new NotificationTemplate();
  template.setAppId(appId);
  template.setAppkey(appKey);
  template.setStyle(style);
  // Click the message to open the app
  template.setTransmissionType(1);
  // Deliver custom message
  template.setTransmissionContent(JSONUtil.toJsonStr(pushMessage));


  // STEP5: define "AppMessage" type message object, set push parameters such as push message validity period
  // Using the toList scheme, define the message type of 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);  // Time in milliseconds

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

  // STEP6: push, no toApp, toList
//        IPushResult ret = push.pushMessageToApp(message);
  IPushResult ret = push.pushMessageToList(contentId, targets);
  System.out.println(ret.getResponse().toString());
}

The PushMessage class is a model

public class PushMessage {
    private String title;
    private String content;
    // User roles
    private String userRole;
    // Other objects

    // Omit, getter setter method
}

AppPush class is a database table mapping class

public class AppPush
  private String appid;//appid
  private String appkey;//appkey
  private String clientid;//clientid
  private String userName;//account
  private String userRole;//User roles
  // Other objects

  // Omit, getter setter method
}

VII. Custom notification icon

Add the following configuration in SDK configs in the client manifest.json file, and add the icon by yourself

/* SDK To configure */
"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"
  }
}
}
    }
},

VIII. Open source projects

Open source project uniapp admin

< center > open source is not easy to use and cherish! </center>



Sponsor author

Please indicate: News push scheme of uni app

Tags: iOS SDK Java JSON Google

Posted on Tue, 05 Nov 2019 18:17:37 -0800 by shwanky