Essay: Implementing real-time language reminders for orders on the web and app

Requirements:

After the server receives the order submitted by the customer, it gives a real-time voice reminder to the store owner. Our products are available on the web and on the app. It is convenient for store owners to know new news through voice when they are busy.

Technology stack:

Vue3

Uniapp

Java

Difficulty:

Without further ado, the difficulty in implementing real-time voice reminders for orders lies in the word “real-time”.

Program selection

There are three implementation methods that I know of, it just depends on which one is used. After analyzing their advantages and disadvantages respectively, I came to a conclusion that is most suitable for our project.

1. Polling

Advantages: Simple and quick to implement

Disadvantages: Not really real-time! ! ! It wastes a lot of requests and wastes server resources! ! !

2. websocket

Advantage:

  1. Native protocol: WebSocket is an HTML5 standard. It is a native protocol based on TCP and provides low-latency, high-performance two-way communication.
  2. Simplicity: The WebSocket protocol is relatively simple and suitable for scenarios where developers need more control.
  3. Broad support: WebSocket is widely supported. Almost all modern browsers support WebSocket, and there are many server-side libraries and frameworks available.

Disadvantages:

  1. Pure communication protocol: WebSocket only provides basic communication functions and does not include more advanced features, such as room management, broadcast, etc. These features require additional development work.

3. socket io

Advantage:

  1. Encapsulating complexity: Socket.IO is a library built on WebSocket. It encapsulates the complexity of WebSocket and provides more advanced functions, such as room management, broadcast, reconnection, etc.
  2. Cross-platform: Socket.IO not only supports the browser side, but also supports the server side, so it can be used in a variety of environments, including Node.js, Python, Java, etc.
  3. Adaptive: Socket.IO can choose the best transport method based on the capabilities of the client and server, including WebSocket, polling, and long polling, to ensure real-time communication in a variety of situations.

Disadvantages:

  1. Complexity: Socket.IO is more complex than WebSocket because it introduces more concepts and options, which may require more learning and development costs.
  2. Not a native protocol: Although Socket.IO is a powerful library, it is not a native WebSocket protocol, which means it may introduce some additional overhead.

Conclusion, websocket is more suitable for us

We need true real-time, so polling is not suitable for us; socket.io is a bit overqualified for our scenario; websocket is a simple, native two-way communication protocol. WebSocket may be more suitable for us, but it requires its own Building a websocket server is also a bit time-consuming and requires maintenance at a critical stage. If the number of visits is large, the cost of server stability and bandwidth will also be a big expense. After searching online, I found GoEasy websocket message push. They can provide websocket cloud services and help me solve the worries of choosing websocket protocol for implementation.

Implementation

The web terminal receives messages in real time

1. Introduce goeasy sdk

What I use here is to introduce it through npm.

 npm install [email protected] --save

2. Import goeasy sdk, initialize goeasy, and establish goeasy connection

For everyone’s convenience, I only display it on one page here.

The app key needs to be registered from the goeasy official website www.goeasy.io.

import GoEasy from 'goeasy';
const goEasy = GoEasy.getInstance({
  host:'hangzhou.goeasy.io', //Singapore host: singapore.goeasy.io
  appkey: "your appkey", //Replace with your application appkey
  modules: ['pubsub']
});
// It is recommended to initialize the global GoEasy object in main.js
Vue.prototype.goEasy = goEasy;
//establish connection
goEasy.connect({
  onSuccess: function () { //Connection successful
    console.log("GoEasy connect successfully.") //Connection successful
  },
  onFailed: function (error) { //Connection failed
   console.log("Failed to connect GoEasy, code:" + error.code + ",error:" + error.content);
  }
});

3. Subscribe to the channel for new orders and process the voice playback after receiving the message

//Subscribe to messages
goEasy.pubsub.subscribe({
  channel: "new_order",//Replace with your own channel
  onMessage: function (message) { //Message received
    //Received the message, play the audio file
    playAudioForNewOrder(message);
  },
  onSuccess: function () {
    console.log("Channel subscription successful.");
  },
  onFailed: function (error) {
    console.log("Channel subscription failed, error code: " + error.code + " Error message: " + error.content)
  }
});

The app receives messages in real time

Some customers do not have computer equipment, and reminders on the web side are meaningless to them, so we need to add voice reminders on the app side. Based on the characteristics of the app, users will not keep the app running in the foreground, so there is We need to realize that when the app is running in the background or the app process is killed, the user needs to be reminded in real time if there are new orders.

1. Introduce goeasy sdk

What is used here is local introduction

import GoEasy from '/lib/GOEASY-IM/js_sdk/goeasy-2.8.8.esm.min.js'

2. Import goeasy sdk, initialize goeasy, and establish goeasy connection

The app key needs to be registered from the goeasy official website www.goeasy.io.

