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:
- Native protocol: WebSocket is an HTML5 standard. It is a native protocol based on TCP and provides low-latency, high-performance two-way communication.
- Simplicity: The WebSocket protocol is relatively simple and suitable for scenarios where developers need more control.
- Broad support: WebSocket is widely supported. Almost all modern browsers support WebSocket, and there are many server-side libraries and frameworks available.
Disadvantages:
- 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:
- 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.
- 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.
- 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:
- Complexity: Socket.IO is more complex than WebSocket because it introduces more concepts and options, which may require more learning and development costs.
- 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
- 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
- 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)
- 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.