The application of the primary dictionary tree lookup in Emoji and keyword retrieval Part-3

Series Index

1. Unicode and Emoji
2. Dictionary tree Trietree and performance testing
3. Production Practice

Production Practice

We finally have to solve the Emoji in the browser and print on the same display.

In contrast, the MacOS and Unicode standards are similar in their display and accuracy, and ultimately decide to use a Unicode-provided image as a cross-platform display.

The browser and render program Emoji the content to the backend for retrieval before rendering the text.

Examples of submission requests are:

{  "sections":[    "颠簸了三小时飞机️两小时公交地铁四小时大巴一小时 终于到了我们的目的地像面粉一样的沙滩和碧绿的大海 这就是我们第一次旅行的地方in沙美岛"     ]}

The backend uses MongoDB to store all Emoji's base64 representations, retrieving Emoji characters after the output of the replacement content.

  {"sections": ["bumpy three-hour plane [chuye-emoji://1835]️[chuye-emoji://2263] two-hour bus subway [chuye-emoji:// 1792][CHUYE-EMOJI://2263] four-hour bus [chuye-emoji://2263] an hour [chuye-emoji://1834] finally arrived at our destination flour-like sand and green sea This is where we first traveled in Ko samed [chuye-emoji://1734] "]," REGEXP ":" \\[chuye\\-emoji:\\/\\/(\\d+) \ \] "," Images ": {" 1734 ":" Data:i MAGE/PNG;BASE64,IVBORW0KGGOAAAANSUHEUGAAAJAAAACQCAMAAADQMBKKAAAABGDBTUEAALGPC ... "," 1792 ":" Data:image/png; BASE64,IVBORW0KGGOAAAANSUHEUGAAAJAAAACQCAMAAADQMBKKAAAABGDBTUEAALGPC ... "," 1834 ":" Data:image/png;base64, IVBORW0KGGOAAAANSUHEUGAAAJAAAACQCAMAAADQMBKKAAAABGDBTUEAALGPC ... "," 1835 ":" Data:image/png;base64, IVBORW0KGGOAAAANSUHEUGAAAJAAAACQCAMAAADQMBKKAAAABGDBTUEAALGPC ... "," 2263 ":" Data:image/png;base64, IVBORW0KGGOAAAANSUHEUGAAAEGAAABEBAMAAADQAW4PAAAABGDBTUEAALGPC ... "}," emojis ": {" 1734 ":" "," 1792 ":" "," 1834 " : "", "1835": "", "2263": ""}}  

Removing base64 more of the later, only acts as an example.

The returned content contains the following fields

Field	type
Sections	Array of strings	String output after replacing Emoji
Regexp	String	Regular expressions for auxiliary positioning emoji Expressions
Images	Dictionary/Object	Base64-encoded representations of all Emoji expressions

The sample request contains 5 emoji characters, and the backend replaces them one by one with the so-called emoji expression , followed by [chuye-emoji://1734]， [chuye-emoji://1792]， [chuye-emoji://1834]， [chuye-emoji://1835]， [chuye-emoji://2263] .

Emoji expression : The author's own definition, representing a section of Emoji, fixed format, such as the [chuye-emoji://1734] tail of the number is the ordinal. The entire expression can be regExp matched with a regular expression field that is carried by the response .

After the browser gets the response, it uses the regular to locate the expression, replaces it as a label and applies the Base64 resource in the response, and finally treats the text as HTML output. Demo Code:

let req      = {sections: ["..."]};let resp     = // POST req to service and get responselet regExp   = new RegExp(resp.regExp， 'g');let replacments = [];for (let section of resp.sections) {    let replacment = section.replace(regExp， (...args) => {        let id  = args[1];        let src = resp.images[id];        return ``    });    replacments.push(replacment);}//do stuff with replacments

The output content after simplifying base64 is the img HTML content of text and label blending.

emojiThe style is defined as follows (quoted from the Twitter scenario, not exactly tested)

img.emoji {  height: 1em;  width: 1em;  margin: 0 .05em 0 .1em;  vertical-align: -0.1em;}

Use Base64 instead of throwing resources onto a CDN, or testing based on existing conditions.

Our print may contain 10-20 emoji characters, the corresponding base64 in the response, the size of about 100k, and then magnified twice times can also be accepted.

• If the substitution of 16 URL resources, the request cost is very exaggerated;
• Merging pictures can reduce HTTP requests, but exponentially amplifies the complexity of the solution;