import GoEasy from 'goeasy';
const goEasy = GoEasy.getInstance({
  host:'hangzhou.goeasy.io', //Singapore host: singapore.goeasy.io
  appkey: "your appkey", //Replace with your application appkey
  modules: ['pubsub']
});
// It is recommended to initialize the global GoEasy object in main.js
Vue.prototype.goEasy = goEasy;
//establish connection
goEasy.connect({
  onSuccess: function () { //Connection successful
    console.log("GoEasy connect successfully.") //Connection successful
  },
  onFailed: function (error) { //Connection failed
   console.log("Failed to connect GoEasy, code:" + error.code + ",error:" + error.content);
  }
});

3. Subscribe to the channel for new orders and process the voice playback after receiving the message

//Subscribe to messages
goEasy.pubsub.subscribe({
  channel: "new_order",//Replace with your own channel
  onMessage: function (message) { //Message received
    //Received the message, play the audio file
    playAudioForNewOrder(message);
  },
  onSuccess: function () {
    console.log("Channel subscription successful.");
  },
  onFailed: function (error) {
    console.log("Channel subscription failed, error code: " + error.code + " Error message: " + error.content)
  }
});

4. After the app is running in the background or the app process is killed, provide a verbal reminder for new orders

The focus of this function is actually to realize the offline notification bar reminder, and a custom ringtone is needed to remind the user of the uniqueness of this notification. Therefore, we need to integrate the notification bar reminder and custom ringtone functions provided by GoEasy.

4.1. Integrate notification bar push function

Anyone who has experience in app development knows that in the domestic Android market, there is no unified manufacturer push channel. Different mobile phone manufacturers use their own manufacturer channels to push offline messages. Therefore, if you want to integrate notification bar push, you cannot bypass the manufacturer channel integration.

Below I will record the general implementation steps to facilitate everyone to understand the integration ideas. If you have specific questions, it is recommended to consult the goeasy official website directly.

a. Initialize GoEasy to allow notification bar reminders
 Vue.prototype.goeasy = GoEasy.getInstance({
        host: "hangzhou.goeasy.io", //If it is in Singapore: singapore.goeasy.io
        appkey: "your common key",
        modules: ['pubsub'],//As needed, pass in 'pubsub' or 'im', or both in array mode
        allowNotification: true, // true means notification bar reminder is supported, false means notification bar reminder is not required
    });
b. After main.js GoEasy is initialized, listen to the onClickNotification event immediately
 //When the user clicks on the notification bar message to trigger, developers can execute different business logic based on the message data, such as jumping to different pages or displaying different content.
    goeasy.onClickNotification((message) => {
        // message
        // {
        // channel: "new_order",
        // content: "hello GoEasy!"
        // }
        console.log('Clicked notification message - ', message);
    });
c. Integrate manufacturer channels and add custom ringtones

Note: the sdk version cannot be lower than 2.8.0; the goeasy native plug-in version cannot be lower than 1.5.2.

1) Refer to the goeasy document to configure the manufacturer channel. It is included in their official documents and will not be repeated. Access the manufacturer channel – Uniapp push | GoEasy document

Configure the manufacturer channel in the goeasy backend and native plug-in page according to the documentation.

2) Add custom ringtone

GoEasy custom ringtone current file format support:

iOS: Only supports caf files. How to convert other formats to caf? There are many tutorials on the Internet.

Android: In order to ensure that the same set of codes can be played on different mobile phones, it is recommended to use the mp3 format uniformly. Other formats may not be compatible with other mobile phone brands. (If you need to use other formats, each manufacturer supports different file formats. For details, please refer to each manufacturer’s documentation and test by yourself)

3) Add the code pushed by the notification bar and the file name of the custom ringtone in the code that sends the message
 pubsub.publish({
        channel: "new_order", //Please confirm that it is consistent with the receiving end
        message: "New order xxxx", //The message content received by onMessage in the app
        notification: { //Define notification bar push
            title: 'New order reminder', //Notification bar reminder title, only displayed in the notification bar
            body: "You have a new order", //Notification bar reminder content, only displayed in the notification bar
            sound: 'sound' //Ringtone file name, please note that the extension cannot be included! ! !
        },
        onSuccess: function () {
            console.log("Publish successfully.")
        },
        onFailed: function (error) {
            console.log("Failed to publish message, code:" + error.code + ' error:' + error.content);
        }
    });
4) Test the custom base

How to make a custom dock: Making a custom dock – Uniapp Push | GoEasy Documentation

The integration is now complete.

Notes

  1. If you do not receive the notification bar reminder, you can refer to the document Uniapp + GoEasy native plug-in to implement troubleshooting records in the notification bar push process_uniapp notification bar-CSDN blog to troubleshoot
  2. If the custom ringtone does not work, you can try to connect the base again (it is possible that the audio file is not included in the installation package)
  3. If you have any other questions, you can contact their customer service staff directly.

Oh oh oh By the way, they recently created a new QQ group with dedicated people to answer questions. Those who are interested can join the group for discussion.